/* First-paint geometry only. Visual styling remains in the page CSS and approved overrides. */
@media (min-width: 768px) {
  html {
    scrollbar-gutter: stable;
  }
}

img {
  max-width: 100%;
}

img[src*="-logo-"] {
  aspect-ratio: 256 / 141;
  object-fit: contain;
}

:is(body[data-prototype-page="login"], body[data-prototype-page="create-account"], body[data-prototype-page="forgot-password"], body[data-prototype-page="reset-password"], body[data-prototype-page="reset-success"]) > :is(header, nav) img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 150px;
  max-height: 32px;
  object-fit: contain;
}

body[data-module-page] > header img {
  display: block;
  width: auto;
  height: 48px;
  max-width: 96px;
  max-height: 48px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  body[data-module-page] > header img {
    height: 38px;
    max-height: 38px;
  }
}

@media (max-width: 640px) {
  :is(body[data-prototype-page="login"], body[data-prototype-page="create-account"], body[data-prototype-page="forgot-password"], body[data-prototype-page="reset-password"], body[data-prototype-page="reset-success"]) > :is(header, nav) img,
  body[data-module-page] > header img {
    height: 30px;
    max-height: 30px;
  }
}

img[src$="tayflink-logo-header.png"] {
  aspect-ratio: 256 / 141;
}

img[src$="doctor-abdelrahman.png"] {
  aspect-ratio: 1084 / 1451;
}

img[src*="child-avatar-"] {
  aspect-ratio: 1;
}

.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  min-width: 1em;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}