/* Readability layer for the anatomy map. Loaded after style.css. */
.atlas-hero-grid {
  grid-template-columns: minmax(220px, 250px) minmax(400px, 1fr) minmax(320px, 350px);
  gap: clamp(24px, 2.5vw, 42px);
}

.atlas-intro { padding-top: 18px; }
.atlas-intro h1 { margin: 14px 0 10px; font-size: clamp(2.1rem, 2.6vw, 2.8rem); }
.atlas-intro > p { margin: 10px 0 14px; font-size: 1rem; line-height: 1.55; }
.atlas-intro > p .thai { font-size: 1rem; }
.atlas-intro > p:not(.atlas-step-label) { display: none; }
.atlas-intro label { margin-top: 18px; }
.atlas-intro label,
.atlas-intro label .thai,
.atlas-intro select,
.atlas-text-link { font-size: 1rem; }

.atlas-step-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 14px;
  padding: 5px 10px;
  border: 1px solid #52748b;
  border-radius: 999px;
  color: #9fe6ed;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.atlas-step-label .thai { display: inline; margin: 0 0 0 7px; color: inherit; font-size: .875rem; }
.atlas-detail .atlas-step-label { margin-bottom: 10px; border-color: #9ab7c9; color: #315b76; }
.atlas-detail .atlas-selection-head .eyebrow { margin-top: 2px; }

.anatomy-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin: 18px 0 6px;
}

.anatomy-stage-head .atlas-step-label { margin: 0; }
.anatomy-stage-head > p:last-child { margin: 0; color: #c1d5e3; font-size: .875rem; line-height: 1.45; text-align: right; }
.anatomy-stage-head > p:last-child .thai { font-size: .875rem; }

.anatomy-figure {
  border-radius: 28px;
  background: radial-gradient(circle at 50% 42%, #15394d 0, #0a2235 55%, transparent 76%);
}

.anatomy-hotspot {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid #b5e6eb55;
  background: #061926aa;
  box-shadow: 0 7px 20px #0005;
}

.anatomy-hotspot:hover,
.anatomy-hotspot:focus-visible {
  border-color: #c8f6fa;
  outline: 3px solid #f0c96b;
  outline-offset: 3px;
}

.anatomy-hotspot.active { border-color: #efc66d; }
.hotspot-name { font-size: 1rem; box-shadow: 0 12px 30px #0008; }
.hotspot-name .thai { font-size: 1rem; }

.entity-type {
  display: block;
  margin-bottom: 4px;
  color: #668198;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.entity-type .thai { display: inline; margin-left: 5px; color: inherit; font-size: .875rem; }
.entity-name { display: block; }

.atlas-heading .eyebrow,
.atlas-heading .eyebrow .thai,
.atlas-heading .badge,
.atlas-heading .badge .thai,
.atlas-breadcrumb,
.atlas-breadcrumb button,
.atlas-breadcrumb .thai { font-size: .875rem; }

.atlas-detail .eyebrow,
.atlas-detail .eyebrow .thai { font-size: .875rem; }
.atlas-detail h3,
.atlas-detail h3 .thai,
.atlas-condition-list h3,
.atlas-condition-list h3 .thai { font-size: 1rem; }
.atlas-return,
.atlas-return .thai,
.atlas-primary,
.atlas-primary .thai { font-size: 1rem; }

.structure-picker button { min-height: 66px; text-align: left; }
.structure-picker button .entity-type { color: #8eabba; }
.structure-picker button.selected .entity-type { color: #e7c46f; }

.atlas-detail {
  border-color: #bed1dd;
  box-shadow: 0 22px 64px #0003;
}

.atlas-condition {
  align-items: center;
  margin-top: 8px;
  padding: 13px 12px;
  border: 1px solid #cad9e2;
  border-radius: 12px;
  background: #f8fbfd;
  font-size: 1rem;
}

.atlas-condition:hover,
.atlas-condition:focus-visible { border-color: #6c94aa; background: #fff; }
.atlas-condition-list .entity-name,
.atlas-condition-list .entity-name .thai { font-size: 1rem; line-height: 1.4; }
.family-picker button,
.structure-picker button { min-height: 66px; font-size: 1rem; text-align: left; }
.family-picker .entity-name,
.family-picker .entity-name .thai,
.structure-picker .entity-name,
.structure-picker .entity-name .thai { font-size: 1rem; }
.family-picker button > span:first-child { display: block; padding-right: 18px; }
.family-picker button > span:last-child { top: 22px; }

.atlas-selection-more > summary,
.anatomy-key > summary {
  font-size: .875rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

.anatomy-image-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 0;
  color: #b9cedd;
  font-size: .875rem;
  line-height: 1.45;
}
.atlas-view-controls:empty { display: none; }

.anatomy-image-note p,
.anatomy-image-note span { margin: 0; font-size: .875rem; }
.anatomy-image-note .thai { font-size: .875rem; }
.anatomy-image-note > span { color: #8ea9ba; text-align: right; }

.atlas-selection-more > summary .thai,
.anatomy-key > summary .thai,
.anatomy-figure figcaption,
.anatomy-figure figcaption .thai,
.atlas-view-controls,
.atlas-view-controls .thai,
.atlas-view-controls button,
.atlas-view-controls button .thai { font-size: .875rem; }

.atlas-detail-lead,
.atlas-detail-lead .thai,
.structure-explanation p,
.structure-explanation p .thai,
.atlas-selection-summary p,
.atlas-selection-summary p .thai { font-size: 1rem; line-height: 1.55; }

.atlas-related a,
.atlas-related a .thai,
.atlas-source,
.atlas-source p,
.atlas-source .thai,
.atlas-crosslinks,
.atlas-crosslinks p,
.atlas-crosslinks .thai,
.anatomy-key,
.anatomy-key p,
.anatomy-key .thai { font-size: .875rem; line-height: 1.5; }

@media (max-width: 1150px) and (min-width: 761px) {
  .atlas-hero-grid { grid-template-columns: 230px minmax(360px, 1fr); }
  .atlas-detail { max-width: 880px; justify-self: center; }
}

@media (max-width: 760px) {
  .atlas-hero-grid { gap: 0; }
  .atlas-intro { order: 0; }
  .anatomy-stage { order: 1; }
  .atlas-detail { order: 2; }
  .atlas-step-label { margin-bottom: 9px; }
  .anatomy-stage-head { margin: 14px 0 4px; }
  .anatomy-stage-head > p:last-child,
  .anatomy-stage-head > p:last-child .thai { max-width: 190px; font-size: .875rem; }
  .anatomy-image-note { align-items: flex-start; flex-direction: column; gap: 5px; }
  .anatomy-image-note > span { text-align: left; }
  .anatomy-hotspot { width: 48px; height: 48px; min-width: 48px; }
  .atlas-detail { margin-top: 18px; }
  .atlas-condition { padding: 12px 10px; }
  .structure-picker button { min-height: 72px; text-align: left; }
}