/* DermPrep Learn Derm visual audit — v61
   Loaded last so shared accessibility and layout safeguards win consistently. */
:root {
  --dp-forest: #153733;
  --dp-deep: #102a27;
  --dp-coral: #f87965;
  --dp-gold: #f4bd52;
  --dp-paper: #fffdf8;
  --dp-cream: #f3ede2;
  --dp-line: #d9d0c2;
  --dp-muted: #58716e;
  --dp-serif: "Playfair Display", Georgia, serif;
  --dp-sans: "DM Sans", Arial, sans-serif;
}

html { background: var(--dp-paper); }
body {
  color: var(--dp-forest);
  background: var(--dp-paper);
  font-family: var(--dp-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* v61: Learn hub hierarchy, contrast, and interaction polish. */
.hub-hero {
  padding-top: clamp(44px, 5vw, 64px) !important;
  padding-bottom: clamp(30px, 3.5vw, 44px) !important;
}
.hub-hero h1 {
  max-width: 820px;
  text-wrap: balance;
}
.hub-hero + .section {
  padding-top: clamp(32px, 4vw, 48px) !important;
}
.featured-grid {
  align-items: stretch;
}
.featured-card {
  box-shadow: 0 10px 28px rgba(21, 55, 51, .045);
  overflow: hidden;
  position: relative;
}
.featured-card:hover,
.featured-card:focus-visible {
  border-color: #f47761;
  box-shadow: 0 16px 34px rgba(21, 55, 51, .11);
}
.featured-card .card-cta {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}
.featured-card.urgent {
  background: #18302d !important;
  border-color: #18302d !important;
  color: #fff !important;
}
.featured-card.urgent .eyebrow {
  color: #ff8f7a !important;
}
.featured-card.urgent h2,
.featured-card.urgent p,
.featured-card.urgent .card-cta {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}
.featured-card.urgent p {
  color: #d6e2df !important;
  -webkit-text-fill-color: #d6e2df !important;
}
.featured-card.urgent:hover,
.featured-card.urgent:focus-visible {
  background: #21443f !important;
  border-color: #f47761 !important;
}
@media (max-width: 760px) {
  .hub-hero { padding-bottom: 28px !important; }
  .hub-hero + .section { padding-top: 26px !important; }
}

/* Keep the reading column centered without page-specific padding compounding. */
.shell { box-sizing: border-box; width: min(1160px, calc(100% - 56px)); margin-inline: auto; }
.narrow { width: min(900px, calc(100% - 56px)); margin-inline: auto; }
main { overflow: clip; }

h1, h2, h3, h4, .display, .section-title {
  color: var(--dp-forest);
  font-family: var(--dp-serif);
  text-wrap: balance;
}
p, li, dd { overflow-wrap: anywhere; }
.lead { max-width: 68ch; }

/* Every dark teaching band needs an explicit light type system. */
.band.dark, .band.deep-green, .deep-green, .urgency,
.attending, .compare, .goal-strip {
  color: #fff;
}
.band.dark :is(h1,h2,h3,h4,p,li),
.band.deep-green :is(h1,h2,h3,h4,p,li),
.deep-green :is(h1,h2,h3,h4,p,li),
.urgency :is(h1,h2,h3,h4,p,li),
.attending > .shell > :is(h1,h2,h3,h4,p),
.compare > .shell > :is(h1,h2,h3,h4,p),
.light-copy :is(h1,h2,h3,h4,p,li) {
  color: #fff;
}
.band.dark .eyebrow, .band.deep-green .eyebrow, .deep-green .eyebrow,
.urgency .eyebrow, .attending .eyebrow, .compare .eyebrow { color: #ff8d79; }
.band.dark .quiet, .band.deep-green .quiet, .deep-green .quiet,
.urgency .quiet { color: #d6e2df; }

/* White interactive surfaces always return to dark readable text. */
.deep-green :is(details,.scenario,.model,.audience-output,.rapid-card,.recap),
.band.dark :is(details,.scenario,.model,.audience-output,.rapid-card,.recap),
.attending details,
.questions details,
.snapshot-list details {
  color: var(--dp-forest);
}
.deep-green :is(details,.scenario,.model,.audience-output,.rapid-card,.recap) :is(h2,h3,h4,p,li,label,legend,summary,strong),
.band.dark :is(details,.scenario,.model,.audience-output,.rapid-card,.recap) :is(h2,h3,h4,p,li,label,legend,summary,strong),
.attending details :is(h2,h3,h4,p,li,label,summary,strong) {
  color: var(--dp-forest);
}

/* Accordion text should never inherit browser selection-like backgrounds. */
details { overflow: hidden; }
summary { line-height: 1.35; }
details[open] > summary { margin-bottom: 10px; }
details > p:last-child { margin-bottom: 0; }

/* Fix the presentation lab cascade conflict and preserve balanced columns. */
#presentation-lab .lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 22px;
  align-items: stretch;
}
#presentation-lab .scenario,
#presentation-lab .model { min-width: 0; padding: clamp(22px, 3vw, 30px); }
#presentation-lab .scenario form { grid-template-columns: repeat(2, minmax(0,1fr)); }
#presentation-lab select { min-width: 0; }
#presentation-lab #built-description { min-height: 96px; }

/* Consistent quiz hierarchy and contrast. */
.quiz h2, .quiz legend { color: var(--dp-forest); }
.deep-green .quiz label, .band.dark .quiz label { color: #fff; }
.quiz label { line-height: 1.45; }
.quiz .recap { background: #fff; color: var(--dp-forest); border-radius: 16px; padding: 22px 26px; }
.quiz .recap :is(p,li) { color: var(--dp-forest); }

/* Diagrams: centered, bounded, and legible at common laptop widths. */
figure { min-width: 0; margin-inline: auto; }
figure > svg, .depth-visual > svg, .skin-map > svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.hero-visual, .hero-map, .hero-board, .hero-flow, .hero-framework {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 650px;
}
figcaption { max-width: 68ch; margin: 12px auto 0; color: var(--dp-muted); text-align: center; }
.hero-map text, .hero-visual text, .hero-framework text, .hero-flow text { paint-order: stroke; stroke-width: 0; }
.conditions-hero .hero-map text { font-size: 12px; }
.conditions-hero .hero-map .center + text,
.conditions-hero .hero-map .center + text + text { font-size: 13px; }
.treatment-hero .hero-framework text { font-size: 15px; }

/* Cards and comparison areas align cleanly without accidental overflow. */
.path-grid > *, .next-grid > *, .watch-grid > *, .procedure-grid > *,
.condition-grid > *, .treatment-grid > *, .case-grid > *, .mistakes > * { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; }
table { font-size: .94rem; }
th, td { line-height: 1.45; }

/* Shared spacing rhythm. */
.section, .band, .quiz { scroll-margin-top: 150px; }
.section-head { margin-bottom: 32px; }
.section-head > p { max-width: 48ch; }
.actions { margin-top: 22px; }
.references { color: var(--dp-muted); }

@media (max-width: 980px) {
  .shell, .narrow { width: min(100% - 40px, 1160px); }
  #presentation-lab .lab-grid { grid-template-columns: 1fr; }
  .hero-visual, .hero-map, .hero-board, .hero-flow, .hero-framework { max-width: 620px; }
}

@media (max-width: 700px) {
  .shell, .narrow { width: calc(100% - 28px); padding-left: 0; padding-right: 0; }
  #presentation-lab .scenario form { grid-template-columns: 1fr; }
  #presentation-lab .scenario form .button { grid-column: auto; }
  .section, .band, .quiz { padding-block: 50px; }
  .section-head { gap: 16px; }
  table { font-size: .86rem; }
  .conditions-hero .hero-map text { font-size: 10px; }
}

/* v55: explicit contrast tokens for legacy dark teaching components. */
#quick.band,
.builder-output,
.lab-result .model,
.change-card,
.orientation-card,
.remember.dark,
.compare:not(.band) > div:last-child {
  color: #fff;
}
#quick.band > .shell > :is(h1,h2,h3,h4,p),
#quick.band .sequence :is(strong,span),
#quick.band .remember :is(p,strong),
.builder-output :is(h1,h2,h3,h4,p,strong,span),
.lab-result .model :is(h1,h2,h3,h4,p,strong,span),
.change-card :is(h1,h2,h3,h4,p,li,strong,span),
.orientation-card :is(h1,h2,h3,h4,p,li,strong,span),
.remember.dark :is(h1,h2,h3,h4,p,strong,span),
.compare:not(.band) > div:last-child :is(h1,h2,h3,h4,p,strong,span) {
  color: #fff;
}
#quick.band .case,
#quick.band .case :is(h1,h2,h3,h4,p,li,strong,span,summary),
#quick.band details,
#quick.band details :is(h1,h2,h3,h4,p,li,strong,span,summary) {
  color: var(--dp-forest);
}
#quick.band .sequence span,
.orientation-card li,
.change-card .scenario p {
  color: #e1ebe8;
}

/* Consistent primary and secondary actions inside interactive teaching cards. */
.change-card button,
#reset-checks {
  min-height: 44px;
  border: 1px solid var(--dp-coral);
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--dp-coral);
  color: var(--dp-deep);
  cursor: pointer;
  font-family: var(--dp-sans);
  font-weight: 800;
}
.change-card > button { margin-top: 14px; }
.change-card #reset-change {
  border-color: rgba(255,255,255,.65);
  background: transparent;
  color: #fff;
}
.change-card button:hover,
.change-card button:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Keep light comparison and formula surfaces visually connected. */
.formula {
  border: 1px solid var(--dp-line);
  background: #f3ede2;
}
.compare:not(.band) > div {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.builder-output,
.change-card,
.orientation-card {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* v47: quiz bands on several legacy pages use a dark background without a
   semantic dark class. Keep their heading and prompt explicitly visible. */
.quiz.band > .shell > h2,
.quiz.band > .shell > fieldset > legend {
  color: #fff;
}
.quiz.band > .shell > fieldset > label {
  color: #fff;
}
.quiz.band .recap,
.quiz.band .recap :is(p, li, strong) {
  color: var(--dp-forest);
}

/* A light/cream band must always use the dark type palette, even when older
   markup also carries the historical light-copy class. */
.band.cream .light-copy :is(h1, h2, h3, h4, p, li),
.band.cream.light-copy :is(h1, h2, h3, h4, p, li) {
  color: var(--dp-forest);
}

/* DermPrep Learn Derm illustration alignment and comparison-band refinement — v49 */

/* The legacy Start Here stylesheet uses .compare for a compact two-card unit.
   On Dermpath, .compare is a full-width teaching band and must not inherit that grid. */
.compare.band {
  display: block;
  grid-template-columns: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
.compare.band > .shell {
  width: min(1060px, calc(100% - 56px));
  margin-inline: auto;
}

/* Give all hero illustrations the same visual footprint and optical center. */
.conditions-hero .hero-map,
.treatment-hero .hero-framework,
.case-hero .hero-flow,
.dual-hero .hero-map {
  display: grid;
  place-items: center;
  width: min(100%, 600px);
  margin-inline: auto;
}
.conditions-hero .hero-map svg,
.treatment-hero .hero-framework svg,
.case-hero .hero-flow svg,
.dual-hero .hero-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Labels sit on the geometric center of their nodes, not on hand-tuned offsets. */
.conditions-hero .hero-map text,
.treatment-hero .hero-framework text,
.case-hero .hero-flow text,
.dual-hero .hero-map text {
  text-anchor: middle;
  dominant-baseline: middle;
}
.conditions-hero .hero-map text { font-size: 11px; letter-spacing: .01em; }
.conditions-hero .hero-map .center-label { font-size: 13px; }
.treatment-hero .hero-framework text { font-size: 14px; }
.case-hero .hero-flow .labels text { font-size: 12px; }
.case-hero .hero-flow .caption { font-size: 13px; letter-spacing: .015em; }

/* Keep the drawing slightly inset so circles and captions never feel clipped. */
.conditions-hero .hero-map svg,
.treatment-hero .hero-framework svg,
.case-hero .hero-flow svg { max-width: 570px; }
.dual-hero .hero-map svg { max-width: 600px; }

@media (max-width: 700px) {
  .compare.band > .shell { width: calc(100% - 28px); }
  .conditions-hero .hero-map text { font-size: 9px; }
  .conditions-hero .hero-map .center-label { font-size: 11px; }
  .treatment-hero .hero-framework text { font-size: 12px; }
  .case-hero .hero-flow .labels text { font-size: 10px; }
  .case-hero .hero-flow .caption { font-size: 10px; }
}

/* Final audit: readable accent text on light surfaces. The brighter coral is
   reserved for dark backgrounds and large decorative type. */
main > :not(.deep-green):not(.dark):not(.goal-strip):not(.quiz) .eyebrow,
.band.cream .eyebrow,
.section .eyebrow,
.breadcrumb + section .eyebrow {
  color: #c64f3e;
}
.band.deep-green .eyebrow,
.band.dark .eyebrow,
.deep-green .eyebrow,
.goal-strip .eyebrow,
.quiz.band .eyebrow,
.urgency .eyebrow,
.compare.band .eyebrow {
  color: #ff9c89;
}

/* Preserve predictable type and spacing in native controls across browsers. */
button, input, select, textarea { font: inherit; }
button, select, input[type="button"], input[type="submit"] { min-height: 44px; }
h1, h2, h3, h4 { overflow-wrap: normal; }
.hero-note, .boundary, figcaption { line-height: 1.5; }

/* Optical alignment for the remaining workflow illustrations. */
.hero-visual, .hero-board, .hero-flow, .hero-framework, .hero-map {
  margin-block: 0;
}
.hero-visual svg, .hero-board svg, .hero-flow svg,
.hero-framework svg, .hero-map svg {
  aspect-ratio: auto;
}

/* v57: center and balance the two primary learning-flow illustrations. */
.hero .hero-visual,
.case-hero .hero-flow {
  align-self: center;
  display: grid;
  justify-items: center;
  justify-self: center;
  margin: 0 auto;
  max-width: 620px;
  width: 100%;
}
.hero .hero-visual svg,
.case-hero .hero-flow svg {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 620px;
  overflow: visible;
  width: 100%;
}
.hero .hero-visual figcaption,
.case-hero .hero-flow figcaption {
  margin: 14px auto 0;
  max-width: 560px;
  padding-inline: 18px;
  text-align: center;
}
@media (max-width: 980px) {
  .hero .hero-visual,
  .case-hero .hero-flow { margin-top: 18px; }
}

/* v52: normalize the repeated next-action component across every Learn page. */
.integration.band.cream {
  padding-block: clamp(60px, 7vw, 88px);
}
.integration.band.cream > .shell {
  width: min(1160px, calc(100% - 56px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.integration.band.cream .section-head {
  width: 100%;
  margin: 0;
}
.integration.band.cream .section-head > div {
  width: 100%;
}
.integration.band.cream h2 {
  max-width: 1000px;
  margin: .25rem auto 1.35rem;
  font-size: clamp(2.35rem, 4.5vw, 4.25rem);
  line-height: 1.02;
}
.integration.band.cream .next-grid,
.integration.band.cream .next-grid.five {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  margin: 0 auto;
}
.integration.band.cream .next-grid > a {
  flex: 1 1 190px;
  width: auto;
  max-width: 220px;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 20px;
  border: 1px solid var(--dp-line);
  border-radius: 15px;
  background: #fff;
  color: var(--dp-forest);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(21,55,51,.03);
}
.integration.band.cream .next-grid > a:hover,
.integration.band.cream .next-grid > a:focus-visible {
  border-color: var(--dp-coral);
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(21,55,51,.09);
}
.integration.band.cream .next-grid strong {
  display: block;
  margin-bottom: 9px;
  color: #c64f3e;
  font-family: var(--dp-sans);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}
.integration.band.cream .next-grid span {
  color: var(--dp-forest);
  font-family: var(--dp-serif);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.25;
}
.integration.band.cream .integration-links {
  max-width: 900px;
  margin: 20px auto 0;
  color: var(--dp-muted);
  text-align: center;
}

/* Historical .attending makes type white; cream teaching bands need dark ink. */
.attending.band.cream,
.attending.band.cream :is(h1,h2,h3,h4,p,li) {
  color: var(--dp-forest);
}
.attending.band.cream .eyebrow { color: #c64f3e; }
.attending.band.cream > .shell {
  width: min(900px, calc(100% - 56px));
  margin-inline: auto;
}
.attending.band.cream h2 {
  max-width: 760px;
  margin: .3rem 0 1rem;
  color: var(--dp-forest);
  font-size: clamp(2.45rem, 5vw, 4rem);
  line-height: 1.03;
}
.attending.band.cream .questions {
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .integration.band.cream > .shell,
  .attending.band.cream > .shell { width: calc(100% - 28px); }
  .integration.band.cream h2 { font-size: clamp(2rem, 11vw, 3rem); }
  .integration.band.cream .next-grid > a {
    flex-basis: 100%;
    max-width: none;
    min-height: 0;
  }
}