/* PLG Anatomy: site layer for the 3D app (app.html). Loaded after the lab styles. */

/* Brand link, top left: the way back to the home page. */
.brand .eyebrow { margin-bottom: 6px; }
.site-home-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  color: var(--teal); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  text-transform: none;
}
.site-home-link::before {
  content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-right: 1px;
}
.site-home-link:hover { color: #a6ece6; }
.site-home-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* The old "Home / Species" button is replaced by the brand link while studying the human body. */
body[data-platform-section="human"] .platform-home-link { display: none !important; }

/* Give the title block room above the study-area picker on desktop:
   the picker already says what is open, so the long subtitle is dropped. */
@media (min-width: 901px) {
  body[data-platform-section="human"] .brand h1 { font-size: clamp(26px, 2.5vw, 36px); }
  body[data-platform-section="human"] .brand .subtitle { display: none; }
}

/* The guided-lesson button stays out of the way of full-screen studies. */
body[data-heart-lab="open"] #studentLessonLauncher { display: none !important; }

/* Link from the in-app Heart Lab to the beating heart lab. */
.site-heart-flow-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin-top: 10px;
  border: 1px solid rgba(99, 208, 200, .5); border-radius: 6px; color: var(--teal); text-decoration: none;
  font-size: 13px; font-weight: 700;
}
.site-heart-flow-link:hover { background: rgba(99, 208, 200, .1); }
.site-heart-flow-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Loading screen note. */
#loader .loader-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  #loader, #loader * { animation: none !important; transition: none !important; }
}