/* EO-007 · Interactive Tumor Response Explorer
 * All module rules are scoped under .eo007 so the component can be embedded in an article page.
 * Fonts are local (SIL OFL, see assets/fonts/LICENSE-*). No CDN.
 */
@font-face { font-family: "EO Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EO Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EO Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EO Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EO Atkinson Hyperlegible"; src: url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EO Atkinson Hyperlegible"; src: url("assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EO Atkinson Hyperlegible"; src: url("assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.eo007 {
  /* --- EO brand tokens (sampled from the supplied official logo files; matches EO brand record) --- */
  --eo-deep-green: #0E3B3C;
  --eo-ivory: #F7F4EE;
  --eo-amber: #E08A4A;
  /* --- Derived functional tokens (NOT brand colours; chosen for WCAG AA, pending EO design review) --- */
  --eo-amber-ink: #8F4512;      /* amber-family text/lines on ivory: 6.3:1 */
  --eo-ink: #1B2424;            /* body text on ivory: 14.4:1 */
  --eo-muted: #485454;          /* secondary text on ivory: 7.2:1 */
  --eo-surface: #FFFDF9;
  --eo-line: #D8D1C4;
  --eo-green-tint: #E3ECEB;
  --eo-amber-tint: #FBEBDD;
  /* --- Spec mentions "iris/plum" highlights; no EO values were supplied, so none are used here. --- */
  /* --- Illustrative CT panel --- */
  --ct-bg: #050909;
  --ct-text: #EEF1EF;           /* on --ct-bg: 17.6:1 */
  --ct-caption: #C9D2D0;        /* on --ct-panel: 11.6:1 */
  --ct-panel: #101919;

  --eo-serif: "EO Source Serif 4", "Source Serif 4", Georgia, "Times New Roman", serif;
  --eo-sans: "EO Atkinson Hyperlegible", "Atkinson Hyperlegible", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --eo-radius: 14px;
  --eo-gap: clamp(16px, 2.5vw, 28px);

  font-family: var(--eo-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--eo-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.eo007 *, .eo007 *::before, .eo007 *::after { box-sizing: border-box; }
.eo007 p { margin: 0 0 0.85em; }
.eo007 strong { font-weight: 700; }
.eo007 .eo-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.eo007 [hidden] { display: none !important; }

.eo007 .eo-module {
  max-width: 1120px; margin: 0 auto;
  background: var(--eo-ivory);
  border: 1px solid var(--eo-line);
  border-radius: calc(var(--eo-radius) + 4px);
  padding: clamp(16px, 3.5vw, 40px);
  overflow-wrap: anywhere;
}

/* header */
.eo007 .eo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.eo007 .eo-logo { width: 48px; height: 48px; border-radius: 8px; flex: none; display: block; }
.eo007 .eo-kicker { margin: 0; font-size: 0.85rem; color: var(--eo-muted); letter-spacing: 0.01em; }
.eo007 .eo-title { margin: 0; font-family: var(--eo-serif); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.25; color: var(--eo-deep-green); }

/* progress */
.eo007 .eo-progress { margin: 0 0 clamp(18px, 3vw, 30px); }
.eo007 .eo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.eo007 .eo-step { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--eo-muted); line-height: 1.25; }
.eo007 .eo-step::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--eo-line); }
.eo007 .eo-step.is-done::before { background: var(--eo-deep-green); opacity: 0.55; }
.eo007 .eo-step[aria-current="step"]::before { background: var(--eo-amber); }
.eo007 .eo-step[aria-current="step"] { color: var(--eo-deep-green); font-weight: 700; }
.eo007 .eo-step-n { display: none; }
.eo007 .eo-step-label { margin: 10px 0 0; font-size: 0.9rem; font-weight: 700; color: var(--eo-deep-green); }
@media (min-width: 900px) { .eo007 .eo-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 899.98px) { .eo007 .eo-step-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* typography */
.eo007 .eo-h { font-family: var(--eo-serif); font-weight: 600; color: var(--eo-deep-green); font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.005em; }
.eo007 .eo-h:focus { outline: none; }
.eo007 .eo-h:focus-visible { outline: 3px solid var(--eo-amber-ink); outline-offset: 4px; border-radius: 4px; }
.eo007 .eo-lede { font-size: 1.1rem; max-width: 64ch; }
.eo007 h4 { font-family: var(--eo-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--eo-deep-green); margin: 0 0 0.5em; }
.eo007 .eo-muted { color: var(--eo-muted); }
.eo007 .eo-tag { display: inline-block; font-size: 0.92rem; font-weight: 700; color: var(--eo-deep-green); background: var(--eo-green-tint); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }

/* layout */
.eo007 .eo-screen { transition: opacity 180ms ease, transform 180ms ease; }
.eo007 .eo-screen.is-entering { opacity: 0; transform: translateY(6px); }
.eo007 .eo-screen-grid { display: grid; gap: var(--eo-gap); align-items: start; }
@media (min-width: 860px) {
  .eo007 .eo-s1 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .eo007 .eo-s3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eo007 .eo-s6 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.eo007 .eo-compare { display: grid; gap: var(--eo-gap); grid-template-columns: minmax(0, 1fr); margin: 20px 0 8px; }
@media (min-width: 720px) { .eo007 .eo-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* cards (screen 1) */
.eo007 .eo-cards { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.eo007 .eo-card { background: var(--eo-surface); border: 1px solid var(--eo-line); border-radius: var(--eo-radius); padding: 12px 16px; display: flex; flex-direction: column; }
.eo007 .eo-card-label { font-size: 0.9rem; color: var(--eo-muted); }
.eo007 .eo-card-val { font-family: var(--eo-serif); font-size: 1.6rem; font-weight: 600; color: var(--eo-ink); }
.eo007 .eo-card-sum { border-color: var(--eo-deep-green); border-width: 2px; background: var(--eo-green-tint); }

/* CT figure */
.eo007 .ct-figure { margin: 0; background: var(--ct-panel); border-radius: var(--eo-radius); padding: 12px 12px 10px; color: var(--ct-text); min-width: 0; }
.eo007 .ct-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-weight: 700; font-size: 1rem; padding: 2px 4px 10px; }
.eo007 .ct-sub { font-weight: 400; color: var(--ct-caption); }
.eo007 .ct-frame { border-radius: 8px; overflow: hidden; background: var(--ct-bg); }
.eo007 .ct-svg { display: block; width: 100%; height: auto; }
.eo007 .ct-frame-empty { aspect-ratio: 392 / 286; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--ct-caption); border: 2px dashed #3a4a4a; }
.eo007 .ct-frame-empty p { margin: 0; max-width: 26ch; }
.eo007 .ct-caption { font-size: 0.85rem; color: var(--ct-caption); padding: 8px 4px 0; line-height: 1.4; }
.eo007 .ct-legend { display: block; margin-top: 6px; color: var(--ct-text); font-weight: 700; }
.eo007 .ct-legend-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border: 2px dashed var(--ct-text); border-radius: 50%; font-size: 0.8rem; margin-right: 4px; }
.eo007 .eo-orient-note { font-size: 0.88rem; color: var(--eo-muted); margin: 8px 0 18px; }

/* SVG internals (units: mm; text sizes are in SVG units) */
.eo007 .ct-label { font-family: var(--eo-sans); font-weight: 700; font-size: 15px; fill: var(--ct-text); paint-order: stroke; stroke: #000; stroke-width: 4px; stroke-linejoin: round; }
.eo007 .ct-orient { font-size: 14px; }
.eo007 .ct-scale-label { font-size: 14px; font-weight: 700; }
.eo007 .ct-scale { stroke: var(--ct-text); stroke-width: 1.6; fill: none; }
.eo007 .ct-ruler { stroke: var(--eo-amber); stroke-width: 1.9; fill: none; stroke-linecap: square; }
.eo007 .ct-ruler-halo { stroke: #000; stroke-width: 4.4; fill: none; }
.eo007 .ct-lesion-body { fill: #5c5c5c; stroke: #787878; stroke-width: 1.2; }
.eo007 .ct-locator { fill: none; stroke: var(--ct-text); stroke-width: 1.3; stroke-dasharray: 2 2.2; }
.eo007 .ct-new-ring { fill: none; stroke: var(--ct-text); stroke-width: 1.8; stroke-dasharray: 4 3; }
.eo007 .ct-focus-ring { fill: none; stroke: var(--ct-text); stroke-width: 2.2; }
.eo007 .ct-lesion { transition: opacity 160ms ease; }
.eo007 .ct-lesion.is-dimmed { opacity: 0.38; }
.eo007 .ct-label-new { fill: var(--ct-text); }
.eo007 .ct-label-sub { font-weight: 400; font-style: italic; }
.eo007 .ct-new-marker { stroke: var(--ct-text); stroke-width: 1; }
.eo007 .ct-legend-note { display: block; font-weight: 400; color: var(--ct-caption); margin-top: 4px; }

@media (max-width: 560px) {
  /* larger in-figure text on phones (SVG units scale down with the panel) */
  .eo007 .ct-label { font-size: 22px; stroke-width: 5px; }
  .eo007 .ct-orient { font-size: 20px; }
  .eo007 .ct-scale-label { font-size: 20px; font-weight: 700; }
  .eo007 .ct-scale { stroke-width: 2.6; }
  .eo007 .ct-ruler { stroke-width: 2.4; }
  .eo007 .ct-ruler-halo { stroke-width: 5.4; }
  .eo007 .ct-figure { padding: 10px 8px 8px; }
  .eo007 .eo-note { padding: 12px; gap: 10px; }
}

/* buttons */
.eo007 .eo-btn {
  font: inherit; font-weight: 700; line-height: 1.25; cursor: pointer;
  min-height: 48px; min-width: 48px; padding: 11px 20px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: left;
  border: 2px solid var(--eo-deep-green); background: var(--eo-surface); color: var(--eo-deep-green);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.eo007 .eo-btn:hover { background: var(--eo-green-tint); }
.eo007 .eo-btn:focus-visible { outline: 3px solid var(--eo-amber-ink); outline-offset: 3px; }
.eo007 .eo-btn-primary { background: var(--eo-deep-green); color: var(--eo-ivory); }
.eo007 .eo-btn-primary:hover { background: #164D4E; }
.eo007 .eo-btn-lg { min-height: 54px; padding: 14px 24px; font-size: 1.05rem; }
.eo007 .eo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.eo007 .eo-actions-center { justify-content: center; }

/* toggle / choice groups */
.eo007 .eo-choices { display: grid; gap: 10px; margin: 18px 0 6px; }
.eo007 .eo-choices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .eo007 .eo-choices-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eo007 .eo-choices-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .eo007 .eo-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eo007 .eo-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.eo007 .eo-toggle { justify-content: flex-start; flex-wrap: wrap; position: relative; padding-left: 44px; min-height: 56px; }
.eo007 .eo-toggle-check { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--eo-deep-green); border-radius: 50%; background: var(--eo-surface); }
.eo007 .eo-toggle[aria-pressed="true"] { background: var(--eo-deep-green); color: var(--eo-ivory); }
.eo007 .eo-toggle[aria-pressed="true"] .eo-toggle-check { border-color: var(--eo-ivory); background: var(--eo-ivory); }
.eo007 .eo-toggle[aria-pressed="true"] .eo-toggle-check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--eo-deep-green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.eo007 .eo-toggle-code { font-family: var(--eo-serif); font-size: 1.15rem; margin-right: 6px; }
.eo007 .eo-toggle-name { font-weight: 700; }
.eo007 .eo-choices-4 .eo-toggle { flex-direction: column; align-items: flex-start; gap: 0; }
.eo007 .eo-choices-4 .eo-toggle-name { font-weight: 400; font-size: 0.95rem; }
.eo007 .eo-btn { overflow-wrap: normal; word-break: normal; }
@media (max-width: 459.98px) {
  .eo007 .eo-choices-4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .eo007 .eo-choices-4 .eo-toggle { flex-direction: row; align-items: baseline; gap: 6px; min-height: 52px; }
}

.eo007 .eo-quiz { margin: 22px 0; padding: clamp(16px, 2.5vw, 24px); background: var(--eo-surface); border: 1px solid var(--eo-line); border-radius: var(--eo-radius); }
.eo007 .eo-quiz-q { font-size: 1.25rem; }
.eo007 .eo-choices-quiz { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .eo007 .eo-choices-quiz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eo007 .eo-choice { justify-content: flex-start; align-items: flex-start; font-weight: 400; min-height: 56px; }
.eo007 .eo-choice-key { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; font-size: 0.9rem; }
.eo007 .eo-choice[aria-pressed="true"] { background: var(--eo-deep-green); color: var(--eo-ivory); }
.eo007 .eo-feedback { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin: 16px 0 8px; padding: 10px 14px; border-radius: 10px; border-left: 6px solid; }
.eo007 .eo-feedback.is-correct { border-color: var(--eo-deep-green); background: var(--eo-green-tint); color: var(--eo-deep-green); }
.eo007 .eo-feedback.is-incorrect { border-color: var(--eo-amber-ink); background: var(--eo-amber-tint); color: #5E2D0B; }
.eo007 .eo-fb-icon { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font-size: 0.9rem; }
.eo007 .eo-reveal { border-top: 1px solid var(--eo-line); padding-top: 14px; margin-top: 12px; }
.eo007 .eo-reveal-h { font-size: 1.4rem; }

/* results, tables, classification */
.eo007 .eo-result { margin: 22px 0; padding: clamp(16px, 2.5vw, 24px); background: var(--eo-surface); border: 1px solid var(--eo-line); border-radius: var(--eo-radius); }
.eo007 .eo-result-h { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
.eo007 .eo-result-grid { display: grid; gap: var(--eo-gap); }
@media (min-width: 860px) { .eo007 .eo-result-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.eo007 .eo-result-lead { font-size: 1.1rem; }
.eo007 .eo-table-wrap { max-width: 100%; }
.eo007 .eo-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 6px 0 10px; background: var(--eo-surface); }
.eo007 .eo-table caption { text-align: left; font-weight: 700; font-size: 0.92rem; color: var(--eo-muted); padding-bottom: 6px; }
.eo007 .eo-table th, .eo007 .eo-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--eo-line); vertical-align: top; }
.eo007 .eo-table thead th { font-size: 0.88rem; color: var(--eo-muted); border-bottom: 2px solid var(--eo-line); }
.eo007 .eo-table th, .eo007 .eo-table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.eo007 .eo-table td { white-space: nowrap; }
.eo007 .eo-table tr.is-sum th, .eo007 .eo-table tr.is-sum td { font-weight: 700; border-top: 2px solid var(--eo-ink); }
.eo007 .eo-table tr.is-focus th, .eo007 .eo-table tr.is-focus td { background: var(--eo-amber-tint); }
.eo007 .eo-table tr.is-focus th::before { content: "\25B8\00a0"; color: var(--eo-amber-ink); }
@media (max-width: 380px) { .eo007 .eo-table th, .eo007 .eo-table td { padding: 8px 4px; font-size: 0.9rem; } .eo007 .eo-table thead th { font-size: 0.8rem; } .eo007 .eo-table tr.is-focus th::before { content: none; } }
.eo007 .eo-change { font-size: 1.05rem; }
.eo007 .eo-sep { color: var(--eo-muted); }
.eo007 .eo-math { font-variant-numeric: tabular-nums; font-size: 1.05rem; background: var(--eo-green-tint); padding: 10px 14px; border-radius: 10px; }
.eo007 .eo-why { margin-top: 12px; }
.eo007 .eo-disclosure { display: inline-block; width: 0.55em; height: 0.55em; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin: -0.25em 4px 0 2px; transition: transform 150ms ease; }
.eo007 [aria-expanded="true"] .eo-disclosure { transform: rotate(-135deg); margin-top: 0.2em; }

.eo007 .eo-classif { margin: 4px 0 14px; display: grid; gap: 8px; }
.eo007 .eo-classif-row { display: grid; gap: 4px 14px; grid-template-columns: minmax(0, 1fr); padding: 10px 12px; border: 1px solid var(--eo-line); border-radius: 10px; background: #fff; }
@media (min-width: 520px) { .eo007 .eo-classif-row { grid-template-columns: 11.5em minmax(0, 1fr); align-items: baseline; } }
.eo007 .eo-classif-row.is-key { border: 2px solid var(--eo-deep-green); }
.eo007 .eo-classif dt { font-weight: 700; font-size: 0.92rem; color: var(--eo-muted); }
.eo007 .eo-classif dd { margin: 0; }
.eo007 .eo-badge { display: inline; font-weight: 700; color: var(--eo-ink); }
.eo007 .eo-badge-code { display: inline-block; font-family: var(--eo-serif); min-width: 2.4em; text-align: center; padding: 0 6px; border: 2px solid var(--eo-deep-green); border-radius: 6px; color: var(--eo-deep-green); margin-right: 4px; }
.eo007 .eo-badge-PD .eo-badge-code { border-style: double; border-width: 4px; border-color: var(--eo-amber-ink); color: var(--eo-amber-ink); }
.eo007 .eo-badge-pending .eo-badge-code { border-style: dashed; color: var(--eo-muted); border-color: var(--eo-muted); }
.eo007 .eo-badge-pending { font-weight: 400; color: var(--eo-muted); }
.eo007 .eo-badge-extra { display: block; font-weight: 400; font-size: 0.9rem; color: var(--eo-muted); margin-top: 2px; }
.eo007 .eo-flag { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; border: 2px dashed currentColor; border-radius: 50%; font-weight: 700; font-size: 0.85rem; }
.eo007 .eo-invariant { font-weight: 700; color: var(--eo-deep-green); background: var(--eo-green-tint); padding: 10px 14px; border-radius: 10px; }

/* notes */
.eo007 .eo-note { display: flex; gap: 12px; align-items: flex-start; background: var(--eo-surface); border: 1px solid var(--eo-line); border-left: 5px solid var(--eo-deep-green); border-radius: 10px; padding: 14px 16px; margin: 18px 0; }
.eo007 .eo-note p:last-child { margin-bottom: 0; }
.eo007 .eo-note h4 { font-size: 1.05rem; margin-bottom: 4px; }
.eo007 .eo-note-safety { border-left-color: var(--eo-amber-ink); background: var(--eo-amber-tint); }
.eo007 .eo-note-icon { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--eo-deep-green); color: var(--eo-ivory); font-family: var(--eo-serif); font-weight: 700; font-size: 0.95rem; font-style: italic; }
.eo007 .eo-note-safety .eo-note-icon { background: var(--eo-amber-ink); font-style: normal; }

/* charts */
.eo007 .eo-chart-card { background: var(--eo-surface); border: 1px solid var(--eo-line); border-radius: var(--eo-radius); padding: 12px; min-width: 0; }
.eo007 .eo-chart { display: block; width: 100%; height: auto; font-family: var(--eo-sans); }
.eo007 .ch-grid { stroke: var(--eo-line); stroke-width: 1; }
.eo007 .ch-axis { font-size: 13px; fill: var(--eo-muted); }
.eo007 .ch-x.is-future { fill: var(--eo-line); }
.eo007 .ch-ref { stroke-width: 2.2; }
.eo007 .ch-ref-base { stroke: var(--eo-deep-green); stroke-dasharray: 9 5; }
.eo007 .ch-ref-nadir { stroke: var(--eo-amber-ink); stroke-dasharray: 2 4; stroke-linecap: round; stroke-width: 2.8; }
.eo007 .ch-ref-label { font-size: 13.5px; font-weight: 700; paint-order: stroke; stroke: var(--eo-surface); stroke-width: 4px; }
.eo007 .ch-ref-label-base { fill: var(--eo-deep-green); }
.eo007 .ch-ref-label-nadir { fill: var(--eo-amber-ink); }
.eo007 .ch-line { fill: none; stroke: var(--eo-ink); stroke-width: 2.4; stroke-linejoin: round; }
.eo007 .ch-branch-a { stroke-dasharray: none; }
.eo007 .ch-branch-b { stroke-dasharray: 7 4; }
.eo007 .ch-dot { fill: var(--eo-surface); stroke: var(--eo-ink); stroke-width: 2.4; }
.eo007 .ch-dot-nadir { fill: var(--eo-amber-ink); stroke: var(--eo-amber-ink); }
.eo007 .ch-pt.is-current .ch-dot { fill: var(--eo-ink); }
.eo007 .ch-val { font-size: 14px; font-weight: 700; fill: var(--eo-ink); paint-order: stroke; stroke: var(--eo-surface); stroke-width: 4px; }
.eo007 .ch-badge { font-size: 13px; font-weight: 700; fill: var(--eo-amber-ink); }
.eo007 .eo-chart-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 0.88rem; color: var(--eo-muted); margin: 8px 4px 0; }
.eo007 .key-item { white-space: nowrap; }
/* compact chart geometry (narrow screens): same data, narrower viewBox, larger type */
.eo007 .eo-chart.is-compact .ch-axis { font-size: 15px; }
.eo007 .eo-chart.is-compact .ch-val { font-size: 17px; }
.eo007 .eo-chart.is-compact .ch-ref-label { font-size: 15.5px; }
.eo007 .eo-chart.is-compact .ch-badge { font-size: 15px; }
@media (max-width: 560px) { .eo007 .eo-chart-card { padding: 8px 6px; } }
.eo007 .key { display: inline-block; width: 26px; height: 0; border-top: 3px dashed var(--eo-deep-green); margin-right: 6px; vertical-align: middle; }
.eo007 .key-nadir { border-top: 3px dotted var(--eo-amber-ink); }

/* timeline */
.eo007 .eo-timeline { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.eo007 .eo-tl-item { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--eo-line); border-radius: 10px; background: var(--eo-surface); }
.eo007 .eo-tl-item.is-current { border: 2px solid var(--eo-deep-green); }
.eo007 .eo-tl-phase { font-weight: 700; color: var(--eo-deep-green); font-size: 0.95rem; }
.eo007 .eo-tl-sum { font-variant-numeric: tabular-nums; }
.eo007 .eo-tl-delta { font-size: 0.92rem; color: var(--eo-muted); }
.eo007 .eo-tl-status { margin-top: 4px; font-size: 0.95rem; }

/* screen 6 branches */
.eo007 .eo-card-block { background: var(--eo-surface); border: 1px solid var(--eo-line); border-radius: var(--eo-radius); padding: 14px 16px; margin-bottom: 14px; }
.eo007 .eo-card-block p:last-child { margin-bottom: 0; }
.eo007 .eo-branch { border-width: 2px; }
.eo007 .eo-branch-a { border-color: var(--eo-ink); }
.eo007 .eo-branch-b { border-color: var(--eo-ink); border-style: dashed; }
.eo007 .eo-s6 .eo-choices-2 { margin-bottom: 14px; }
@media (max-width: 430px) { .eo007 .eo-choices-2 { grid-template-columns: minmax(0, 1fr); } }

/* final */
.eo007 .eo-final { text-align: center; padding: clamp(20px, 6vw, 64px) 0 clamp(8px, 2vw, 16px); max-width: 760px; margin: 0 auto; }
.eo007 .eo-hero { font-size: clamp(1.75rem, 4.6vw, 2.9rem); }
.eo007 .eo-final .eo-lede { margin-left: auto; margin-right: auto; }
.eo007 .eo-endmark { display: flex; justify-content: center; margin-top: 28px; }
/* Feather end-mark slot: awaiting the approved official EO feather artwork (not drawn here). */
.eo007 .eo-endmark { flex-direction: column; align-items: center; gap: 8px; }
.eo007 .eo-endmark-rule { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--eo-amber); }
.eo007 .eo-endmark-qa { display: none; font-size: 0.8rem; color: var(--eo-muted); border: 1px dashed var(--eo-muted); border-radius: 6px; padding: 4px 10px; }
.eo007.is-qa .eo-endmark-qa { display: block; }

/* nav + footer */
.eo007 .eo-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--eo-line); }
.eo007 .eo-nav .eo-btn { min-width: 120px; }
.eo007 .eo-foot { margin-top: 22px; font-size: 0.92rem; color: var(--eo-muted); }
.eo007 .eo-disclaimer { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--eo-ink); }
.eo007 .eo-disclaimer:focus { outline: 3px solid var(--eo-amber-ink); outline-offset: 3px; }
.eo007 .eo-sources summary { cursor: pointer; font-weight: 700; color: var(--eo-deep-green); min-height: 44px; display: flex; align-items: center; }
.eo007 .eo-sources summary:focus-visible { outline: 3px solid var(--eo-amber-ink); outline-offset: 2px; }
.eo007 .eo-sources ol { padding-left: 1.3em; }
.eo007 .eo-sources li { margin-bottom: 6px; }
.eo007 .eo-sources a { color: var(--eo-deep-green); font-weight: 700; display: inline-block; min-height: 24px; }
.eo007 .eo-sources a:focus-visible { outline: 3px solid var(--eo-amber-ink); outline-offset: 2px; }

.eo007 .eo-validation { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; }
.eo007 .eo-validation.is-failed { background: #FDE8E8; border: 2px solid #8A1C1C; color: #5C0F0F; }
.eo007 .eo-validation.is-qa { background: var(--eo-green-tint); border: 1px dashed var(--eo-deep-green); }
.eo007 .eo-validation ul { margin: 8px 0 0; padding-left: 1.2em; max-height: 260px; overflow: auto; }
.eo007 .eo-noscript { padding: 16px; border: 1px solid var(--eo-line); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .eo007 *, .eo007 *::before, .eo007 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .eo007 .eo-toggle[aria-pressed="true"], .eo007 .eo-choice[aria-pressed="true"] { outline: 3px solid Highlight; }
}

/* ---------- preview page only (not part of the module) ---------- */
.eo-preview { margin: 0; background: #ECE8E0; color: #1B2424; font-family: "EO Atkinson Hyperlegible", system-ui, sans-serif; }
.eo-preview-bar { background: #0E3B3C; color: #F7F4EE; padding: 10px 16px; font-size: 0.9rem; }
.eo-preview-bar p { margin: 0; max-width: 1120px; margin: 0 auto; }
.eo-preview-main { padding: 24px 12px 64px; }
.eo-preview-h1 { font-family: "EO Source Serif 4", Georgia, serif; font-weight: 600; color: #0E3B3C; max-width: 1120px; margin: 0 auto 8px; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; }
.eo-preview-note, .eo-preview-continue p { max-width: 1120px; margin: 0 auto 20px; color: #485454; font-style: italic; }
.eo-preview-continue { margin-top: 28px; }
.eo-preview-continue:focus { outline: 3px solid #8F4512; outline-offset: 4px; }
@media (max-width: 480px) { .eo-preview-main { padding: 16px 8px 48px; } }