/* Who Uses STPA in Medical Devices. Ported from the old page's own hand-written HTML.
   Since 2026-11-04 it uses the site's banner (.page-hero), section backgrounds
   (.section-tint / .section-white), and the site's colors, type and card look, so it
   reads as part of the site: no monospace labels, no amber accent, no check-mark
   bullets. The page's own blocks (adopter cards, the Radixact feature, reference
   lists, rosters, findings, closing box) are styled here, all under .ev-page. */

/* Banner: title wraps evenly; the lede is wider than the site default. */
.page-hero:has(.ev-hero-lede) h1 { text-wrap: balance; }
.page-hero .ev-hero-lede { max-width: 820px; font-size: 19px; text-wrap: balance; }

.ev-page {
  --heading: var(--navy-text);
  --link: var(--steel);
  --border: var(--line);
  --r: 12px;
  --r-lg: var(--radius);
  --r-xl: 20px;
  --on-dark-text: rgb(255 255 255 / 78%);
  --on-dark-muted: rgb(255 255 255 / 62%);
  --on-dark-label: #8fc0f2;
}

/* ---- scoped reset ---- */
.ev-page h2, .ev-page h3, .ev-page h4,
.ev-page p, .ev-page ul, .ev-page ol { margin: 0; padding: 0; }
.ev-page h2, .ev-page h3, .ev-page h4 { font-family: var(--font-head); color: var(--heading); font-weight: 700; }
.ev-page strong { color: var(--heading); font-weight: 600; }
.ev-page svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- layout primitives ---- */
.ev-page .ev-inner { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ev-page .ev-section { padding-block: 112px; }
/* First section after the banner: the banner's own padding already separates them (as site.css does for .page-hero + .section). */
.page-hero + .ev-page > .ev-section:first-of-type { padding-top: 64px; }
.ev-page .ev-stack { display: flex; flex-direction: column; gap: 24px; }
.ev-page .ev-stack.loose { gap: 48px; }

/* Section heading: centered, as .section-head is everywhere else. */
.ev-page .ev-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-inline: auto; text-align: center; }
.ev-page .ev-head h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.ev-page .ev-head p { font-size: 20px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.ev-page .ev-head a { white-space: nowrap; }

/* The site's eyebrow (Inter, 14px, semibold, uppercase, steel). */
.ev-page .ev-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-text); }

/* Sub-heading inside a section (Radiation Oncology Thread). */
.ev-page .ev-subhead { display: flex; flex-direction: column; gap: 8px; max-width: 820px; padding-top: 8px; }
.ev-page .ev-subhead h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.015em; }
.ev-page .ev-subhead p { font-size: 17px; color: var(--text); }

/* ---- source links: small steel pills, in the site's body font ---- */
.ev-page .ev-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ev-page .ev-src {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--steel-text);
  background: var(--steel-soft); border-radius: 999px; padding: 7px 14px;
  transition: background-color .18s ease, color .18s ease;
}
.ev-page a.ev-src:hover, .ev-page a.ev-src:focus-visible { background: var(--navy-btn); color: #fff; }
.ev-page .ev-src.is-plain { color: var(--text); background: var(--bg-tint); border: 1px solid var(--line); }
.ev-page .ev-src svg { width: 14px; height: 14px; flex: none; }

/* ---- adopter cards ---- */
.ev-page .ev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ev-page .ev-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.ev-page .ev-card-top { display: flex; align-items: center; gap: 16px; }
.ev-page .ev-badge { width: 52px; height: 52px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--steel-soft); color: var(--steel); }
.ev-page .ev-badge svg { width: 26px; height: 26px; }
.ev-page .ev-card-name { display: flex; flex-direction: column; gap: 2px; }
.ev-page .ev-card-name h3 { font-size: 20px; line-height: 1.25; }
.ev-page .ev-kicker { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--steel-text); }
.ev-page .ev-card p { font-size: 16px; line-height: 1.6; color: var(--text); }

/* tooling and standards: their own section, four cards in a row */
.ev-page .ev-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ev-page .ev-tool { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ev-page .ev-tool h3 { font-size: 20px; line-height: 1.25; }
.ev-page .ev-tool p { font-size: 16px; line-height: 1.55; color: var(--text); }
.ev-page .ev-tool .ev-src { margin-top: auto; align-self: flex-start; }

/* ---- featured Radixact analysis (the page's one navy panel besides the closing box) ---- */
.ev-page .ev-feature {
  background: linear-gradient(135deg, #1a2b4b 0%, #1d3768 50%, #1a2b4b 100%);
  border-radius: var(--r-xl); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 24px;
}
.ev-page .ev-feature .ev-eyebrow { color: var(--on-dark-label); }
.ev-page .ev-feature h3 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.015em; }
.ev-page .ev-feature p { color: var(--on-dark-text); font-size: 17px; line-height: 1.65; max-width: 70ch; }
.ev-page .ev-funnel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.ev-page .ev-node { flex: 1 1 130px; min-width: 120px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ev-page .ev-node:last-child { background: rgb(72 146 220 / 26%); border-color: rgb(143 192 242 / 55%); }
.ev-page .ev-node .n { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); color: #fff; line-height: 1; }
.ev-page .ev-node .l { font-size: 15px; color: var(--on-dark-text); line-height: 1.35; }
.ev-page .ev-node:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 2px; background: rgb(143 192 242 / 50%); }
/* What the analysis found, after the numbers: the card's punchline. */
.ev-page .ev-feature p.ev-feature-lead { font-size: 19px; line-height: 1.6; color: #fff; max-width: 75ch; padding-top: 8px; }
.ev-page .ev-feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ev-page .ev-feature-cols > div { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ev-page .ev-feature h4 { color: #fff; font-size: 20px; line-height: 1.25; }
.ev-page .ev-feature-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.ev-page .ev-feature-list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--on-dark-text); }
.ev-page .ev-feature-list li::before { content: ""; position: absolute; left: 3px; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-label); }
.ev-page .ev-feature-cols p { font-size: 16px; line-height: 1.55; }
.ev-page .ev-feature p.ev-feature-note { font-size: 16px; color: var(--on-dark-text); }
.ev-page .ev-feature .ev-src, .ev-page .ev-close .ev-src { background: rgb(255 255 255 / 10%); color: #fff; }
.ev-page .ev-feature a.ev-src:hover, .ev-page .ev-close a.ev-src:hover { background: #fff; color: var(--navy-bg); }

/* secondary device cards */
.ev-page .ev-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ev-page .ev-device { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ev-page .ev-device h4 { font-size: 20px; line-height: 1.25; }
.ev-page .ev-device .ev-kicker { order: -1; }
.ev-page .ev-device p { font-size: 16px; line-height: 1.6; color: var(--text); }

/* ---- reference lists ---- */
.ev-page .ev-refs { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ev-page .ev-ref { padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; }
.ev-page .ev-ref:nth-child(even) { border-left: 1px solid var(--line); }
.ev-page .ev-ref:nth-child(n+3) { border-top: 1px solid var(--line); }
/* An odd last entry centers at one-column width instead of leaving an empty cell. */
.ev-page .ev-refs > .ev-ref:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 50%; }
.ev-page .ev-ref-no { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--steel-text); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; }
.ev-page .ev-ref-body { display: flex; flex-direction: column; gap: 6px; }
.ev-page .ev-ref-body .t { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--heading); }
.ev-page .ev-ref-body .d { font-size: 16px; line-height: 1.6; color: var(--text); }
.ev-page .ev-ref-body .m { font-size: 14px; line-height: 1.45; color: var(--text); opacity: .9; }
.ev-page .ev-ref-body a { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 14px; font-weight: 600; text-decoration: none; }
.ev-page .ev-ref-body a:hover { text-decoration: underline; }
.ev-page .ev-ref-body a svg { width: 14px; height: 14px; }

/* ---- rosters of organization names ---- */
.ev-page .ev-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ev-page .ev-roster-col { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.ev-page .ev-roster-head { display: flex; align-items: center; gap: 12px; }
.ev-page .ev-roster-head svg { width: 22px; height: 22px; color: var(--steel); flex: none; }
.ev-page .ev-roster-head h3 { font-size: 19px; line-height: 1.25; }
.ev-page .ev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-page .ev-chip { font-size: 14px; color: var(--navy-text); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; line-height: 1.3; }

/* ---- findings: plain bullets, two columns ---- */
.ev-page .ev-findings { display: flex; flex-direction: column; gap: 40px; }
.ev-page .ev-findings-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 48px; max-width: 1040px; margin-inline: auto; list-style: none; }
.ev-page .ev-findings-list li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.6; color: var(--text); }
.ev-page .ev-findings-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: #9aa8bb; }

/* ---- closing box ---- */
.ev-page .ev-close {
  background: linear-gradient(135deg, #1a2b4b 0%, #1d3768 50%, #1a2b4b 100%);
  border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.ev-page .ev-close .ev-eyebrow { color: var(--on-dark-label); }
.ev-page .ev-close h2 { color: #fff; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.ev-page .ev-close p { color: var(--on-dark-text); font-size: 18px; line-height: 1.6; max-width: 66ch; }
.ev-page .ev-close .ev-sources { justify-content: center; padding-top: 6px; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .ev-page .ev-devices, .ev-page .ev-roster, .ev-page .ev-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .page-hero .ev-hero-lede { font-size: 17px; }
  .ev-page .ev-section { padding-block: 48px; }
  .page-hero + .ev-page > .ev-section:first-of-type { padding-top: 32px; }
  .ev-page .ev-stack.loose { gap: 28px; }
  .ev-page .ev-head p { font-size: 17px; }
  .ev-page .ev-grid, .ev-page .ev-refs, .ev-page .ev-tools, .ev-page .ev-findings-list,
  .ev-page .ev-devices, .ev-page .ev-roster { grid-template-columns: 1fr; gap: 16px; }
  .ev-page .ev-card, .ev-page .ev-device, .ev-page .ev-roster-col, .ev-page .ev-tool, .ev-page .ev-feature-cols > div { padding: 22px 20px; }
  .ev-page .ev-feature-cols { grid-template-columns: 1fr; gap: 16px; }
  .ev-page .ev-feature p.ev-feature-lead { font-size: 17px; }
  .ev-page .ev-ref { padding: 20px; }
  .ev-page .ev-ref:nth-child(even) { border-left: none; }
  .ev-page .ev-ref:nth-child(2) { border-top: 1px solid var(--line); }
  .ev-page .ev-refs > .ev-ref:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
  .ev-page .ev-node:not(:last-child)::after { display: none; }
  .ev-page .ev-findings { gap: 24px; }
  .ev-page .ev-findings-list li { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-page * { transition: none !important; }
}

.ev-page .ev-nowrap { white-space: nowrap; }
.ev-page .ev-feature p { text-wrap: pretty; }

/* ---- Page Overview, part labels and rail (2026-11-04) ----
   The overview and rail borrow STPA in Depth's markup and script (about-stamp.css, site.js
   [data-path]). The parts are .ev-section, not .as-part, so these rules redo what site.css
   and about-stamp.css do for .as-part. */
.ev-page .ev-head .ev-eyebrow { margin-bottom: -4px; }
section[aria-labelledby="overview-title"] + .ev-page.as-path > .ev-section:first-of-type { padding-top: 64px; }
.ev-page .as-rail-title { margin: 0 0 12px; }
@media (min-width: 1280px) {
  /* Room on the left for the rail, as on STPA in Depth. */
  .ev-page.as-path .ev-section > .ev-inner { padding-left: calc(var(--gutter) + 250px); }
  .ev-page .ev-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1279.98px) {
  .ev-page.as-path [id] { scroll-margin-top: 52px; }
}
@media (max-width: 760px) {
  section[aria-labelledby="overview-title"] + .ev-page.as-path > .ev-section:first-of-type { padding-top: 32px; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .ev-page { --on-dark-text: rgb(255 255 255 / 78%); --on-dark-muted: rgb(17 22 32 / 62%); --on-dark-label: #33506d; }
  .ev-page a.ev-src:hover, .ev-page a.ev-src:focus-visible { color: #ffffff; }
  .ev-page .ev-card { background-color: #111620; }
  .ev-page .ev-badge { color: #7ebaf9; }
  .ev-page .ev-tool { background-color: #111620; }
  .ev-page .ev-feature .ev-eyebrow { color: #8fc0f2; }
  .ev-page .ev-feature h3 { color: #ffffff; }
  .ev-page .ev-node { background-color: rgb(17 22 32 / 6%); border-color: rgb(42 49 60 / 14%); }
  .ev-page .ev-node:last-child { background-color: rgb(72 146 220 / 26%); border-color: rgb(51 75 99 / 55%); }
  .ev-page .ev-node .n { color: #ffffff; }
  .ev-page .ev-node:not(:last-child)::after { background-color: rgb(51 80 109 / 50%); }
  .ev-page .ev-feature p.ev-feature-lead { color: #ffffff; }
  .ev-page .ev-feature-cols > div { background-color: rgb(17 22 32 / 6%); border-color: rgb(42 49 60 / 14%); }
  .ev-page .ev-feature h4 { color: #ffffff; }
  .ev-page .ev-feature .ev-src, .ev-page .ev-close .ev-src { background-color: rgb(17 22 32 / 10%); color: #ffffff; }
  .ev-page .ev-feature a.ev-src:hover, .ev-page .ev-close a.ev-src:hover { background-color: #111620; color: #c3dbff; }
  .ev-page .ev-device { background-color: #111620; }
  .ev-page .ev-refs { background-color: #111620; }
  .ev-page .ev-ref-no { background-color: #2f6fb5; color: #ffffff; }
  .ev-page .ev-roster-col { background-color: #111620; }
  .ev-page .ev-findings-list li::before { background-color: #454e5a; }
  .ev-page .ev-close .ev-eyebrow { color: #8fc0f2; }
  .ev-page .ev-close h2 { color: #ffffff; }
}