/* Clinical applications — page-specific layout. Reuses tokens/components from site.css.
   Sections: 1 Hero · 2 Atlas (signature) · 3 Area navigator (sticky) · 4 Area sections
             5 Plate drawing primitives · 6 What is still open · 7 CTA/refs · 8 Motion */

/* 1 — Hero ----------------------------------------------------------------- */
.ap-hero { position: relative; padding-top: clamp(1.5rem, .75rem + 3vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); overflow: clip; }
.ap-hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 64em) {
  .ap-hero__grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: var(--grid-gap); min-height: min(calc(100svh - var(--header-h) - 2rem), 900px); }
}
.ap-hero__count { color: var(--ink-3); letter-spacing: .12em; }
.ap-hero__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display);
  font-size: clamp(2.85rem, 1.2rem + 6.4vw, 6rem); line-height: .96; font-weight: 330; letter-spacing: -0.038em;
  margin-top: var(--space-m);
}
@media (min-width: 64em) { .ap-hero__title { font-size: clamp(4.25rem, 1.4rem + 4.3vw, 6.4rem); } }
.ap-hero__title em { font-style: italic; font-variation-settings: var(--fr-italic); font-weight: 300; color: var(--blood-700); letter-spacing: -0.03em; padding-right: .05em; }
.ap-hero__lead { margin-top: var(--space-l); max-width: 36ch; }
.ap-hero__actions { margin-top: var(--space-xl); }
@media (min-width: 64em) {
  .ap-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
  .ap-hero__lead { margin-top: var(--space-m); }
  .ap-hero__actions { order: 1; margin-top: var(--space-l); }
  .ap-hero__copy .key { order: 2; margin-top: var(--space-xl); width: 100%; }
  .ap-hero__copy .key__foot { order: 3; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .ap-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--grid-gap); align-items: start; }
  .ap-hero__copy > .eyebrow, .ap-hero__title { grid-column: 1 / -1; }
  .ap-hero__lead { grid-column: 1; }
  .ap-hero__copy .key { grid-column: 2; grid-row: 3 / span 3; margin-top: var(--space-l); }
  .ap-hero__copy .key__row { grid-template-columns: 1fr; }
  .ap-hero__copy .key__foot { grid-column: 1; }
  .ap-hero__actions { grid-column: 1; margin-top: var(--space-l); }
  .area__lede { max-width: 46ch; }
}

/* Approval key: the two-tier distinction that runs through the page */
.key { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 0; border-top: 1px solid var(--line-strong); max-width: 34rem; }
.key__row { display: grid; gap: .3rem; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 30em) { .key__row { grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 1.25rem; } }
.key dt { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1.45; padding-top: .15rem; }
.key dd { font-size: var(--step--1); color: var(--text-2); line-height: 1.55; }
.key dd strong { color: var(--ink); font-weight: 600; }
.key__sw { flex: none; width: 14px; height: 14px; margin-top: .05rem; border-radius: 50%; }
.key__row--approved .key__sw { background: var(--moss-700); box-shadow: 0 0 0 3px var(--moss-100); }
.key__row--lit .key__sw { border: 1.5px dashed var(--ink-2); }
.key__foot { margin-top: .9rem; }

/* 2 — Atlas (signature) ------------------------------------------------------ */
.atlas { margin: 0; container: atlas / inline-size; }
.atlas__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.atlas__art { position: relative; aspect-ratio: 340 / 560; overflow: hidden; max-width: 420px; width: 100%; margin-inline: auto; }
.atlas__svg { position: absolute; width: calc(640 / 340 * 100%); max-width: none; left: calc(-150 / 340 * 100%); top: calc(-24 / 560 * 100%); height: auto; overflow: hidden; }
.atlas__furniture, .atlas__leaders { display: none; }
.atlas__mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; fill: var(--ink-3); }
.atlas__scale { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas__ticks { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }

.atlas__wash, .js .atlas__art[data-reveal-draw] .atlas__wash, .js .atlas__art[data-reveal-draw].is-in .atlas__wash { opacity: .13; transition: none; }
.atlas__body use, .atlas__navel { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas__navel { stroke-width: .9; }
.atlas__body .atlas__fine, .atlas__face, .atlas__fine-solo { fill: none; stroke: var(--ink-2); stroke-width: .75; stroke-opacity: .7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.atlas__fine-solo { stroke-dasharray: 2 5; stroke-opacity: .4; }
.atlas__face { stroke: var(--ink); stroke-opacity: .8; stroke-width: .85; }
.atl-org__wash--liver { fill: #9C5A3C; opacity: .26; }
.atl-org--lung .atl-org__wash { fill: var(--blood-300); opacity: .3; }
.atl-org--gut .atl-org__wash { fill: var(--moss-500); opacity: .34; }
.atl-org--surg .atl-org__wash { fill: #8A3A50; opacity: .22; }
.atl-org--anat .atl-org__line { stroke-opacity: .45; }
.atl-org__line { fill: none; stroke: var(--ink-2); stroke-opacity: .7; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--dur-3), stroke var(--dur-3); }
.atl-org__fine { stroke-opacity: .4; stroke-width: .7; }
.atl-org__wash { fill: var(--moss-300); opacity: .22; mix-blend-mode: multiply; transition: fill var(--dur-3), opacity var(--dur-3) var(--ease-out); filter: url(#bot-tex); }
.atl-org[data-org="dental"] .atl-org__wash, .atl-org[data-org="wound-care"] .atl-org__wash { fill: var(--blood-500); opacity: .3; }
.atl-org[data-org="ent"] .atl-org__wash { opacity: .14; }

.atlas__leaders path { fill: none; stroke: var(--ink-2); stroke-width: .9; stroke-opacity: .55; vector-effect: non-scaling-stroke; transition: stroke var(--dur-2), stroke-opacity var(--dur-2); }
.atlas__leaders .atlas__sat-links { stroke-dasharray: 2 4; stroke-opacity: .35; }

.atl-mk { cursor: pointer; }
.atl-mk__halo { fill: var(--blood-500); opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.atl-mk__dot { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 3 2.4; vector-effect: non-scaling-stroke; transition: fill var(--dur-2), stroke var(--dur-2); }
.atl-mk--approved .atl-mk__dot { fill: var(--moss-700); stroke: var(--paper); stroke-width: 2; stroke-dasharray: none; }
.atl-mk--sat .atl-mk__dot { fill: var(--paper); stroke-dasharray: none; stroke-width: 1.1; }
.atl-mk__n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.atl-mk--approved .atl-mk__n { fill: var(--paper); }
/* compact layout: markers carry the number */
.atl-mk:not(.atl-mk--sat) .atl-mk__dot { r: 12.5px; }
.atl-mk__n { font-size: 13px; }
.atlas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
@media (max-width: 22em) { .atlas__list { grid-template-columns: 1fr; } }

/* active area (hover / focus / scroll) */
.atlas[data-active] .atl-mk:not(.is-on) .atl-mk__dot { opacity: .55; }
.atl-mk.is-on .atl-mk__halo { opacity: .18; transform: scale(1); }
.atl-mk.is-on .atl-mk__dot { stroke: var(--blood-700); stroke-dasharray: none; }
.atl-mk.is-on:not(.atl-mk--approved):not(.atl-mk--sat) .atl-mk__dot { fill: var(--raised); }
.atl-mk--approved.is-on .atl-mk__dot { fill: var(--blood-700); stroke: var(--paper); }
.atl-mk--sat.is-on .atl-mk__dot { fill: var(--blood-700); stroke: var(--blood-700); }
.atl-org.is-on .atl-org__wash { fill: var(--blood-500); opacity: .34; }
.atl-org.is-on .atl-org__line { stroke: var(--blood-800); stroke-opacity: .9; }
.atlas__leaders path.is-on { stroke: var(--blood-700); stroke-opacity: 1; }

/* index (links). Compact: list beside the figure. */
.atlas__list { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); }
.atlas__list li { border-bottom: 1px solid var(--line-strong); }
.atlas-label { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .35rem; padding: .7rem .25rem .75rem 0; text-decoration: none; color: var(--ink); border-radius: 4px; position: relative; }
.atlas-label__n { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; color: var(--ink-3); padding-top: .32rem; }
.atlas-label__name { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display); font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem); line-height: 1.12; font-weight: 400; letter-spacing: -0.015em; transition: color var(--dur-2); }
.atlas-label__st { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; color: var(--ink-2); }
.atlas-label__st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.2px dashed var(--ink-2); }
.atlas-label--approved .atlas-label__st { color: var(--moss-700); }
.atlas-label--approved .atlas-label__st::before { border: 0; background: var(--moss-700); }
.atlas-label:hover .atlas-label__name, .atlas-label.is-on .atlas-label__name { color: var(--blood-700); }

/* Wide layout: labels float around the figure like a scientific plate */
@container atlas (min-width: 520px) {
  .atlas__stage { display: block; }
  .atlas__art { aspect-ratio: 640 / 720; overflow: visible; max-width: none; }
  .atlas__svg { position: static; width: 100%; left: auto; top: auto; overflow: visible; }
  .atlas__furniture, .atlas__leaders { display: inline; }
  .atl-mk:not(.atl-mk--sat) .atl-mk__dot { r: 7px; }
  .atl-mk__n { display: none; }
  .atlas__list { border: 0; }
  .atlas__list li { border: 0; }
  .atlas-label {
    position: absolute; top: var(--y); width: max-content; max-width: 25%;
    display: grid; grid-template-columns: auto; padding: .2rem .35rem; transform: translateY(-50%);
    padding: .3rem .6rem; background: linear-gradient(90deg, rgb(244 239 229 / .82), rgb(244 239 229 / .55)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 0;
  }
  .atlas-label--r { border-left: 1px solid var(--line-strong); }
  .atlas-label--l { border-right: 1px solid var(--line-strong); background: linear-gradient(270deg, rgb(244 239 229 / .82), rgb(244 239 229 / .55)); }
  .atlas-label.is-on, .atlas-label:hover { border-color: var(--blood-700); }
  .atlas-label--l { right: calc(100% - var(--x)); text-align: right; justify-items: end; }
  .atlas-label--r { left: var(--x); }
  .atlas-label__n { grid-row: auto; padding: 0; font-size: .75rem; }
  .atlas-label__name { font-size: clamp(1.05rem, 3.4cqw, 1.6rem); line-height: 1.05; margin-top: .15rem; }
  .atlas-label__st { font-size: .75rem; }
  .atlas-label--l .atlas-label__st { flex-direction: row-reverse; }
}
.atlas__cap { margin-top: var(--space-m); }
@container atlas (min-width: 520px) { .atlas__cap { margin-left: auto; justify-content: flex-end; text-align: right; } }

/* 3 — Area navigator (sticky) ------------------------------------------------ */
.areabar {
  position: sticky; top: var(--header-h-condensed); z-index: var(--z-sticky);
  border-block: 1px solid var(--line);
  background: rgb(244 239 229 / .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.areabar.is-stuck { box-shadow: 0 10px 24px -18px rgb(52 28 18 / .35); }
.areabar.is-done { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition: opacity var(--dur-3), transform var(--dur-3), visibility 0s linear var(--dur-3); }
.areabar__inner { display: flex; align-items: center; gap: var(--space-s); min-height: 56px; }
.areabar__mini { display: none; flex: none; width: 18px; height: 34px; color: var(--ink-2); }
.areabar__mini svg { width: 100%; height: 100%; }
.areabar__mini circle:first-child, .areabar__mini path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.areabar__dot { fill: var(--blood-700); transition: cx var(--dur-4) var(--ease-out), cy var(--dur-4) var(--ease-out), opacity var(--dur-2); opacity: 0; }
.areabar[data-active] .areabar__dot { opacity: 1; }
.areabar__nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.areabar__nav::-webkit-scrollbar { display: none; }
.areabar__list { display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0; width: max-content; padding-right: 2rem; }
.areabar__link {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 56px; padding: 0 .7rem;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: 6px;
  transition: color var(--dur-2);
}
.areabar__link:hover { color: var(--ink); }
.areabar__n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; color: var(--ink-3); }
.areabar__st { width: 7px; height: 7px; border-radius: 50%; border: 1.2px dashed var(--ink-3); flex: none; }
.areabar__link.is-approved .areabar__st { border: 0; background: var(--moss-700); }
/* progress rule */
.areabar__link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--blood-700); transform: scaleX(var(--p, 0)); transform-origin: left;
}
.areabar__link.is-past::after { background: var(--ink-3); opacity: .45; }
.areabar__link[aria-current="location"] { color: var(--ink); }
.areabar__link[aria-current="location"] .areabar__n { color: var(--blood-700); }
.areabar__lib { display: none; flex: none; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 550; color: var(--ink); text-decoration: none; padding: .5rem 0; border-radius: 6px; }
.areabar__lib svg { width: 14px; height: 14px; transition: transform var(--dur-3) var(--ease-out); }
.areabar__lib:hover { color: var(--blood-700); }
.areabar__lib:hover svg { transform: translateX(3px); }
@media (min-width: 48em) { .areabar__mini { display: block; } }
@media (min-width: 72em) {
  .areabar__nav { -webkit-mask-image: none; mask-image: none; }
  .areabar__list { padding-right: 0; }
  .areabar__lib { display: inline-flex; }
}

/* 4 — Area sections ----------------------------------------------------------- */
.area { position: relative; padding-block: clamp(4rem, 2.5rem + 6vw, 8.5rem); scroll-margin-top: 58px; }
.area + .area { border-top: 1px solid var(--line); }
.area--flip { background-color: rgb(236 228 212 / .5); }
.anchor-alias { position: absolute; top: 0; scroll-margin-top: 58px; }
.area__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 64em) {
  .area__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .area__fig { grid-column: 1 / span 6; grid-row: 1; position: sticky; top: calc(var(--header-h-condensed) + 56px + 2rem); }
  .area__body { grid-column: 8 / span 5; grid-row: 1; }
  .area--flip .area__fig { grid-column: 7 / span 6; }
  .area--flip .area__body { grid-column: 1 / span 5; }
}
/* plate frame */
.area__fig.plate { --plate-bg: var(--raised); margin: 0; padding: clamp(.9rem, .6rem + 1vw, 1.4rem); box-shadow: var(--shadow-1); }
.area__fig .plate__art { padding: clamp(.75rem, .5rem + 1.5vw, 2rem) 0 .5rem; }
.area__fig .plate__art svg { width: 100%; height: auto; max-height: none; overflow: visible; }
.area__cap { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); max-width: none; }
.area__legend { display: block; color: var(--ink-2); margin-bottom: .2rem; }
.area__legend .nw { white-space: nowrap; }
.area__legend b { font-family: var(--font-mono); font-weight: 600; color: var(--blood-700); margin-right: .3em; }
.area__legend .nw { margin-right: .9em; }

.area__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.area__no { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 300; font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; color: var(--blood-700); }
.area__no span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); vertical-align: .9em; margin-left: .15em; }
.area__name { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.status { display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .75rem 0 .55rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.status svg { width: 14px; height: 14px; }
.status--approved { background: var(--moss-100); color: var(--moss-900); }
.status--lit { border: 1px dashed var(--ink-3); color: var(--ink-2); }
.status--lit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.2px dashed currentColor; margin-left: .15rem; }
.area__title { margin-top: var(--space-m); max-width: 12ch; }
.area__lede { margin-top: var(--space-m); font-size: var(--step-1); line-height: 1.5; color: var(--text-2); max-width: 38ch; }
.area__label { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.studied { list-style: none; padding: 0; margin-top: var(--space-s); border-top: 1px solid var(--line-strong); }
.studied li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.studied__name { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display); font-size: var(--step-1); line-height: 1.25; font-weight: 400; letter-spacing: -0.012em; color: var(--ink); }
.studied__name small { display: block; font-family: var(--font-sans); font-size: var(--step--1); color: var(--text-2); letter-spacing: 0; margin-top: .2rem; }
.studied__type { flex: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.studied__type.tag { text-transform: none; letter-spacing: .04em; font-size: .7rem; }

.sgroup { margin-top: var(--space-m); }
.sgroup__label { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }
.sgroup__sw { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.3px dashed var(--ink-2); }
.sgroup--approved .sgroup__label { color: var(--moss-900); }
.sgroup--approved .sgroup__sw { border: 0; background: var(--moss-700); box-shadow: 0 0 0 3px var(--moss-100); }
.sgroup--approved .studied { border-top-color: var(--moss-700); }
.sgroup--approved .studied li { background: linear-gradient(90deg, rgb(220 227 212 / .7), transparent 80%); padding-left: .75rem; }
.sgroup--lit .studied li { padding-left: .75rem; border-left: 1px dashed var(--line-strong); }
.sgroup--inv { padding: .9rem 1rem .4rem; border: 1px dashed var(--ink-3); border-radius: var(--r-md); }
.sgroup--inv .studied { border-top: 0; }
.sgroup--inv .studied li:last-child { border-bottom: 0; }
.sgroup--inv .studied__name { color: var(--ink-2); font-style: italic; font-variation-settings: var(--fr-italic); }
.area__evidence { margin-top: var(--space-xl); }
.area__ev-text { margin-top: .6rem; font-size: var(--step--1); color: var(--text-2); max-width: 52ch; }
.area__foot .link-arrow { display: inline; }
.area__foot .link-arrow svg { display: inline-block; vertical-align: -.12em; margin-left: .45em; }
.area__evidence .area__label { margin-top: 0; }
.area__foot { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }

/* Dental: coagulation-factor note */
.factors-note { margin-top: var(--space-xl); padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); border-radius: var(--r-md); background: var(--porcelain); border: 1px solid rgb(62 74 82 / .14); color: var(--slate-700); font-size: var(--step--1); line-height: 1.6; }
.factors-note__title { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-1); font-weight: 420; letter-spacing: -0.01em; color: var(--ink); margin-bottom: .4rem; }
.factor-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .9rem 0; }
.factor-chips li { display: inline-flex; align-items: center; gap: .35rem; min-width: 2.4rem; justify-content: center; padding: .3rem .55rem; border-radius: var(--r-xs); background: rgb(255 255 255 / .6); border: 1px solid rgb(62 74 82 / .2); font-family: var(--font-mono); font-size: .74rem; font-weight: 500; color: var(--ink); }
.factor-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moss-500); }
.factors-note__foot { color: var(--slate-700); }

/* 5 — Plate drawing primitives --------------------------------------------- */
.ap-trab path { fill: none; stroke: var(--ink); stroke-width: .6; stroke-opacity: .45; vector-effect: non-scaling-stroke; }
.ap-clot { fill: #8E1F30; stroke: var(--ink); stroke-width: .9; vector-effect: non-scaling-stroke; }
.ap-net path { fill: none; stroke: #F6E7D2; stroke-width: .9; stroke-opacity: .85; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ap-net circle { fill: #FFF6EA; }
.ap-trail { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ap-dropshape { fill: url(#ap-drop); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ap-keys path { fill: none; stroke: var(--ink-2); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ap-keys text { font-family: var(--font-mono); font-size: 19px; font-weight: 600; fill: var(--blood-700); }

/* plate primitives (generated plates) */
.ap-tissue { fill: var(--blood-100); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ap-net--sm path { stroke: var(--blood-800); stroke-opacity: .8; stroke-width: .8; }
.ap-net--sm circle { fill: var(--blood-800); }
.ap-tissue + .ap-net--sm path, .ap-net--sm path { stroke-width: .8; }
.ap-clot + .ap-net--sm path { stroke: #F6E7D2; } .ap-clot + .ap-net--sm circle { fill: #FFF6EA; }
.ap-net--ink path { stroke: var(--blood-700); stroke-width: .9; stroke-opacity: .9; } .ap-net--ink circle { fill: var(--blood-700); r: 2px; }
.ap-scope { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: round; }
.ap-scope-in { fill: none; stroke: #3A3330; stroke-width: 8.6; stroke-linecap: round; }
.ap-scope-tick { fill: none; stroke: var(--on-night-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ap-scope-tip { fill: #F6E7C8; }
.ap-ghost { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ap-bed { opacity: .34 !important; }
.ap-nerve { fill: none; stroke: #C99D2E; stroke-width: 2.2; stroke-linecap: round; }
.ap-sinus { fill: var(--porcelain); stroke: var(--ink); stroke-width: .7; stroke-opacity: .6; vector-effect: non-scaling-stroke; }
.ap-cart { fill: rgb(203 211 212 / .55); stroke: var(--ink); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ap-bone { fill: url(#ap-hatch); stroke: var(--ink); stroke-width: .9; vector-effect: non-scaling-stroke; }
.ap-soft { fill: var(--blood-100); stroke: var(--ink); stroke-width: .9; vector-effect: non-scaling-stroke; }
.ap-tongue { fill: rgb(243 221 215 / .75); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ap-vert { fill: rgb(201 165 122 / .25); stroke: var(--ink); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.ap-keepclear { fill: none; stroke: #9A7420; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ap-nerve--hidden { stroke-dasharray: 5 4; opacity: .45; }
.area__fig .plate__no { font-size: .75rem; }
.ap-nerve-halo { fill: none; stroke: rgb(201 157 46 / .16); stroke-width: 14; stroke-linecap: round; }
.ap-tree path { fill: none; stroke: var(--ink); stroke-linecap: round; }
.ap-caps path { fill: none; stroke: var(--blood-600); stroke-width: 1.2; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.ap-fat circle { fill: rgb(240 214 160 / .45); stroke: var(--ink); stroke-width: .6; stroke-opacity: .5; vector-effect: non-scaling-stroke; }

/* section extras */
.area__notice { margin-top: var(--space-xl); }
.area__stat { margin-top: var(--space-xl); }
.area__stat .stat__value { color: var(--blood-700); }
.area__aside { margin-top: var(--space-l); padding-left: 1rem; border-left: 2px dashed var(--line-strong); font-size: var(--step--1); color: var(--text-2); max-width: 46ch; }

/* 6 — What this atlas does not say -------------------------------------------- */
.limits { display: grid; gap: 0 var(--grid-gap); border-top: 1px solid var(--line-night); }
@media (min-width: 48em) { .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .limits { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; } }
.limits li { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--line-night); color: var(--on-night-2); font-size: var(--step-0); line-height: 1.6; }
@media (min-width: 72em) { .limits li { border-bottom: 0; border-top: 1px solid var(--line-night); padding-right: 1rem; } }
.limits__n { display: block; font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fr-italic); font-size: var(--step-3); line-height: 1; color: var(--blood-300); margin-bottom: 1rem; }
.limits__title { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-1); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--on-night); margin-bottom: .5rem; max-width: 18ch; }
.ap-open__note { margin-top: var(--space-xl); color: var(--on-night-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; }

/* 7 — CTA: shared .cta/.refs-wrap now live in site.css; only the atlas-figure art is page-specific */
.ap-cta .cta__art { right: 6%; width: min(24%, 290px); opacity: 1; color: inherit; }
.ap-cta .cta__art use { fill: none; stroke: #EE8D95; stroke-opacity: .5; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ap-cta .cta__art circle { fill: #EE8D95; }
.ap-cta .cta__art circle.is-lit { fill: none; stroke: #EE8D95; stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
@media (max-width: 37.5em) { .ap-cta .cta__art { display: none; } }

/* 8 — Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .atlas__body > use:not(.atlas__fine) { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: ap-draw .9s var(--ease-out) forwards; }
  .js .atlas__markers .atl-mk { opacity: 0; animation: ap-fade .35s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i, 0) * 40ms); }
  .js .atlas-label { animation: ap-fade .4s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * 40ms); }
  .js .atlas__leaders path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: ap-draw .5s var(--ease-out) forwards .35s; }
  .js .atlas__leaders .atlas__sat-links { stroke-dasharray: 2 4; stroke-dashoffset: 0; animation: ap-fade .4s var(--ease-out) both .5s; }
  .js .area__fig .ap-net, .js .area__fig .ap-clot { transition: opacity .6s var(--ease-out) .4s; }
  .js .area__fig [data-reveal-draw] .draw { transition-duration: 1000ms; }
  .js .area__fig [data-reveal-draw] [class^="bot-wash"] { transition: opacity .8s var(--ease-out) .25s; }
  .js .area__fig [data-reveal-draw]:not(.is-in) .ap-net, .js .area__fig [data-reveal-draw]:not(.is-in) .ap-clot { opacity: 0; }
  .js .area__fig .ap-dropshape { transition: transform .7s var(--ease-out) .3s, opacity .5s var(--ease-out) .3s; }
  .js .area__fig [data-reveal-draw]:not(.is-in) .ap-dropshape { transform: translateY(-26px); opacity: 0; }
}
@keyframes ap-draw { to { stroke-dashoffset: 0; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 30em) { .area__legend .nw { white-space: normal; } }