/* Clínica Sorriso Serra (demo "clinic", DEC-082): brand kit docs/demos/clinic.md. Every brand value is a --d-*
   variable declared once below; layout spacing uses --vt-space-*, --vt-z-* and --vt-measure. Scoped to body.d-clinic. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lib/demos/clinic/outfit/files/outfit-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/lib/demos/clinic/figtree/files/figtree-latin-wght-normal.woff2") format("woff2");
}

body.d-clinic {
  /* Palette (contrast table in the brand kit) */
  --d-bg: #FFFFFF;
  --d-surface: #EEF5F2;
  --d-ink: #12302C;
  --d-muted: #4A605B;
  --d-line: #D3E2DD;
  --d-accent: #0E6B65;
  --d-accent-ink: #FFFFFF;
  --d-accent-2: #9A4A33;
  --d-accent-hover: color-mix(in srgb, var(--d-accent) 82%, var(--d-ink));
  --d-accent-tint: color-mix(in srgb, var(--d-accent) 9%, var(--d-bg));
  --d-clay-tint: color-mix(in srgb, var(--d-accent-2) 9%, var(--d-bg));
  --d-surface-deep: color-mix(in srgb, var(--d-accent) 14%, var(--d-surface));
  --d-accent-2-hover: color-mix(in srgb, var(--d-accent-2) 85%, var(--d-ink));
  --d-backdrop: rgb(18 48 44 / 0.45);

  /* Type */
  --d-font-display: "Outfit", system-ui, sans-serif;
  --d-font-text: "Figtree", system-ui, sans-serif;
  --d-text-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --d-text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  --d-text-h3: 1.25rem;
  --d-text-body: 1rem;
  --d-text-body-md: 1.0625rem;
  --d-text-lead: 1.1875rem;
  --d-text-small: 0.875rem;
  --d-text-eyebrow: 0.75rem;
  --d-text-tag: 0.6875rem;
  --d-text-logo: 1.375rem;
  --d-text-tile: 2.25rem;
  --d-text-date: 2rem;
  --d-leading-h1: 1.08;
  --d-leading-h2: 1.15;
  --d-leading-h3: 1.3;
  --d-leading-body: 1.65;
  --d-leading-tight: 1.2;
  --d-tracking-h1: -0.025em;
  --d-tracking-logo: -0.02em;
  --d-tracking-eyebrow: 0.14em;
  --d-tracking-tag: 0.18em;
  --d-weight-text: 400;
  --d-weight-heading: 500;
  --d-weight-h1: 600;
  --d-weight-label: 600;
  --d-weight-strong: 700;
  --d-measure: 62ch;
  --d-measure-heading: 16ch;
  --d-measure-lead: 52ch;
  --d-measure-footer: 32ch;

  /* Shape, depth, rhythm, motion */
  --d-radius-sm: 12px;
  --d-radius-lg: 28px;
  --d-radius-pill: 999px;
  --d-shadow: 0 1px 2px rgb(18 48 44 / 0.06), 0 12px 32px -8px rgb(18 48 44 / 0.14);
  --d-section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --d-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --d-duration: 180ms;
  --d-border-width: 1px;
  --d-control-width: 1.5px;
  --d-focus-width: 2px;
  --d-focus-offset: 2px;
  --d-rule: var(--d-border-width) solid var(--d-line);
  --d-control-border: var(--d-control-width) solid var(--d-muted);
  --d-lift: -1px;
  --d-photo-offset: 16px;

  /* Sizes */
  --d-target: 48px;
  --d-target-min: 44px;
  --d-logo-mark: 40px;
  --d-icon-box: 3rem;
  --d-icon-box-sm: 2.5rem;
  --d-avatar: 56px;
  --d-avatar-sm: 40px;
  --d-avatar-xs: 28px;
  --d-avatar-text: 1.125rem;
  --d-switch-w: 2.75rem;
  --d-switch-h: 1.5rem;
  --d-sidebar-w: 15rem;
  --d-sticky-bar-h: 4.5rem;
  --d-menu-panel-w: 15rem;
  --d-underline-offset: 0.2em;
  --d-slot-min: 4.75rem;
  --d-day-min: 6.5rem;
  --d-date-box: 4.5rem;
  --d-dialog-w: 28rem;
  --d-plan-line: 2px;
  --d-agenda-col: 15rem;
  --d-key-size: 0.875rem;
  --d-hero-phone-ratio: 2 / 1;
  --d-setting-text-min: 12rem;
  --d-option-min: 10rem;
  --d-select-min: 10rem;

  --vt-focus-color: var(--d-accent);
  --vt-focus-width: var(--d-focus-width);
  --vt-focus-offset: var(--d-focus-offset);
  --bs-body-bg: var(--d-bg);
  --bs-body-color: var(--d-ink);
  --bs-body-font-family: var(--d-font-text);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--d-font-text);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-text);
  line-height: var(--d-leading-body);
}

@media (min-width: 768px) {
  body.d-clinic {
    font-size: var(--d-text-body-md);
  }
}

/* ---------- Base ---------- */

/* Base element rules: one class of specificity (beats site.css element rules); component classes below win by order. */
.d-clinic :where(h1, h2, h3) {
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-heading);
  letter-spacing: normal;
  text-wrap: balance;
  color: inherit;
}

.d-clinic :where(main h1) {
  max-width: var(--d-measure-heading);
  margin-bottom: var(--vt-space-4);
  font-size: var(--d-text-h1);
  font-weight: var(--d-weight-h1);
  line-height: var(--d-leading-h1);
  letter-spacing: var(--d-tracking-h1);
}

.d-clinic :where(main h2) {
  margin-bottom: var(--vt-space-4);
  font-size: var(--d-text-h2);
  line-height: var(--d-leading-h2);
}

.d-clinic :where(main h3) {
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h3);
  line-height: var(--d-leading-h3);
}

:where(.d-clinic) a {
  color: var(--d-accent);
  text-underline-offset: var(--d-underline-offset);
  transition: color var(--d-duration) var(--d-ease), background-color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease), box-shadow var(--d-duration) var(--d-ease), transform var(--d-duration) var(--d-ease);
}

:where(.d-clinic) a:hover {
  color: var(--d-accent-hover);
}

.d-clinic .vt-icon {
  flex-shrink: 0;
}

.d-eyebrow {
  margin-bottom: var(--vt-space-3);
  color: var(--d-accent);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-eyebrow-icon {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-lead {
  max-width: var(--d-measure-lead);
  color: var(--d-muted);
  font-size: var(--d-text-lead);
}

.d-prose {
  max-width: var(--d-measure);
}

.d-small {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-label-heading {
  margin-block: var(--vt-space-5) var(--vt-space-3);
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-link {
  font-weight: var(--d-weight-label);
}

.d-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
}

.d-link-arrow .vt-icon:last-child {
  transition: transform var(--d-duration) var(--d-ease);
}

.d-link-arrow:hover .vt-icon:last-child {
  transform: translateX(var(--vt-space-1));
}

.d-meta {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-num,
.d-price {
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-heading);
  font-variant-numeric: tabular-nums;
}

.d-price {
  color: var(--d-accent);
}

/* ---------- Buttons: pills ---------- */

.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target);
  padding: var(--vt-space-2) var(--vt-space-5);
  border: var(--d-control-width) solid transparent;
  border-radius: var(--d-radius-pill);
  font-family: var(--d-font-display);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-duration) var(--d-ease), color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease), box-shadow var(--d-duration) var(--d-ease), transform var(--d-duration) var(--d-ease);
}

.d-btn-primary {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-clinic .d-btn-primary:hover {
  background-color: var(--d-accent-hover);
  color: var(--d-accent-ink);
  box-shadow: var(--d-shadow);
  transform: translateY(var(--d-lift));
}

.d-btn-primary[aria-current="page"] {
  background-color: var(--d-accent-hover);
}

.d-btn-secondary {
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-clinic .d-btn-secondary:hover {
  background-color: var(--d-surface-deep);
  color: var(--d-ink);
}

.d-section-surface .d-btn-secondary,
.d-card .d-btn-secondary,
.d-dialog .d-btn-secondary {
  background-color: var(--d-bg);
  border-color: var(--d-line);
}

.d-btn-quiet {
  background-color: transparent;
  color: var(--d-muted);
}

.d-clinic .d-btn-quiet:hover {
  background-color: var(--d-surface);
  color: var(--d-ink);
}

.d-btn-danger {
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

.d-clinic .d-btn-danger:hover {
  background-color: var(--d-accent-2-hover);
  color: var(--d-accent-ink);
}

.d-btn-inverse {
  background-color: var(--d-bg);
  color: var(--d-ink);
}

.d-clinic .d-btn-inverse:hover {
  background-color: var(--d-surface);
  color: var(--d-ink);
  transform: translateY(var(--d-lift));
}

.d-btn-block {
  width: 100%;
}

.d-btn[hidden] {
  display: none;
}

.d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-3);
  margin-top: var(--vt-space-5);
}

/* Inverted areas: light focus ring */
.d-band,
.d-footer {
  --vt-focus-color: var(--d-bg);
}

/* ---------- Tags and statuses ---------- */

.d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: 0 0 var(--vt-space-4);
  padding: 0;
  list-style: none;
}

.d-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--vt-space-1) var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-ink);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
}

.d-tag-clay {
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

.d-status {
  display: inline-flex;
  align-items: center;
  padding: var(--vt-space-1) var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  white-space: nowrap;
}

.d-status-scheduled {
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-status-arrived {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-status-noshow,
.d-status-cancelled {
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

.d-status-done {
  border: var(--d-border-width) solid var(--d-line);
  color: var(--d-muted);
}

/* ---------- Header ---------- */

.d-header {
  position: relative;
  z-index: calc(var(--vt-z-header) - 1);
  border-bottom: var(--d-rule);
  background-color: var(--d-bg);
}

.d-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-4);
  min-height: calc(var(--vt-space-8) + var(--vt-space-3));
}

.d-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin: 0;
  color: var(--d-ink);
  text-decoration: none;
}

.d-clinic .d-logo:hover {
  color: var(--d-ink);
}

.d-logo-mark {
  width: var(--d-logo-mark);
  height: var(--d-logo-mark);
}

.d-logo-text {
  display: flex;
  flex-direction: column;
  line-height: var(--d-leading-tight);
}

.d-logo-name {
  font-family: var(--d-font-display);
  font-size: var(--d-text-logo);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-logo);
  white-space: nowrap;
}

.d-logo-tag {
  display: none;
  margin-top: var(--vt-space-1);
  color: var(--d-accent);
  font-family: var(--d-font-text);
  font-size: var(--d-text-tag);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-tag);
  text-transform: uppercase;
}

@media (min-width: 576px) {
  .d-logo-tag {
    display: block;
  }
}

.d-nav-list {
  display: flex;
  align-items: center;
  gap: var(--vt-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  color: var(--d-ink);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-clinic .d-nav-link:hover {
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-clinic .d-nav-link[aria-current="page"] {
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-nav-admin {
  color: var(--d-muted);
}

.d-header-actions {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-header-cta {
  padding-inline: var(--vt-space-4);
}

.d-menu {
  position: relative;
}

.d-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--d-target);
  height: var(--d-target);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-ink);
  list-style: none;
  cursor: pointer;
}

.d-menu-toggle::-webkit-details-marker {
  display: none;
}

.d-menu[open] .d-menu-toggle {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--vt-space-2));
  z-index: var(--vt-z-header);
  min-width: var(--d-menu-panel-w);
  padding: var(--vt-space-2);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
}

.d-menu-panel .d-nav-list {
  flex-direction: column;
  align-items: stretch;
}

.d-menu-panel .d-nav-link {
  width: 100%;
  min-height: var(--d-target);
  border-radius: var(--d-radius-sm);
}

/* ---------- Sections ---------- */

.d-section {
  padding-block: var(--d-section-y);
}

.d-section-surface {
  background-color: var(--d-surface);
}

.d-section-tight {
  padding-block: var(--vt-space-7);
}

.d-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vt-space-4);
  margin-bottom: var(--vt-space-6);
}

.d-section-head .d-prose {
  margin-bottom: 0;
}

.d-section-head-center {
  justify-content: center;
  text-align: center;
}

.d-section-head-center h2 {
  margin-inline: auto;
}

.d-page-head {
  padding-block: var(--vt-space-7);
  background-color: var(--d-bg);
}

.d-page-head-compact {
  padding-bottom: var(--vt-space-5);
}

.d-page-head .d-lead {
  margin-bottom: 0;
}

/* ---------- Photos: large rounded frames, a sage block offset behind feature photos ---------- */

.d-figure {
  position: relative;
  margin: 0;
}

.d-photo,
.d-photo img {
  display: block;
  width: 100%;
}

.d-photo img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--d-radius-lg);
}

.d-figure-offset {
  margin: 0 var(--d-photo-offset) var(--d-photo-offset) 0;
}

.d-figure-offset::before {
  content: "";
  position: absolute;
  inset: var(--d-photo-offset) calc(var(--d-photo-offset) * -1) calc(var(--d-photo-offset) * -1) var(--d-photo-offset);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface-deep);
}

.d-section-surface .d-figure-offset::before {
  background-color: var(--d-bg);
}

.d-figure-offset-start {
  margin: 0 0 var(--d-photo-offset) var(--d-photo-offset);
}

.d-figure-offset-start::before {
  inset: var(--d-photo-offset) var(--d-photo-offset) calc(var(--d-photo-offset) * -1) calc(var(--d-photo-offset) * -1);
}

.d-figure-offset .d-photo {
  position: relative;
}

.d-caption {
  margin-top: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

/* ---------- Home: hero ---------- */

.d-hero {
  padding-block: var(--vt-space-5) var(--vt-space-8);
  background-color: var(--d-bg);
}

.d-hero-grid {
  display: grid;
  gap: var(--vt-space-5);
}

.d-hero-media {
  order: -1;
}

.d-hero-media .d-photo img {
  aspect-ratio: var(--d-hero-phone-ratio);
}

.d-hero h1 {
  margin-bottom: var(--vt-space-3);
}

.d-hero .d-lead {
  margin-bottom: 0;
}

.d-hero .d-actions {
  margin-top: var(--vt-space-4);
}

.d-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2) var(--vt-space-5);
  margin: var(--vt-space-5) 0 0;
  padding: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  list-style: none;
}

.d-hero-points li {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-hero-points .vt-icon {
  color: var(--d-accent);
}

@media (max-width: 991.98px) {
  .d-hero {
    padding-bottom: var(--vt-space-7);
  }
}

@media (max-width: 767.98px) {
  .d-hero .d-lead {
    font-size: var(--d-text-body-md);
  }
}

@media (min-width: 992px) {
  .d-hero {
    padding-block: var(--vt-space-8) var(--vt-space-9);
  }

  .d-hero-grid {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: var(--vt-space-8);
  }

  .d-hero-media {
    order: 0;
    position: relative;
  }

  .d-hero-media::before {
    content: "";
    position: absolute;
    inset: calc(var(--d-photo-offset) * 2) calc(var(--d-photo-offset) * -1) calc(var(--d-photo-offset) * -1) calc(var(--d-photo-offset) * 2);
    border-radius: var(--d-radius-lg);
    background-color: var(--d-surface-deep);
  }

  .d-hero-media .d-photo {
    position: relative;
  }

  .d-hero-media .d-photo img {
    aspect-ratio: 4 / 3;
    box-shadow: var(--d-shadow);
  }

  .d-hero .d-actions {
    margin-top: var(--vt-space-6);
  }
}

/* ---------- Home: specialities, steps, team, clinic, visit, band ---------- */

.d-spec-grid {
  display: grid;
  gap: var(--vt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .d-spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .d-spec-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vt-space-5);
  }
}

.d-spec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-2);
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
  transition: transform var(--d-duration) var(--d-ease);
}

.d-spec-card:hover {
  transform: translateY(calc(var(--d-lift) * 3));
}

.d-spec-card h3 {
  margin: var(--vt-space-2) 0 0;
}

.d-spec-card p {
  margin: 0;
  color: var(--d-muted);
}

.d-spec-card .d-meta {
  margin-top: auto;
  padding-top: var(--vt-space-2);
}

.d-clinic .d-stretched {
  color: var(--d-ink);
  text-decoration: none;
}

.d-stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--d-radius-lg);
}

.d-clinic .d-stretched:hover {
  color: var(--d-accent);
}

.d-stretched:focus-visible {
  outline: none;
}

.d-stretched:focus-visible::after {
  outline: var(--d-focus-width) solid var(--d-accent);
  outline-offset: var(--d-focus-offset);
}

.d-spec-icon,
.d-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--d-icon-box);
  height: var(--d-icon-box);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-steps {
  display: grid;
  gap: var(--vt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .d-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.d-step {
  position: relative;
  counter-increment: step;
  text-align: center;
}

.d-step-icon {
  position: relative;
  width: calc(var(--d-icon-box) * 1.5);
  height: calc(var(--d-icon-box) * 1.5);
  margin-bottom: var(--vt-space-4);
}

.d-step-icon::after {
  content: counter(step);
  position: absolute;
  top: calc(var(--vt-space-1) * -1);
  inset-inline-end: calc(var(--vt-space-1) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--d-avatar-xs);
  height: var(--d-avatar-xs);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
  font-family: var(--d-font-display);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-step p {
  max-width: var(--d-measure-footer);
  margin-inline: auto;
  color: var(--d-muted);
}

.d-steps-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-3);
  margin-top: var(--vt-space-7);
  text-align: center;
}

.d-steps-foot p {
  margin: 0;
}

.d-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--d-avatar);
  height: var(--d-avatar);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-accent);
  font-family: var(--d-font-display);
  font-size: var(--d-avatar-text);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-logo);
}

.d-section-surface .d-avatar,
.d-summary .d-avatar,
.d-agenda .d-avatar {
  background-color: var(--d-bg);
  box-shadow: inset 0 0 0 var(--d-border-width) var(--d-line);
}

.d-avatar-sm {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-small);
}

.d-avatar-xs {
  width: var(--d-avatar-xs);
  height: var(--d-avatar-xs);
  font-size: var(--d-text-tag);
}

.d-team-strip {
  display: grid;
  gap: var(--vt-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .d-team-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .d-team-strip {
    grid-template-columns: repeat(5, 1fr);
  }
}

.d-team-chip {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
}

@media (min-width: 992px) {
  .d-team-chip {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--vt-space-5);
  }
}

.d-team-chip .d-avatar {
  background-color: var(--d-surface);
  box-shadow: none;
}

.d-team-chip-text {
  display: flex;
  flex-direction: column;
  line-height: var(--d-leading-h3);
}

.d-team-chip-name {
  font-family: var(--d-font-display);
  font-size: var(--d-text-body-md);
  font-weight: var(--d-weight-heading);
}

.d-team-chip-role {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vt-space-3);
}

.d-mosaic-item:first-child {
  grid-column: 1 / -1;
}

.d-mosaic-item:first-child .d-photo img {
  aspect-ratio: 3 / 2;
}

@media (min-width: 768px) {
  .d-mosaic {
    gap: var(--vt-space-4);
  }
}

.d-note {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-6);
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

.d-note > .vt-icon {
  color: var(--d-accent);
}

.d-clinic .d-note h3,
.d-clinic .d-note-title {
  margin-bottom: var(--vt-space-1);
  font-size: var(--d-text-body-md);
  font-weight: var(--d-weight-label);
}

.d-note p {
  margin: 0;
  color: var(--d-muted);
}

.d-note-wide {
  margin-top: 0;
}

.d-hours {
  margin: 0;
}

.d-hours div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vt-space-1) var(--vt-space-4);
  padding-block: var(--vt-space-2);
  border-bottom: var(--d-rule);
}

.d-hours dt {
  font-weight: var(--d-weight-label);
}

.d-hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.d-icon-list,
.d-check-list {
  display: grid;
  gap: var(--vt-space-3);
  margin: 0 0 var(--vt-space-4);
  padding: 0;
  list-style: none;
}

.d-icon-list li,
.d-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
}

.d-icon-list .vt-icon,
.d-check-list .vt-icon {
  margin-top: var(--vt-space-1);
  color: var(--d-accent);
}

.d-band {
  padding-block: var(--d-section-y);
  background-color: var(--d-ink);
  color: var(--d-bg);
}

.d-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-5) var(--vt-space-7);
}

.d-band h2 {
  max-width: var(--d-measure-heading);
}

.d-band p {
  margin: 0;
  color: var(--d-surface);
}

/* ---------- Sticky booking bar (phones) ---------- */

.d-sticky-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--vt-z-fab);
  padding: var(--vt-space-3) var(--vt-gutter);
  border-top: var(--d-rule);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
}

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

.d-sticky-bar .d-btn {
  width: 100%;
}

@media (max-width: 991.98px) {
  body.d-clinic:has(.d-sticky-bar:not([hidden])) {
    padding-bottom: var(--d-sticky-bar-h);
  }

  :root:has(.d-sticky-bar:not([hidden])) {
    scroll-padding-bottom: calc(var(--d-sticky-bar-h) + var(--vt-space-4));
  }
}

/* ---------- Specialities ---------- */

.d-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-jump {
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

.d-jump-title {
  margin-bottom: var(--vt-space-3);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-jump-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-jump-link {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  min-height: var(--d-target);
  padding-block: var(--vt-space-2);
  border-bottom: var(--d-rule);
  color: var(--d-ink);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-jump-list li:last-child .d-jump-link {
  border-bottom: 0;
}

.d-jump-link .d-spec-icon {
  width: var(--d-icon-box-sm);
  height: var(--d-icon-box-sm);
  background-color: var(--d-bg);
}

.d-jump-link .d-meta {
  margin-inline-start: auto;
  font-weight: var(--d-weight-text);
}

.d-clinic .d-jump-link:hover {
  color: var(--d-accent);
}

.d-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  padding: var(--vt-space-1) var(--vt-space-4);
  border: var(--d-control-border);
  border-color: var(--d-line);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-chip .vt-icon {
  color: var(--d-accent);
}

.d-clinic .d-chip:hover {
  border-color: var(--d-accent);
  color: var(--d-accent);
}

.d-clinic .d-chip[aria-current="true"] {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-clinic .d-chip[aria-current="true"] .vt-icon {
  color: var(--d-accent-ink);
}

.d-chip-person {
  padding-inline-start: var(--vt-space-1);
}

.d-chip[aria-current="true"] .d-avatar {
  background-color: var(--d-bg);
}

.d-spec-row .row {
  --bs-gutter-x: var(--vt-space-8);
}

.d-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vt-space-3);
  margin: var(--vt-space-5) 0;
}

.d-facts div {
  padding: var(--vt-space-3) var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-surface);
}

.d-section-surface .d-facts div {
  background-color: var(--d-bg);
}

.d-facts dt {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-facts dd {
  margin: 0;
  font-size: var(--d-text-body-md);
}

.d-facts .d-facts-wide {
  grid-column: 1 / -1;
}

.d-facts-compact {
  grid-template-columns: 1fr;
  gap: var(--vt-space-2);
  margin-block: 0 var(--vt-space-5);
}

.d-facts-compact div {
  padding: 0;
  background-color: transparent;
}

.d-section-surface .d-facts-compact div {
  background-color: transparent;
}

.d-facts-compact dd {
  font-size: var(--d-text-small);
}

/* ---------- Team ---------- */

.d-page-head-media .d-figure {
  margin-top: var(--vt-space-2);
}

.d-team-grid {
  display: grid;
  gap: var(--vt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vt-space-5);
  }
}

@media (min-width: 1200px) {
  .d-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.d-team-card {
  display: flex;
  flex-direction: column;
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
}

.d-team-card > p {
  color: var(--d-muted);
}

.d-team-card .d-btn {
  margin-top: auto;
}

.d-team-card-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-4);
  margin-bottom: var(--vt-space-4);
}

.d-team-card-head .d-avatar {
  background-color: var(--d-surface);
  box-shadow: none;
}

.d-clinic .d-team-card h3 {
  margin: 0;
}

.d-team-role {
  margin: 0;
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-team-card-desk {
  background-color: var(--d-surface-deep);
  box-shadow: none;
}

.d-team-card-desk .d-spec-icon {
  margin-bottom: var(--vt-space-4);
  background-color: var(--d-bg);
}

.d-team-card-desk > p {
  color: var(--d-ink);
}

/* ---------- Availability: filters, week grid, the choice ---------- */

.d-avail {
  padding-bottom: var(--d-section-y);
}

.d-filters {
  display: grid;
  gap: var(--vt-space-4);
  margin-bottom: var(--vt-space-6);
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

.d-filter-label {
  margin-bottom: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-week-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-3);
  margin-bottom: var(--vt-space-3);
}

.d-clinic .d-week-title {
  margin: 0;
  font-size: var(--d-text-h3);
  text-align: center;
}

.d-week-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-width: var(--d-target);
  min-height: var(--d-target);
  padding-inline: var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-clinic .d-week-btn:hover {
  background-color: var(--d-surface-deep);
  color: var(--d-ink);
}

.d-week-btn.is-disabled {
  background-color: transparent;
  color: var(--d-line);
}

/* Phones show the arrows only; the label stays for screen readers. */
@media (max-width: 767.98px) {
  .d-week-btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.d-key-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2) var(--vt-space-5);
  margin: 0 0 var(--vt-space-4);
  padding: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
  list-style: none;
}

.d-key-list li {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-key {
  width: var(--d-key-size);
  height: var(--d-key-size);
  border-radius: var(--d-radius-pill);
}

.d-key.is-free {
  border: var(--d-control-border);
  background-color: var(--d-surface);
}

.d-key.is-selected {
  background-color: var(--d-accent);
}

.d-key.is-booked {
  border: var(--d-border-width) dashed var(--d-muted);
  background-color: var(--d-bg);
}

.d-week {
  display: grid;
  gap: var(--vt-space-3);
}

@media (min-width: 768px) {
  .d-week {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--vt-space-2);
  }
}

.d-day {
  padding: var(--vt-space-3);
  border: var(--d-rule);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
}

.d-day.is-today {
  border-color: var(--d-accent);
}

.d-clinic .d-day-head {
  display: flex;
  align-items: baseline;
  gap: var(--vt-space-2);
  margin: 0 0 var(--vt-space-3);
  font-size: var(--d-text-body);
}

.d-day-name {
  font-weight: var(--d-weight-label);
}

.d-day-date {
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-small);
}

.d-day-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-day {
    padding: var(--vt-space-3) var(--vt-space-2);
  }

  .d-clinic .d-day-head {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-bottom: var(--vt-space-2);
    border-bottom: var(--d-rule);
  }

  .d-day-slots {
    flex-direction: column;
  }
}

.d-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-width: var(--d-slot-min);
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-3);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-ink);
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-heading);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

@media (min-width: 768px) {
  .d-slot {
    width: 100%;
    min-width: 0;
    padding-inline: var(--vt-space-1);
  }
}

.d-slot .vt-icon {
  display: none;
}

.d-clinic a.d-slot:hover {
  border-color: var(--d-accent);
  background-color: var(--d-accent-tint);
  color: var(--d-accent);
}

.d-clinic .d-slot.is-selected {
  transition: none;
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-slot.is-selected .vt-icon {
  display: inline-block;
}

.d-slot.is-booked {
  border: var(--d-border-width) dashed var(--d-line);
  background-color: var(--d-bg);
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-day-empty {
  margin: var(--vt-space-2) 0 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
  text-align: center;
}

.d-avail-help {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-2);
  margin-top: var(--vt-space-5);
}

.d-avail-help .vt-icon {
  margin-top: var(--vt-space-1);
  color: var(--d-accent);
}

/* ---------- Summary cards (Availability, Book) ---------- */

.d-summary {
  overflow: hidden;
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

@media (min-width: 992px) {
  .d-choice,
  .d-summary-sticky {
    position: sticky;
    top: calc(var(--vt-demo-ribbon-h) + var(--vt-space-4));
  }
}

.d-choice:focus {
  outline: none;
}

.d-summary-photo .d-photo img {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.d-summary-body {
  padding: var(--vt-space-5);
}

.d-clinic .d-summary-title {
  margin-bottom: var(--vt-space-3);
  font-size: var(--d-text-h3);
}

.d-summary-speciality {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-4);
  color: var(--d-accent);
  font-weight: var(--d-weight-label);
}

.d-summary-list {
  margin: 0 0 var(--vt-space-4);
}

.d-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-4);
  padding-block: var(--vt-space-2);
  border-bottom: var(--d-rule);
}

.d-summary-list dt {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-summary-list dd {
  margin: 0;
  text-align: end;
}

.d-choice-slot {
  margin-bottom: var(--vt-space-4);
}

.d-choice-when,
.d-choice-who {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin: 0 0 var(--vt-space-3);
}

.d-choice-when {
  font-family: var(--d-font-display);
  font-size: var(--d-text-body-md);
  font-weight: var(--d-weight-heading);
}

.d-choice-when .vt-icon {
  color: var(--d-accent);
}

.d-choice-who .d-avatar {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-small);
}

.d-choice-role {
  display: block;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-choice-empty {
  margin: 0;
  padding: var(--vt-space-4);
  border: var(--d-border-width) dashed var(--d-muted);
  border-radius: var(--d-radius-sm);
  color: var(--d-muted);
  text-align: center;
}

.d-policy {
  margin: var(--vt-space-4) 0 0;
  padding-inline-start: var(--vt-space-5);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-policy li + li {
  margin-top: var(--vt-space-2);
}

/* ---------- Forms (booking) ---------- */

.d-book {
  padding-bottom: var(--d-section-y);
}

.d-form {
  display: grid;
  gap: var(--vt-space-5);
}

.d-form > .d-small {
  margin: 0;
}

.d-field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.d-fieldset {
  display: flow-root;
  margin: 0;
  padding: var(--vt-space-5);
  border: 0;
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
  min-width: 0;
}

/* The row's columns carry the gap above them (their gutter margin), so the row itself adds none. */
.d-fieldset .row {
  --bs-gutter-y: var(--vt-space-4);
  margin-top: 0;
}

/* A floated legend sits inside the fieldset's card instead of on its edge. */
.d-fieldset > .d-legend {
  float: left;
  width: 100%;
  margin-bottom: var(--vt-space-4);
}

.d-fieldset > .d-legend + * {
  clear: both;
}

.d-fieldset > * + .d-field {
  margin-top: var(--vt-space-4);
}

.d-legend {
  float: none;
  width: auto;
  margin-bottom: var(--vt-space-1);
  padding: 0;
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-heading);
}

.d-label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: var(--vt-space-2);
  padding: 0;
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-optional {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-input {
  display: block;
  width: 100%;
  min-height: var(--d-target);
  padding: var(--vt-space-2) var(--vt-space-4);
  border: var(--d-control-border);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font: inherit;
  transition: border-color var(--d-duration) var(--d-ease), box-shadow var(--d-duration) var(--d-ease);
}

.d-input:hover {
  border-color: var(--d-ink);
}

.d-input:focus-visible {
  border-color: var(--d-accent);
  outline: none;
  box-shadow: 0 0 0 var(--d-focus-width) var(--d-bg), 0 0 0 calc(var(--d-focus-width) * 2) var(--d-accent);
}

.d-select {
  appearance: auto;
}

.d-hint {
  margin: var(--vt-space-2) 0 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-error {
  margin: var(--vt-space-2) 0 0;
  color: var(--d-accent-2);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-error[hidden] {
  display: none;
}

.d-field.is-invalid .d-input {
  border-color: var(--d-accent-2);
  box-shadow: inset 0 0 0 var(--d-border-width) var(--d-accent-2);
}

.d-field.is-invalid .d-label,
.d-field.is-invalid .d-check-label {
  color: var(--d-accent-2);
}

.d-field.is-invalid .d-option,
.d-field.is-invalid .d-check-input {
  border-color: var(--d-accent-2);
}

.d-error-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-clay-tint);
  color: var(--d-accent-2);
  font-weight: var(--d-weight-label);
}

.d-error-summary[hidden] {
  display: none;
}

.d-error-summary p {
  margin: 0;
}

.d-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.d-options {
  display: grid;
  gap: var(--vt-space-2);
}

.d-options-row {
  grid-template-columns: repeat(auto-fit, minmax(var(--d-option-min), 1fr));
}

.d-option {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  min-height: var(--d-target);
  padding: var(--vt-space-2) var(--vt-space-4);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
  cursor: pointer;
  transition: border-color var(--d-duration) var(--d-ease), background-color var(--d-duration) var(--d-ease);
}

.d-option:hover {
  border-color: var(--d-accent);
}

.d-option .vt-icon {
  color: var(--d-accent);
}

.d-option-mark {
  position: relative;
  flex-shrink: 0;
  width: var(--d-key-size);
  height: var(--d-key-size);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
}

.d-choice-input:checked + .d-option {
  border-color: var(--d-accent);
  background-color: var(--d-accent-tint);
  color: var(--d-ink);
  font-weight: var(--d-weight-label);
}

.d-choice-input:checked + .d-option .d-option-mark {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  box-shadow: inset 0 0 0 var(--d-control-width) var(--d-bg);
}

.d-choice-input:focus-visible + .d-option {
  box-shadow: 0 0 0 var(--d-focus-width) var(--d-bg), 0 0 0 calc(var(--d-focus-width) * 2) var(--d-accent);
}

.d-check {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
}

.d-check-input {
  flex-shrink: 0;
  width: calc(var(--d-key-size) * 1.5);
  height: calc(var(--d-key-size) * 1.5);
  margin-top: var(--vt-space-1);
  accent-color: var(--d-accent);
  cursor: pointer;
}

.d-check-label {
  font-size: var(--d-text-small);
  cursor: pointer;
}

/* ---------- Confirmation ---------- */

.d-confirm {
  padding-block: var(--vt-space-7) var(--d-section-y);
}

.d-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d-icon-box);
  height: var(--d-icon-box);
  margin-bottom: var(--vt-space-4);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-5);
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

.d-notice > .vt-icon {
  color: var(--d-accent);
}

.d-notice p {
  margin: 0;
  color: var(--d-muted);
}

.d-clinic .d-notice-title {
  margin-bottom: var(--vt-space-1);
  color: var(--d-ink);
  font-family: var(--d-font-display);
  font-size: var(--d-text-body-md);
  font-weight: var(--d-weight-label);
}

.d-ticket {
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
  border-top: calc(var(--d-focus-width) * 3) solid var(--d-accent);
}

.d-ticket-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin-bottom: var(--vt-space-3);
}

.d-clinic .d-ticket-title {
  margin: 0;
  font-size: var(--d-text-h3);
}

.d-ticket-place {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-2);
  margin: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-ticket-place .vt-icon {
  margin-top: var(--vt-space-1);
}

.d-address {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  font-weight: var(--d-weight-label);
}

.d-address .vt-icon {
  color: var(--d-accent);
}

/* ---------- Patient area ---------- */

.d-card {
  padding: var(--vt-space-5);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
  box-shadow: var(--d-shadow);
}

.d-card + .d-card,
.d-dialog + .d-card {
  margin-top: var(--vt-space-5);
}

.d-card > .d-small {
  margin: var(--vt-space-4) 0 0;
}

.d-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-4);
}

.d-clinic .d-card-title {
  margin-bottom: var(--vt-space-4);
  font-size: var(--d-text-h3);
}

.d-card-head .d-card-title {
  margin: 0;
}

.d-next-body {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
}

.d-next-body[hidden],
.d-next-actions[hidden],
.d-reschedule[hidden],
.d-cancelled[hidden] {
  display: none;
}

.d-next-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--d-date-box);
  height: var(--d-date-box);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
  line-height: var(--d-leading-tight);
}

.d-next-day {
  font-family: var(--d-font-display);
  font-size: var(--d-text-date);
  font-weight: var(--d-weight-label);
}

.d-next-month {
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-next-info {
  min-width: 0;
}

.d-next-info p {
  margin-bottom: var(--vt-space-2);
}

.d-next-title {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-heading);
}

.d-next-title .vt-icon {
  color: var(--d-accent);
}

.d-next-when {
  font-weight: var(--d-weight-label);
}

.d-reschedule {
  margin-top: var(--vt-space-5);
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-surface);
}

.d-reschedule fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.d-reschedule legend {
  float: none;
}

.d-cancelled {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-clay-tint);
}

.d-cancelled > .vt-icon {
  color: var(--d-accent-2);
}

.d-cancelled p {
  margin-bottom: var(--vt-space-3);
  color: var(--d-muted);
}

.d-dialog {
  width: min(var(--d-dialog-w), calc(100vw - var(--vt-space-6)));
  padding: var(--vt-space-6);
  border: 0;
  border-radius: var(--d-radius-lg);
  background-color: var(--d-bg);
  color: var(--d-ink);
  box-shadow: var(--d-shadow);
}

.d-dialog::backdrop {
  background-color: var(--d-backdrop);
}

.d-dialog p {
  color: var(--d-muted);
}

.d-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-row {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  padding-block: var(--vt-space-3);
  border-bottom: var(--d-rule);
}

.d-row:last-child {
  border-bottom: 0;
}

.d-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--d-icon-box-sm);
  height: var(--d-icon-box-sm);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-row-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: var(--d-leading-h3);
}

.d-row-title {
  font-weight: var(--d-weight-label);
}

.d-row-meta,
.d-row-date {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-row-date {
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .d-row {
    flex-wrap: wrap;
  }

  .d-row-date {
    width: 100%;
    padding-inline-start: calc(var(--d-icon-box-sm) + var(--vt-space-3));
  }
}

.d-plan {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-plan-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  padding-block: var(--vt-space-2);
}

.d-plan-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% + var(--vt-space-3));
  bottom: calc(-50% + var(--vt-space-3));
  inset-inline-start: calc(var(--vt-space-3) - var(--d-plan-line) / 2);
  width: var(--d-plan-line);
  background-color: var(--d-line);
}

.d-plan-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--vt-space-5);
  height: var(--vt-space-5);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
}

.d-plan-step.is-done .d-plan-dot {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-plan-step.is-next .d-plan-dot {
  border-color: var(--d-accent);
  box-shadow: inset 0 0 0 var(--vt-space-1) var(--d-accent-tint);
}

.d-plan-title {
  flex: 1;
}

.d-plan-step.is-next .d-plan-title {
  font-weight: var(--d-weight-label);
}

.d-plan-state {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-plan-step.is-next .d-plan-state {
  color: var(--d-accent);
  font-weight: var(--d-weight-label);
}

/* ---------- Owner view (Admin) ---------- */

.d-admin {
  padding-block: var(--vt-space-6) var(--d-section-y);
  background-color: var(--d-surface);
}

.d-admin-shell {
  display: grid;
  gap: var(--vt-space-5);
}

.d-admin-side {
  min-width: 0;
}

.d-admin-brand {
  display: none;
  align-items: center;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-5);
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-label);
}

.d-admin-nav {
  display: flex;
  gap: var(--vt-space-1);
  margin: 0;
  padding: var(--vt-space-1);
  overflow-x: auto;
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
  list-style: none;
}

.d-admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-4);
  border-radius: var(--d-radius-pill);
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .d-admin-nav-item .vt-icon {
    display: none;
  }
}

.d-clinic .d-admin-nav-item:hover {
  background-color: var(--d-surface);
  color: var(--d-ink);
}

.d-clinic .d-admin-nav-item[aria-current] {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

@media (min-width: 992px) {
  .d-admin-shell {
    grid-template-columns: var(--d-sidebar-w) minmax(0, 1fr);
    gap: var(--vt-space-6);
  }

  .d-admin-side {
    align-self: start;
    position: sticky;
    top: calc(var(--vt-demo-ribbon-h) + var(--vt-space-4));
    padding: var(--vt-space-4);
    border-radius: var(--d-radius-lg);
    background-color: var(--d-bg);
  }

  .d-admin-brand {
    display: flex;
  }

  .d-admin-nav {
    flex-direction: column;
    padding: 0;
    border-radius: 0;
  }

  .d-admin-nav-item {
    width: 100%;
  }
}

.d-admin-main {
  min-width: 0;
}

.d-clinic .d-admin-head h1 {
  max-width: none;
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h2);
}

.d-admin-date {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: 0;
  color: var(--d-muted);
}

.d-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vt-space-3);
  margin: var(--vt-space-5) 0 var(--vt-space-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .d-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.d-tile {
  display: flex;
  flex-direction: column;
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
}

.d-tile-value {
  font-family: var(--d-font-display);
  font-size: var(--d-text-tile);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  font-variant-numeric: tabular-nums;
}

.d-tile-label {
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-h3);
}

.d-tile-note {
  margin-top: var(--vt-space-2);
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-tile-accent {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-tile-accent .d-tile-label {
  color: var(--d-accent-ink);
}

.d-admin-view + .d-admin-view {
  margin-top: var(--vt-space-8);
}

.d-admin-view[hidden] {
  display: none;
}

.d-admin-view > h2:focus {
  outline: none;
}

.d-clinic .d-admin-h2 {
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-label);
}

.d-clinic .d-admin-h3 {
  margin-bottom: var(--vt-space-3);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-label);
}

/* Diary: one column per practitioner */

.d-agenda {
  display: grid;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-4);
}

@media (min-width: 768px) {
  .d-agenda {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .d-agenda {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vt-space-3);
  }
}

.d-agenda-col {
  min-width: 0;
  padding: var(--vt-space-3);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
}

.d-clinic .d-agenda-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: 0 0 var(--vt-space-3);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
}

.d-agenda-head .d-avatar {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-small);
}

.d-agenda-room {
  display: block;
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-text);
}

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

.d-appt {
  padding: var(--vt-space-3);
  border-radius: var(--d-radius-sm);
  border-inline-start: calc(var(--d-focus-width) * 2) solid var(--d-line);
  background-color: var(--d-surface);
}

.d-appt.is-arrived {
  border-inline-start-color: var(--d-accent);
  background-color: var(--d-accent-tint);
}

.d-appt.is-noshow {
  border-inline-start-color: var(--d-accent-2);
  background-color: var(--d-clay-tint);
}

.d-appt.is-done {
  background-color: var(--d-bg);
  box-shadow: inset 0 0 0 var(--d-border-width) var(--d-line);
}

.d-appt.is-free {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  border: var(--d-border-width) dashed var(--d-muted);
  background-color: var(--d-bg);
}

.d-appt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
}

.d-appt-time {
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-label);
  font-variant-numeric: tabular-nums;
}

.d-appt-free {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-appt-patient {
  margin: var(--vt-space-1) 0 0;
  font-weight: var(--d-weight-label);
}

.d-appt-meta {
  margin: 0 0 var(--vt-space-1);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-appt .d-tag-clay {
  margin-bottom: var(--vt-space-1);
  padding-block: 0;
}

.d-toggles[hidden] {
  display: none;
}

.d-toggles {
  display: flex;
  gap: var(--vt-space-1);
  margin-top: var(--vt-space-2);
}

.d-toggle {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-2);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  cursor: pointer;
  transition: border-color var(--d-duration) var(--d-ease);
}

.d-toggle:hover {
  border-color: var(--d-accent);
}

.d-toggle[aria-pressed="true"] {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-toggle-clay {
  color: var(--d-accent-2);
}

.d-toggle-clay:hover {
  border-color: var(--d-accent-2);
}

.d-toggle-clay[aria-pressed="true"] {
  border-color: var(--d-accent-2);
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

/* Calls table: cards below md */

.d-table {
  width: 100%;
  margin-top: var(--vt-space-4);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
  font-size: var(--d-text-small);
}

.d-table th,
.d-table td {
  padding: var(--vt-space-3) var(--vt-space-4);
  border-bottom: var(--d-rule);
  text-align: start;
  vertical-align: top;
}

.d-table thead th {
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-table tbody tr:last-child th,
.d-table tbody tr:last-child td {
  border-bottom: 0;
}

.d-table tbody th {
  font-weight: var(--d-weight-label);
  white-space: nowrap;
}

.d-table tbody th .vt-icon {
  margin-inline-end: var(--vt-space-2);
  color: var(--d-accent);
  vertical-align: middle;
}

.d-call-length {
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-weight: var(--d-weight-text);
}

.d-outcome {
  display: inline-flex;
  padding: var(--vt-space-1) var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-accent);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  white-space: nowrap;
}

.d-outcome-booked,
.d-outcome-rescheduled {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-outcome-transferred {
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

@media (max-width: 767.98px) {
  .d-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .d-table,
  .d-table tbody,
  .d-table tr,
  .d-table th,
  .d-table td {
    display: block;
  }

  .d-table {
    background-color: transparent;
  }

  .d-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--vt-space-1) var(--vt-space-3);
    margin-bottom: var(--vt-space-3);
    padding: var(--vt-space-4);
    border-radius: var(--d-radius-sm);
    background-color: var(--d-bg);
  }

  .d-table th,
  .d-table td {
    padding: 0;
    border: 0;
  }

  .d-table tbody th {
    grid-row: 1;
    grid-column: 1;
  }

  .d-table tbody td:first-child {
    grid-row: 1;
    grid-column: 2;
  }

  .d-table .d-call-summary,
  .d-table td:last-child {
    grid-column: 1 / -1;
  }
}

/* Specialities switches, rooms, settings */

.d-switch-list,
.d-settings {
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.d-switch-row,
.d-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-3) var(--vt-space-4);
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
}

.d-switch-row + .d-switch-row,
.d-setting + .d-setting {
  margin-top: var(--vt-space-2);
}

.d-switch-row .d-spec-icon {
  width: var(--d-icon-box-sm);
  height: var(--d-icon-box-sm);
}

.d-switch-row-text,
.d-setting-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--d-setting-text-min);
  min-width: 0;
  line-height: var(--d-leading-h3);
}

.d-switch-row-name,
.d-setting-label {
  font-weight: var(--d-weight-label);
}

.d-switch-row-meta,
.d-setting-hint {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-switch-state {
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-switch-row.is-off .d-switch-state {
  color: var(--d-accent-2);
}

.d-switch-row.is-off .d-spec-icon {
  background-color: var(--d-clay-tint);
  color: var(--d-accent-2);
}

.d-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  cursor: pointer;
}

/* The real checkbox sits over the drawn track, so a click on the track toggles it. */
.d-switch input {
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: var(--d-switch-w);
  height: var(--d-switch-h);
  margin: 0;
  cursor: pointer;
}

.d-switch-track {
  position: relative;
  width: var(--d-switch-w);
  height: var(--d-switch-h);
  border: var(--d-control-border);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-bg);
  transition: background-color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease);
}

.d-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: var(--vt-space-1);
  width: calc(var(--d-switch-h) - var(--vt-space-3));
  height: calc(var(--d-switch-h) - var(--vt-space-3));
  border-radius: var(--d-radius-pill);
  background-color: var(--d-muted);
  transform: translateY(-50%);
  transition: transform var(--d-duration) var(--d-ease), background-color var(--d-duration) var(--d-ease);
}

.d-switch input:checked + .d-switch-track {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
}

.d-switch input:checked + .d-switch-track::after {
  background-color: var(--d-accent-ink);
  transform: translate(calc(var(--d-switch-w) - var(--d-switch-h)), -50%);
}

.d-switch input:focus-visible + .d-switch-track {
  box-shadow: 0 0 0 var(--d-focus-width) var(--d-bg), 0 0 0 calc(var(--d-focus-width) * 2) var(--d-accent);
}

.d-setting-select {
  width: auto;
  min-width: var(--d-select-min);
}

.d-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-5);
}

.d-settings-saved {
  margin: 0;
}

.d-settings-saved span:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  color: var(--d-accent);
  font-weight: var(--d-weight-label);
}

.d-rooms {
  display: grid;
  gap: var(--vt-space-3);
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .d-rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.d-room {
  padding: var(--vt-space-4);
  border-radius: var(--d-radius-sm);
  border-top: calc(var(--d-focus-width) * 2) solid var(--d-line);
  background-color: var(--d-bg);
  transition: border-color var(--d-duration) var(--d-ease);
}

.d-room.is-busy {
  border-top-color: var(--d-accent);
}

.d-room.is-free {
  border-top-color: var(--d-surface-deep);
}

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

.d-clinic .d-room-name {
  margin: 0;
  font-size: var(--d-text-body-md);
  font-weight: var(--d-weight-label);
}

.d-room-state {
  padding: var(--vt-space-1) var(--vt-space-3);
  border-radius: var(--d-radius-pill);
  background-color: var(--d-surface);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  white-space: nowrap;
}

.d-room.is-busy .d-room-state {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-room.is-free .d-room-state {
  color: var(--d-accent);
}

.d-room-equipment {
  margin: var(--vt-space-1) 0 var(--vt-space-3);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-room .d-choice-who {
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-room-list {
  margin: 0;
  font-size: var(--d-text-small);
}

.d-room-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-3);
  padding-block: var(--vt-space-1);
  border-top: var(--d-rule);
}

.d-room-list dt {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-room-list dd {
  margin: 0;
  font-weight: var(--d-weight-label);
  text-align: end;
}

/* ---------- Footer ---------- */

.d-footer {
  padding-block: var(--vt-space-8) var(--vt-space-5);
  background-color: var(--d-ink);
  color: var(--d-bg);
  font-size: var(--d-text-small);
}

/* After the deep-pine booking band, a hairline keeps the footer a separate block. */
body:has(.d-band) .d-footer {
  border-top: var(--d-border-width) solid var(--d-muted);
}

.d-logo-inverse,
.d-logo-inverse .d-logo-tag {
  color: var(--d-bg);
}

.d-footer-about {
  max-width: var(--d-measure-footer);
  margin-top: var(--vt-space-4);
  color: var(--d-surface);
  font-size: var(--d-text-body);
}

.d-footer-social {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
}

.d-clinic .d-footer-heading {
  margin-bottom: var(--vt-space-3);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-footer-hours {
  margin: 0;
}

.d-footer-hours div {
  margin-bottom: var(--vt-space-2);
}

.d-footer-hours dt {
  font-weight: var(--d-weight-label);
}

.d-footer-hours dd {
  margin: 0;
  color: var(--d-surface);
  font-variant-numeric: tabular-nums;
}

.d-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-clinic .d-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--d-target-min);
  color: var(--d-bg);
}

.d-clinic .d-footer a:hover {
  color: var(--d-surface);
}

.d-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vt-space-2) var(--vt-space-5);
  margin-top: var(--vt-space-7);
  padding-top: var(--vt-space-4);
  border-top: var(--d-border-width) solid var(--d-muted);
  color: var(--d-surface);
}

.d-footer-base p {
  margin: 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .d-clinic *,
  .d-clinic *::before,
  .d-clinic *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .d-clinic .d-btn:hover,
  .d-clinic .d-spec-card:hover {
    transform: none;
  }
}