/* Values page (the loop) and hospital structure page.
   Loaded only on those two pages, on top of styles.css, and uses its tokens.
   The base rules below are the finished, static state. Motion is added by
   site.js through .is-pending and .is-playing, and only when the visitor
   allows motion, so without JavaScript or with reduced motion everything
   simply shows. */

.values-hero { padding: 3.5rem 0 1rem; }
.values-hero .lede { margin-top: 1rem; }

/* ---------- The loop ---------- */
.flywheel { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1100px) { .flywheel { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; } }
.fw-stage { position: relative; }
.fw-ring { display: none; }

.fw-center { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.fw-heart { position: relative; width: 4rem; flex: none; }
.fw-heart svg { display: block; width: 100%; height: auto; fill: var(--sage); stroke: var(--brand); stroke-width: 1.4; }
.fw-heart img { position: absolute; left: 50%; top: 46%; width: 30%; height: auto; transform: translate(-50%, -50%); }
.fw-center h3 { font-size: 1.1rem; }
.fw-center p { font-size: 14px; margin-top: .1rem; }

.fw-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.fw-nodes > li { position: relative; }
.fw-nodes > li + li::before { content: ""; position: absolute; left: 1.65rem; top: -.9rem; height: .9rem; width: 2px; background: var(--brand); opacity: .4; }
.fw-node { width: 100%; display: flex; align-items: center; gap: .8rem; text-align: left; padding: .7rem .9rem; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; line-height: 1.25; box-shadow: var(--shadow-soft); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
button.fw-node { cursor: pointer; }
button.fw-node:hover { border-color: var(--brand); }
.fw-num { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9999px; background: var(--dark); color: var(--paper); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; }
.fw-node[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.fw-node[aria-pressed="true"] .fw-num { background: var(--paper); color: var(--brand); }

.fw-panel { background: var(--linen); border-radius: var(--radius-lg); padding: 1.75rem; min-height: 11rem; }
.fw-detail + .fw-detail { margin-top: 0; }
.fw-detail[hidden] { display: none; }
.fw-detail .fw-step { font-size: 13.5px; font-weight: 700; color: var(--secondary); margin-bottom: .3rem; }
.fw-detail h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.fw-detail p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.fw-replay { margin-top: 1rem; }

/* Ring layout from 900px up: five steps around a circle, the heart in the middle. */
@media (min-width: 900px) {
  .fw-stage { aspect-ratio: 1; max-width: 680px; margin: 0 auto; width: 100%; }
  .fw-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .fw-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; flex-direction: column; text-align: center; margin: 0; gap: .5rem; }
  .fw-heart { width: 5.5rem; }
  .fw-center h3 { font-size: 1.2rem; }
  .fw-nodes { display: block; }
  .fw-nodes > li { position: absolute; width: 27%; transform: translate(-50%, -50%); }
  .fw-nodes > li + li::before { display: none; }
  .fw-nodes > li:nth-child(1) { left: 50%; top: 13.33%; }
  .fw-nodes > li:nth-child(2) { left: 84.87%; top: 38.67%; }
  .fw-nodes > li:nth-child(3) { left: 71.55%; top: 79.67%; }
  .fw-nodes > li:nth-child(4) { left: 28.45%; top: 79.67%; }
  .fw-nodes > li:nth-child(5) { left: 15.13%; top: 38.67%; }
  /* Cards are a fixed 3:2 box (162 x 108 in the 600 unit stage) so the arrows can meet
     their edges exactly. Type and badge scale with the stage so labels stay on two lines. */
  .fw-stage { container-type: inline-size; }
  .fw-node { flex-direction: column; justify-content: center; text-align: center; aspect-ratio: 3 / 2; gap: 1.1cqw; padding: 1.5cqw; font-size: clamp(11.5px, 2.33cqw, 14px); line-height: 1.2; }
  .fw-num { width: 5cqw; height: 5cqw; font-size: clamp(11px, 2.33cqw, 14px); }
}
.fw-arc { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; transition: stroke-width .2s ease, opacity .2s ease; }
.fw-head { fill: var(--brand); opacity: .75; transition: opacity .2s ease; }
.flywheel[data-active="1"] .fw-seg-1 .fw-arc, .flywheel[data-active="2"] .fw-seg-2 .fw-arc, .flywheel[data-active="3"] .fw-seg-3 .fw-arc,
.flywheel[data-active="4"] .fw-seg-4 .fw-arc, .flywheel[data-active="5"] .fw-seg-5 .fw-arc { stroke-width: 4.5; opacity: 1; }
.flywheel[data-active="1"] .fw-seg-1 .fw-head, .flywheel[data-active="2"] .fw-seg-2 .fw-head, .flywheel[data-active="3"] .fw-seg-3 .fw-head,
.flywheel[data-active="4"] .fw-seg-4 .fw-head, .flywheel[data-active="5"] .fw-seg-5 .fw-head { opacity: 1; }

/* ---------- Two outcomes ---------- */
.outcome h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.outcome-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.outcome-list li { padding: .95rem 0; border-top: 1px solid var(--line); }
.outcome-list li:last-child { border-bottom: 1px solid var(--line); }
.outcome-list strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .15rem; }
.outcome-list span { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.outcome-pull { margin-top: 1.25rem; font-weight: 800; font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
.values-close { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; max-width: 34ch; }

/* ---------- Hospital structure ---------- */
.org-title { font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.org-md { display: flex; align-items: center; gap: .9rem; width: 100%; max-width: 28rem; margin: 0 auto; padding: 1.1rem 1.4rem; border-radius: var(--radius); background: var(--brand); color: var(--paper); box-shadow: var(--shadow-card); }
.org-md .org-icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--paper); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.org-md .org-title { color: var(--paper); font-size: 1.3rem; }
.org-md p { color: var(--paper); font-size: 14px; margin-top: .15rem; }

.org-branches { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.org-branch { position: relative; transition: opacity .2s ease; }
.org-role { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; row-gap: .1rem; align-items: center; width: 100%; text-align: left; padding: 1rem 1.1rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); color: var(--ink); font: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
button.org-role { cursor: pointer; }
button.org-role:hover { border-color: var(--brand); }
button.org-role[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-card); }
.org-role .org-icon { grid-row: span 3; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--sage); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.org-role-title { font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.org-role-sub { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }
.org-team { margin-top: .9rem; padding: 0 .35rem; }
.org-team-title { font-weight: 800; font-size: 14.5px; color: var(--ink); margin-bottom: .45rem; }
.org-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.org-team li { position: relative; padding-left: 1rem; font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.org-team li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 9999px; background: var(--brand); }
.org-legend { display: flex; align-items: center; gap: .6rem; font-size: 13.5px; color: var(--ink-soft); margin-top: 1.5rem; }
.org-legend::before { content: ""; width: 2rem; height: 2px; background: var(--brand); flex: none; }
.org-approach { background: var(--linen); border-radius: var(--radius-lg); padding: 1.75rem; }
.org-approach h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.org-approach p { font-size: 1.02rem; line-height: 1.6; }

/* On phones the four roles are a stack. With JavaScript, a role's team opens when
   the role is selected. Without it, every team is shown. */
@media (max-width: 899px) {
  .org.is-enhanced .org-branch:not(.is-active) .org-team { display: none; }
}

/* Chart layout from 900px up: stems and a bar join the Medical Director to the four roles. */
@media (min-width: 900px) {
  .org { --gap: 1rem; }
  .org-top { position: relative; padding-bottom: 2rem; }
  .org-top::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 2rem; margin-left: -1px; background: var(--brand); transform-origin: top; }
  .org-branches { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: 2rem; position: relative; }
  .org-branches::before { content: ""; position: absolute; top: 0; left: calc((100% - 3 * var(--gap)) / 8); right: calc((100% - 3 * var(--gap)) / 8); height: 2px; background: var(--brand); transform-origin: center; }
  .org-branch::before { content: ""; position: absolute; top: -2rem; left: 50%; width: 2px; height: 2rem; margin-left: -1px; background: var(--brand); transform-origin: top; transition: background-color .2s ease; }
  .org-role { grid-template-columns: 1fr; justify-items: start; row-gap: .35rem; min-height: 10.5rem; align-content: start; }
  .org-role .org-icon { grid-row: auto; }
}
/* On the chart, selecting a role puts the others in the background. On phones they
   stay fully visible, because they are what you tap next. */
@media (min-width: 900px) {
  .org[data-active] .org-branch:not(.is-active) { opacity: .45; }
  .org[data-active] .org-branch:not(.is-active)::before { background: var(--line); }
}

/* ---------- One-time entrance ---------- */
@keyframes fw-in { from { opacity: 0; translate: 0 8px; scale: .96; } }
@keyframes fw-draw { from { stroke-dashoffset: 1; } }
@keyframes fw-fade { from { opacity: 0; } }
@keyframes org-grow-y { from { scale: 1 0; } }
@keyframes org-grow-x { from { scale: 0 1; } }

/* The loop's entrance classes are only ever added by site.js: automatically when motion is
   welcome, or when the visitor presses Replay. So they apply under any motion setting. */
.flywheel.is-pending .fw-center, .flywheel.is-pending .fw-nodes > li, .flywheel.is-pending .fw-head { opacity: 0; }
.flywheel.is-pending .fw-arc { stroke-dashoffset: 1; }
.flywheel.is-playing .fw-center { animation: fw-in .5s var(--ease-out) both; }
.flywheel.is-playing .fw-nodes > li { animation: fw-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .45s + .25s); }
.flywheel.is-playing .fw-arc { animation: fw-draw .4s var(--ease-out) both; animation-delay: calc(var(--i) * .45s + .5s); }
.flywheel.is-playing .fw-head { animation: fw-fade .2s ease-out both; animation-delay: calc(var(--i) * .45s + .85s); }


@media (prefers-reduced-motion: no-preference) {
  .fw-detail:not([hidden]) { animation: fw-fade .18s ease-out; }

  .org.is-pending .org-md, .org.is-pending .org-branch > * { opacity: 0; }
  .org.is-pending .org-top::after, .org.is-pending .org-branch::before { scale: 1 0; }
  .org.is-pending .org-branches::before { scale: 0 1; }
  .org.is-playing .org-md { animation: fw-in .45s var(--ease-out) both; }
  .org.is-playing .org-top::after { animation: org-grow-y .3s var(--ease-out) .4s both; }
  .org.is-playing .org-branches::before { animation: org-grow-x .4s var(--ease-out) .65s both; }
  .org.is-playing .org-branch::before { animation: org-grow-y .25s var(--ease-out) calc(.95s + var(--i) * .07s) both; }
  .org.is-playing .org-branch > * { animation: fw-in .45s var(--ease-out) calc(1.1s + var(--i) * .07s) both; }
}

/* Windows high contrast: keep the lines and the selected state visible. */
@media (forced-colors: active) {
  .fw-arc, .fw-head { stroke: CanvasText; fill: none; }
  .fw-head { fill: CanvasText; }
  .fw-node[aria-pressed="true"], button.org-role[aria-pressed="true"] { outline: 3px solid Highlight; }
  .org-top::after, .org-branches::before, .org-branch::before { background: CanvasText; }
}

/* Printing the structure: static, one sheet, no site chrome. */
@media print {
  header.site, footer.site, .values-cta, .org-hint { display: none !important; }
  body { background: #fff; }
  section { padding: 1rem 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .org .org-team { display: block !important; }
  .org .org-branch { opacity: 1 !important; }
  .org-branches { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
  .org-branch, .org-md { break-inside: avoid; }
  .org-role, .org-md { box-shadow: none; }
}

/* ---------- Photo loop: each step has a photograph, on its node and in the panel ---------- */
.fw-node { position: relative; padding: 0; gap: 0; overflow: hidden; align-items: stretch; }
.fw-thumb { display: block; width: 5.25rem; height: 4.25rem; flex: none; object-fit: cover; }
.fw-name { flex: 1; padding: .6rem .9rem; align-self: center; }
.fw-node .fw-num { position: absolute; top: .35rem; left: .35rem; z-index: 1; width: 1.55rem; height: 1.55rem; font-size: 12.5px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.fw-node[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--brand), var(--shadow-card); }
.fw-node[aria-pressed="true"] .fw-name { color: var(--paper); }
.fw-panel { padding: 0; overflow: hidden; min-height: 0; }
.fw-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fw-detail-body { padding: 1.25rem 1.6rem 1.5rem; }
.fw-detail:not([hidden]) .fw-photo { animation: fw-photo-in .5s var(--ease-out) both; }
@keyframes fw-photo-in { from { opacity: 0; scale: 1.04; } }
@media (min-width: 900px) {
  .fw-node { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; gap: 0; text-align: center; }
  .fw-thumb { width: 100%; height: auto; flex: 1 1 0; min-height: 0; }
  .fw-name { flex: none; align-self: auto; padding: 1.2cqw 1cqw; font-size: clamp(11.5px, 2.2cqw, 14.5px); line-height: 1.15; }
  .fw-node .fw-num { top: 1.3cqw; left: 1.3cqw; width: 4.6cqw; height: 4.6cqw; font-size: clamp(10.5px, 2.1cqw, 13px); }
}
/* The loop and its photo change are the visitor's page doing what was asked, so they run under any motion setting. */
.fw-detail:not([hidden]) .fw-detail-body { animation: fw-fade .35s ease-out; }