/* Patient Safety Initiative: Still Water. Self-hosted fonts and images. No external requests. */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --abyss: #071F24; --deep: #0E3A40; --tarn: #1F6A70; --ivory: #F4EFE4; --slab: #FBF8F0;
  --char: #1F2629; --soft: #46545A; --mist: #A9C2BC; --pale: #DCE7E3; --copper: #C08A5A; --burnt: #7F4A20;
  --mineral: #7A9F98; --mineral-ink: #151E22; --mineral-sub: #1F2B30; --line: #D7D0BF;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --wide: 72rem; --gut: clamp(1.1rem, 4.5vw, 2.25rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--ivory); color: var(--char); font: 400 1.1875rem/1.6 var(--sans); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.3rem, 1rem + 6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.9rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
h4 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
a { color: var(--deep); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--tarn); }
/* Focus indicator: three bands, dark / light / dark. Whatever the element and the background are (light or dark, ivory, mineral mist, the amber strip, deep teal, the water), at least two of the three edges contrast with what they touch. */
:focus-visible { outline: 2px solid var(--abyss); outline-offset: 4px; box-shadow: 0 0 0 2px var(--abyss), 0 0 0 4px var(--ivory) !important; border-radius: 4px; }   /* !important: a component's own shadow (the route cards have one) must never remove the ring */
/* Doors clip anything drawn outside their rounded edge (overflow: hidden), so a door's ring is drawn just inside it. */
details.door > summary:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--abyss), inset 0 0 0 4px var(--ivory) !important; border-radius: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ivory); color: var(--abyss); padding: 0.8rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.ext { flex: none; vertical-align: -0.2em; margin-left: 0.3em; }
.print-only { display: none; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 46rem; }
.measure { max-width: 40rem; }
.fine { font-size: 1rem; color: var(--soft); }
.stamp { font-size: 0.98rem; color: var(--soft); }
.lede { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.65rem)/1.4 var(--serif); max-width: 34rem; }
.cta-row { margin-top: 1.75rem; }
.quiet { margin: 2rem 0 0; color: var(--soft); font: italic 1.25rem/1.3 var(--serif); }
.quiet a { font: 400 1rem/1.3 var(--sans); font-style: normal; }
.count { font-weight: 400; color: var(--mist); margin: 0 auto 0 -0.6rem; }

/* ---------- Top: draft ribbon, emergency line, sticky header ---------- */
.draft-ribbon { background: #000; color: #fff; text-align: center; font-size: 0.9rem; padding: 0.4rem 1rem; }
.emergency { background: var(--burnt); color: #fff; font-size: 1rem; padding-top: env(safe-area-inset-top); }
.emergency p { margin: 0; padding: 0.5rem 0; }
.site-header { background: var(--abyss); color: var(--ivory); }
@media (min-width: 54rem) { .site-header { position: sticky; top: 0; z-index: 60; } }
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 2rem; padding-block: 1rem 0.8rem; }
.site-header__right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.75rem; }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--ivory); line-height: 1.15; }
.wordmark:hover { color: var(--ivory); }
.wordmark__name { font: 700 1rem/1.15 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.wordmark__domain { font: italic 400 1.05rem/1.3 var(--serif); color: var(--mist); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-block; padding: 0.6rem 0; color: var(--mist); text-decoration: none; font-weight: 600; font-size: 1.02rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ivory); border-bottom-color: var(--mist); }
.site-nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--copper); }
.site-header .header-report { display: none; }
@media (min-width: 54rem) { .site-header .header-report { display: inline-flex; } }

/* ---------- Buttons (no halos; a quiet tone shift on hover) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 3.25rem; padding: 0.8rem 1.6rem; border-radius: 14px; border: 2px solid transparent; font: 700 1.15rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background 0.2s ease; }
.btn--light { background: var(--ivory); color: var(--abyss); }
.btn--light:hover { background: #fff; color: var(--abyss); }
.btn--deep { background: var(--deep); color: var(--ivory); }
.btn--deep:hover { background: #134249; color: var(--ivory); }
.btn--xl { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.3rem; }
.btn--compact { min-height: 2.75rem; padding: 0.4rem 1.1rem; font-size: 1rem; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }

/* ---------- One body of water: hero and the three-beat band ---------- */
.upper { position: relative; overflow: hidden; background-color: var(--abyss); color: var(--ivory); background-repeat: no-repeat; background-image: url("../img/water-mobile.jpg"); background-size: 173% auto; background-position: -44.9vw 0; }
@media (min-width: 54rem) { .upper { background-image: url("../img/water-desktop.jpg"); background-size: 140% auto; background-position: calc(100% + 19.5vw) 0; } }
.upper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 31, 36, 0) 0, rgba(7, 31, 36, 0) 10rem, rgba(7, 31, 36, 0.5) 21rem, rgba(7, 31, 36, 0.34) 100%); }
@media (min-width: 54rem) { .upper::before { background: linear-gradient(90deg, rgba(7, 31, 36, 0.74) 0, rgba(7, 31, 36, 0.46) 40%, rgba(7, 31, 36, 0.1) 66%, rgba(7, 31, 36, 0) 78%); } }
.upper > section { position: relative; }
.hero__in { padding-block: 16rem 6rem; }
@media (min-width: 54rem) { .hero__in { padding-block: 9.4rem 9.4rem; } .hero__in > * { max-width: 37rem; } }
.hero__org { font: 700 0.95rem/1.2 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--pale); margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__lead { font: 400 clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem)/1.4 var(--sans); color: var(--pale); max-width: 28ch; margin-bottom: 2.5rem; }
.hero .btn--xl { max-width: 100%; }
.hero__dest { margin: 1.5rem 0 0; font-size: 1.02rem; color: var(--pale); max-width: 34rem; }
.hero__panel { margin-top: 3.5rem; padding: 1.5rem 1.6rem 0.8rem; border-radius: 18px; background: rgba(7, 31, 36, 0.42); border: 1px solid rgba(169, 194, 188, 0.45); }
.hero__panel h2 { font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.15rem)/1.15 var(--serif); margin: 0 0 0.75rem; color: var(--ivory); }
.hero__panel p { margin-bottom: 0.8rem; }
.hero__panel-go { font-weight: 600; }
.hero__panel a { color: var(--ivory); text-decoration-color: var(--mist); }
@media (min-width: 54rem) { .hero__dest { margin-top: 1.5rem; } .hero__panel { margin-top: 6rem; padding: 1.75rem 2rem 1rem; } }
.audience-note { margin: 1.5rem 0 0; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--ivory); color: var(--abyss); font-weight: 600; }
.audience-note[hidden] { display: none; }

/* the band: a feathered tonal pane over the same water. No rule, no border, no rings. */
.band { --lead: 4.5rem; isolation: isolate; padding-block: 5rem 6rem; }
.band::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(var(--lead) * -1); pointer-events: none; background: linear-gradient(180deg, rgba(3, 20, 26, 0) 0, rgba(3, 20, 26, 0.56) var(--lead), rgba(3, 20, 26, 0.62) 70%, rgba(3, 20, 26, 0.76) 100%); }
@media (min-width: 54rem) { .band { --lead: 6rem; padding-block: 8rem 9.4rem; } }
.band__lines { margin: 0; font: 400 clamp(1.9rem, 10.4vw, 6.2rem)/1.02 var(--serif); text-transform: uppercase; letter-spacing: 0.01em; }
.band__lines span { display: block; white-space: nowrap; }
.band__lines span:nth-child(1) { opacity: 0.5; }
.band__lines span:nth-child(2) { opacity: 0.76; }
.band__quote { margin: 3rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--copper); }
.band__quote blockquote { margin: 0 0 0.6rem; }
.band__quote blockquote p { margin: 0; font: italic 400 clamp(1.45rem, 1.1rem + 1.8vw, 2.4rem)/1.2 var(--serif); }
.band__quote figcaption { font-size: 1.05rem; }
.band__quote a { color: var(--mist); }
.band__quote a:hover { color: var(--ivory); }

/* ---------- Grounds and compositional spacing ---------- */
.section { padding-block: 5rem; }
.ground-ivory { background: var(--ivory); color: var(--char); }
.ground-mineral { background: var(--mineral); color: var(--mineral-ink); }
.ground-water { background: radial-gradient(110% 130% at 85% 20%, #1F6A70 0%, #0E3A40 45%, #071F24 92%); color: var(--ivory); }
.start { padding-block: 5rem 4.75rem; }
.start__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); margin-bottom: 0.4em; }
.start .lede { margin-bottom: 1.75rem; }
.observe { padding-block: 5.5rem; }
.document { padding-block: 5.5rem 5.75rem; }
.report { padding-block: 6rem 6.5rem; }
.reference { padding-block: 5.5rem 2.25rem; }
.other { padding-block: 1.5rem 5.25rem; }
@media (min-width: 54rem) {
  .start { padding-block: 8.1rem 8.1rem; } .start .lede { margin-bottom: 3rem; }
  .observe { padding-block: 9.4rem; }
  .document { padding-block: 9.4rem 10rem; }
  .report { padding-block: 10.6rem 11.2rem; }
  .reference { padding-block: 8.75rem 4.4rem; }
  .other { padding-block: 1.9rem 7.5rem; }
}
.beat { font: 400 clamp(2.5rem, 1rem + 7.4vw, 5.5rem)/1 var(--serif); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 1rem; max-width: none; }
.beat__q { font: 400 clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem)/1.12 var(--serif); margin: 0; }
@media (min-width: 54rem) { .beat { margin-bottom: 1.75rem; } }
.observe .beat__q { margin-bottom: 1.75rem; }
.document p.sub { font-size: 1.15rem; color: var(--soft); margin: 0.75rem 0 1.75rem; }
@media (min-width: 54rem) { .document p.sub { margin: 1rem 0 3.5rem; } }

/* ---------- The report section (dark water, unchanged in spirit) ---------- */
.report__grid { display: grid; gap: 2.5rem; align-items: start; }
.report .beat { margin: 0 0 1.25rem; }
.report__text { font-size: 1.25rem; max-width: 30rem; color: var(--pale); margin: 1.5rem 0 0; }
.report__dest { font-size: 1rem; color: var(--pale); margin: 1.1rem 0 0; }
.report__alt { margin: 1.5rem 0 0; font-size: 1.15rem; color: var(--pale); }
.report a:not(.btn) { color: var(--ivory); text-decoration-color: var(--mist); }
.report .btn--xl { width: 100%; }
.report .helpline { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(169, 194, 188, 0.35); font-size: 1rem; color: var(--pale); }
.report .stamp { color: var(--pale); margin: 0; }
@media (min-width: 52rem) { .report__grid { grid-template-columns: 1.2fr 1fr; gap: 5rem; } .report .btn--xl { width: auto; } }

/* ---------- Doors: one anatomy. Color is hierarchy, chosen per door. ---------- */
details.door { --face: #FBF8F0; --edge: #0E3A40; --ttl: var(--char); --ans: #46545A; --cue: #0E3A40; --hov: #FFFFFF; background: var(--face); color: var(--ttl); border: 2px solid var(--edge); border-radius: 20px; overflow: hidden; margin: 0; transition: background 0.2s ease; }
details.door--mineral { --face: #7A9F98; --edge: #0E3A40; --ttl: #151E22; --ans: #1F2B30; --cue: #0A2A2F; --hov: #86AAA3; }
details.door--ivory { --face: #FBF8F0; --edge: #0E3A40; --ttl: var(--char); --ans: #46545A; --cue: #0E3A40; --hov: #FFFFFF; }
details.door--quiet { --face: #FBF8F0; --edge: #CBC4B0; --ttl: var(--char); --ans: #46545A; --cue: #46545A; --hov: #FFFFFF; border-width: 1.5px; border-radius: 14px; }
details.door > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.3rem; align-items: center; padding: 1.4rem 1.4rem; min-height: 5.5rem; }
details.door > summary::-webkit-details-marker { display: none; }
@media (min-width: 40rem) { details.door > summary { padding: 1.75rem 2rem; } }
.door__title { grid-column: 1; margin: 0; overflow-wrap: anywhere; font: 400 clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem)/1.15 var(--serif); color: var(--ttl); }
.door__ans { grid-column: 1; margin: 0; color: var(--ans); font-size: 1.05rem; overflow-wrap: anywhere; }
.door__cue { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 0.7rem; color: var(--cue); }
.open-cue { font: 700 1rem/1 var(--sans); }
.open-cue::before { content: "Open"; }
details[open] > summary .open-cue::before { content: "Close"; }
.glyph { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font: 400 1.6rem/1 var(--sans); transition: transform 0.4s ease; }
.glyph::before { content: "+"; }
details[open] > summary .glyph { transform: rotate(45deg); }
/* the open door's close control keeps the two soft ripple rings of the original Still Water design */
details.door[open] > summary .glyph { box-shadow: 0 0 0 5px rgba(169, 194, 188, 0.12), 0 0 0 14px rgba(169, 194, 188, 0.06); }
@media (max-width: 39.99rem) { .open-cue { font-size: 0.9rem; } .glyph { width: 2.4rem; height: 2.4rem; } }
details.door:not([open]):hover { background: var(--hov); box-shadow: inset 0 0 0 1px var(--edge); }
details.door:not([open]):hover .open-cue { text-decoration: underline; text-underline-offset: 0.25em; }
details.door--quiet > summary { padding: 1.05rem 1.4rem; min-height: 0; }
details.door--quiet .door__title { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); }
details.door--quiet .door__ans { font-size: 1rem; }
details.door--quiet .glyph { width: 2.2rem; height: 2.2rem; border-width: 1.5px; font-size: 1.3rem; }
details.door--quiet:not([open]):hover { box-shadow: inset 0 0 0 1px #A9A28C; border-color: #A9A28C; }
/* the open state is the same on every door: deep water, ivory text */
details.door[open] { --ttl: var(--ivory); --ans: var(--mist); --cue: var(--mist); background: var(--deep); border-color: var(--tarn); color: var(--ivory); }
details.door[open] a:not(.btn):not(.doorlink) { color: var(--ivory); text-decoration-color: var(--mist); }
details.door[open] .fine, details.door[open] .stamp { color: var(--mist); }
.door__body { padding: 0.25rem 1.4rem 1.6rem; }
@media (min-width: 40rem) { .door__body { padding: 0.25rem 2rem 2rem; } }
.door__body > p, .door__body > .walk { max-width: 44rem; }
details.sub { border-top: 1px solid rgba(169, 194, 188, 0.32); margin-top: 0.4rem; }
details.sub > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font: 700 1.1rem/1.3 var(--sans); padding: 0.85rem 0; min-height: 3.25rem; }
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::after { content: "+"; flex: none; width: 2.2rem; height: 2.2rem; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 400 1.4rem/1 var(--sans); color: var(--mist); transition: transform 0.4s ease; }
details.sub[open] > summary::after { transform: rotate(45deg); }
details.sub > summary:hover { color: #fff; }
details.sub > :not(summary) { margin-top: 0.25rem; }
details.sub[open] { padding-bottom: 0.6rem; }
/* door layouts */
.doorgrid { display: grid; gap: 1rem; }
.refrow { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 52rem) {
  .doorgrid--three { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .doorgrid--three > details.door > summary { grid-template-columns: 1fr; min-height: 13rem; align-content: space-between; row-gap: 0.6rem; padding-block: 2rem 1.6rem; }
  .doorgrid--three > details.door:not([open]) > summary { height: 100%; grid-template-rows: auto auto 1fr; align-content: start; }
  .doorgrid--three > details.door:not([open]) .door__cue { align-self: end; }
  .doorgrid--three .door__cue { grid-column: 1; grid-row: auto; justify-self: end; margin-top: 1.5rem; }
  .doorgrid--three > details.door[open] { grid-column: 1 / -1; }
  .doorgrid--three > details.door[open] > summary { grid-template-columns: minmax(0, 1fr) auto; min-height: 5.5rem; align-content: normal; padding-block: 1.75rem; }
  .doorgrid--three > details.door[open] .door__cue { grid-column: 2; grid-row: 1 / 3; justify-self: auto; margin-top: 0; }
  .refrow { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .refrow > details.door[open] { grid-column: 1 / -1; }
}
/* who can report: nine pills, deliberately 5 + 4 */
.roles-wrap { margin: 1.5rem 0 2.25rem; display: grid; gap: 0.55rem; }
.roles { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; margin: 0; }
.roles li { padding: 0.4rem 1rem; border: 1.5px solid var(--mist); border-radius: 999px; font-weight: 600; font-size: 1.02rem; color: var(--ivory); background: rgba(244, 239, 228, 0.08); }
.roles li[data-active="true"] { background: var(--ivory); color: var(--abyss); }
.split { display: grid; gap: 2.5rem; }
.split > div { border-top: 1px solid rgba(169, 194, 188, 0.4); padding-top: 1.1rem; }
.split h3 { font-size: 1.5rem; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* two ways panel (inside door 1) */
.twoways { display: grid; gap: 0.9rem; margin: 0.4rem 0 1.5rem; }
.twoways > div { padding: 1.1rem 1.25rem 0.6rem; border-radius: 16px; border: 1px solid rgba(169, 194, 188, 0.4); background: rgba(244, 239, 228, 0.07); }
.twoways h4 { margin-bottom: 0.3rem; color: var(--ivory); }
.twoways p, .twoways ol { margin-bottom: 0.6rem; }
@media (min-width: 46rem) { .twoways { grid-template-columns: 1fr 1fr; } }

/* checklist (inside door 1) */
.checklist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin: 1.75rem 0 1rem; }
.checklist-head h4 { font: 400 1.6rem/1.2 var(--serif); margin: 0; }
.checklist-pdf { margin-left: auto; font-weight: 600; }
@media (max-width: 39.99rem) { .checklist-pdf { margin-left: 0; flex-basis: 100%; } }
.ground { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.ground li { margin-bottom: 0.3rem; }
.tier { margin-bottom: 1.25rem; }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li + li { margin-top: 0.1rem; }
.tier label { display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; padding: 0.5rem 0; min-height: 2.75rem; }
.tier input[type="checkbox"] { flex: none; width: 1.55rem; height: 1.55rem; margin: 0.1rem 0 0; accent-color: var(--copper); }
.tier__main { display: block; font-weight: 600; }
.tier__hint { display: block; font-size: 1rem; color: var(--mist); }
.tier__ref { display: block; font-size: 0.88rem; color: var(--mist); opacity: 0.85; }
.tier__note { color: var(--mist); margin-bottom: 0.8rem; }
@media (min-width: 52rem) { details.sub .tier ul { columns: 2; column-gap: 2.5rem; } details.sub .tier li { break-inside: avoid; } }


/* walkthrough + expectations */
.walk { padding-left: 1.3rem; }
.walk > li { margin-bottom: 1.1rem; padding-left: 0.3rem; }
.walk > li::marker { font-weight: 700; color: var(--mist); }
.walk ul { margin-top: 0.4rem; }
.expect { display: grid; gap: 1.75rem; margin-bottom: 1rem; }
@media (min-width: 52rem) { .expect { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.expect > div { border-top: 1px solid rgba(169, 194, 188, 0.4); padding-top: 0.8rem; }
.expect h4 { font-size: 1.15rem; color: var(--ivory); }
.notice { max-width: 40rem; border-left: 3px solid var(--copper); padding: 0.4rem 0 0.1rem 1.1rem; margin: 1.25rem 0; }
.tag { display: inline-block; padding: 0.1rem 0.7rem; font: 700 0.88rem/1.5 var(--sans); border-radius: 999px; }
.tag--todo { background: rgba(244, 239, 228, 0.14); color: inherit; border: 1px dashed currentColor; }
.section .tag--todo { background: var(--slab); color: var(--char); }

/* why report: the ring diagram, in water */
.why { display: grid; gap: 2rem; margin-top: 1rem; align-items: start; }
@media (min-width: 60rem) { .why { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.why__text > :first-child { margin-top: 0; }
.pond { margin: 0; }
.pond__water { border-radius: 26px; padding: 0.5rem; background: radial-gradient(90% 90% at 50% 58%, #1F6A70 0%, #0E3A40 45%, #071F24 92%); box-shadow: 0 30px 60px -36px rgba(7, 31, 36, 0.7); }
.pond svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: auto; }
.pond .lab { font-family: var(--serif); font-size: 19px; fill: #F4EFE4; }
.pond .out { font-family: var(--serif); font-style: italic; font-size: 16px; fill: #A9C2BC; }
.pond figcaption { margin-top: 0.9rem; max-width: 34rem; font-size: 1rem; color: var(--soft); }
.stages { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.3rem; counter-reset: st; }
.stages li { counter-increment: st; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.2rem 0.6rem; padding: 1rem 0 0.8rem; border-top: 1px solid var(--line); align-items: center; }
.stages li::before { content: counter(st); grid-row: 1 / 3; justify-self: center; width: 2rem; height: 2rem; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--tarn); display: flex; align-items: center; justify-content: center; font: 400 1.05rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--deep); padding: 0; }
.stages { --halo: var(--slab); --ringc: var(--tarn); }
.door .stages { --halo: var(--deep); --ringc: var(--mist); }
.stages li:nth-child(2)::before { box-shadow: 0 0 0 3px var(--halo), 0 0 0 4.5px var(--ringc); }
.stages li:nth-child(3)::before { box-shadow: 0 0 0 3px var(--halo), 0 0 0 4.5px var(--ringc), 0 0 0 7.5px var(--halo), 0 0 0 9px var(--ringc); }
.stages li:nth-child(4)::before { box-shadow: 0 0 0 3px var(--halo), 0 0 0 4.5px var(--ringc), 0 0 0 7.5px var(--halo), 0 0 0 9px var(--ringc), 0 0 0 12px var(--halo), 0 0 0 13.5px var(--ringc); }
.stages li:nth-child(5)::before { box-shadow: 0 0 0 3px var(--halo), 0 0 0 4.5px var(--ringc), 0 0 0 7.5px var(--halo), 0 0 0 9px var(--ringc), 0 0 0 12px var(--halo), 0 0 0 13.5px var(--ringc), 0 0 0 16.5px var(--halo), 0 0 0 18px var(--ringc); }
.stages strong { font: 400 1.35rem/1.2 var(--serif); }
.stages span { grid-column: 2; color: var(--soft); font-size: 1.05rem; }


/* numerals centered in the innermost circle: per-glyph correction measured from rendered pixels (rings stay fixed) */
.stages li:nth-child(1)::before { padding: 0.2381em 0 0 0.0000em; }
.stages li:nth-child(2)::before { padding: 0.2381em 0 0 0.0452em; }
.stages li:nth-child(3)::before { padding: 0.3119em 0 0 0.0452em; }
.stages li:nth-child(4)::before { padding: 0.2381em 0 0 0.0298em; }
.stages li:nth-child(5)::before { padding: 0.3274em 0 0 0.0298em; }

/* other medical harms: routing doors */
.routegrid { display: grid; gap: 1rem; margin: 1rem 0 0; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 40rem) { .routegrid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.doorlink { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 0.35rem 1rem; align-items: start; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--ivory); border: 1px solid var(--line); text-decoration: none; color: var(--char); box-shadow: 0 20px 40px -32px rgba(7, 31, 36, 0.55); }
.doorlink:hover { border-color: var(--tarn); color: var(--char); }
.doorlink strong { font: 400 1.6rem/1.15 var(--serif); color: var(--deep); }
.doorlink span { grid-column: 1; color: var(--soft); font-size: 1.05rem; }
.doorlink .glyph { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.doorlink .glyph::before { content: "\2192"; }

/* ---------- Inner pages ---------- */
.page-head { color: var(--ivory); background: radial-gradient(110% 160% at 88% 10%, #1F6A70 0%, #0E3A40 42%, #071F24 90%); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.6rem); max-width: 18ch; margin-bottom: 0.3em; }
.page-head .lede { color: #DCE7E3; }
.page-body { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-body h2 { margin-top: 2.5rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { margin: 1.6rem 0 0.4rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem); }
.unfinished { max-width: 42rem; border: 1.5px dashed var(--deep); background: var(--slab); border-radius: 18px; padding: 1rem 1.3rem 0.4rem; margin-bottom: 2.25rem; }
.unfinished h2 { font: 700 1.1rem/1.3 var(--sans); margin: 0 0 0.3rem; }
.destination { max-width: 42rem; border-radius: 22px; padding: 1.4rem 1.5rem 0.8rem; margin: 1rem 0; color: var(--ivory); background: radial-gradient(110% 130% at 85% 20%, #1F6A70 0%, #0E3A40 50%, #071F24 95%); }
.destination a:not(.btn) { color: var(--ivory); text-decoration-color: var(--mist); }
.destination .fine { color: #DCE7E3; }
.destination .btn { margin: 0.3rem 0 0.8rem; }
details.more { max-width: 42rem; border: 1px solid var(--line); background: var(--slab); border-radius: 18px; padding: 0.9rem 1.2rem; margin: 1rem 0; }
details.more summary { cursor: pointer; font-weight: 700; min-height: 2.5rem; display: flex; align-items: center; }
details.more > *:not(summary) { margin-top: 0.75rem; }
.owner-note { max-width: 42rem; margin: 1rem 0; padding: 0.9rem 1.2rem 0.3rem; border: 1.5px dashed var(--burnt); border-radius: 14px; background: var(--slab); font-size: 1rem; }

/* Sources */
.source { max-width: 46rem; padding: 1.2rem 0 0.6rem; border-top: 1px solid var(--line); }
.source h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.source dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.25rem; }
.source dt { font-weight: 700; margin-top: 0.6rem; }
.source dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .source dl { grid-template-columns: 11rem 1fr; } .source dt { margin-top: 0; } .source dd { margin-bottom: 0.6rem; } }
.plain { list-style: none; padding: 0; margin: 0; }

/* Footer */
.site-footer { background: var(--abyss); color: #DCE7E3; padding-block: 3rem calc(3rem + env(safe-area-inset-bottom)); font-size: 1.02rem; }
.site-footer a { color: var(--ivory); }
.site-footer__grid { display: grid; gap: 2rem; }
.site-footer__statements { max-width: 42rem; }
.site-footer__statements p { margin-bottom: 0.8rem; }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; }
@media (min-width: 60rem) { .site-footer__grid { grid-template-columns: 1fr auto; } .site-footer__nav ul { flex-direction: column; } }
.go-page__main { padding-block: 4rem; }
/* The /go/ page is only a fallback: the server normally redirects at once and this page is never drawn. If the hop is quick nothing readable flashes; the message appears only if it takes longer than a moment. */
.go-wait { opacity: 0; animation: go-reveal 1ms linear 1.5s forwards; }
@keyframes go-reveal { to { opacity: 1; } }


/* things inside an opened (deep water) door */
details.door[open] .split > div { border-top-color: rgba(169, 194, 188, 0.4); }
details.door[open] .lede { color: var(--ivory); }
details.door[open] .stages li { border-top-color: rgba(169, 194, 188, 0.35); }
details.door[open] .stages li::before { border-color: var(--mist); color: var(--ivory); }
details.door[open] .stages span, details.door[open] .pond figcaption, details.door[open] .quiet { color: var(--mist); }
details.door[open] .quiet a { color: var(--ivory); }
details.door[open] .pond__water { border: 1px solid rgba(169, 194, 188, 0.3); }
details.door[open] .measure ul { margin-bottom: 1em; }
.doorlink:hover .glyph { box-shadow: none; }
.doorlink .glyph { box-shadow: none; }
.routegrid .doorlink:target { outline: 3px solid var(--copper); outline-offset: 3px; }
/* the informational card (More countries coming) is not a link: no hover response, so it never looks clickable */
div.doorlink:hover { border-color: var(--line); }
/* international cards: spare height goes below the description, never between the agency name and the description, so every card spaces its lines alike */
#international .doorlink { grid-template-rows: auto auto 1fr; }
/* ...and the arrow sits on the first line of the country name however the text wraps: it is one heading line tall (equal negative margins: 1.6rem x 1.15 line height against the 2.2rem circle), so row and card heights do not change. All rem, so it holds at any text size. */
#international .doorlink .glyph { grid-row: 1; align-self: start; margin-block: calc((1.6rem * 1.15 - 2.2rem) / 2); }

/* OBSERVE IT.: recognition aid (scoped to this door) */
.harms { margin: 1.5rem 0 0; }
.harms details.sub > p, #harms-evidence > p { max-width: 44rem; }
.harms__else { border-top: 1px solid rgba(169, 194, 188, 0.32); padding: 1.1rem 0 0.4rem; }
.harms__else h4 { font: 700 1.1rem/1.3 var(--sans); margin: 0 0 0.45rem; }
.harms__else p { max-width: 44rem; }
#reported-harms .notice { margin: 1.5rem 0; }
#compensation > p { max-width: 44rem; }

/* About page: the origin story's emphasized lines (Newsreader, the site's deep teal) */
.about-pull { margin: 1.75rem 0; max-width: 34rem; color: var(--deep); font: italic 400 clamp(1.45rem, 1.1rem + 1.6vw, 2rem)/1.25 var(--serif); text-wrap: balance; }
.about-break { margin: 3rem 0; max-width: 36rem; color: var(--deep); font: 400 clamp(2rem, 1.2rem + 3vw, 3.2rem)/1.1 var(--serif); text-wrap: balance; }
.about-close { margin: 2rem 0 3rem; max-width: 34rem; font: 400 clamp(1.4rem, 1.05rem + 1.1vw, 1.75rem)/1.4 var(--serif); text-wrap: balance; }

/* Sticky mobile report bar: ivory surface, deep button, edge and shadow so it separates from any section */
.report-bar { display: none; }
@media (max-width: 47.99rem) {
  .report-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom)); background: #FBF8F0; border-top: 1px solid #7f9a94; box-shadow: 0 -10px 24px -12px rgba(7, 31, 36, 0.45); transition: transform 0.3s ease; }
  .report-bar[data-hidden] { transform: translateY(110%); }
  body.has-report-bar { padding-bottom: 5.5rem; }
  html { scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }   /* the fixed bar must never cover the element that has keyboard focus */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .go-wait { animation: go-reveal 1ms linear 1.5s forwards !important; }   /* a one-step reveal, not motion: without it the message would never show */
}

/* Print */
#print-root { display: none; }
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .emergency, .site-header, .site-footer, .report-bar, .draft-ribbon, .skip, .btn { display: none !important; }
  .print-only { display: block; font-size: 10pt; margin-bottom: 0.6rem; }
  a { color: #000; }
  .upper, .ground-mineral, .ground-water, .ground-ivory, details.door, details.door[open] { background: #fff !important; color: #000 !important; }
  .upper::before, .band { background: none !important; }
  .band::before { display: none; }
  details.door { box-shadow: none; border: 0; }
  .door__body { padding-left: 0; }
  .tier__hint, .tier__ref, .tier__note { color: #333; }
  /* Checklist print: the script adds #print-root (a copy of the checklist with every group open). Everything else is removed from the printout, not hidden, so no blank pages. */
  body.print-checklist > *:not(#print-root) { display: none !important; }
  body.print-checklist #print-root { display: block; }
  #print-root, #print-root * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  #print-root .checklist-print, #print-root .js-only { display: none !important; }
  #print-root .checklist-head { margin-top: 0; }
  #print-root details.sub { border-top: 1px solid #999; margin-top: 0.6rem; }
  #print-root details.sub > summary { display: block; padding: 0.4rem 0; font-weight: 700; break-after: avoid; }
  #print-root details.sub > summary::after { display: none; }
  #print-root .tier li { break-inside: avoid; }
  #print-root .tier__hint, #print-root .tier__ref, #print-root .tier__note, #print-root .count { color: #333 !important; }
  #print-root .count { margin: 0 0 0 0.45rem; font-weight: 400; }
}