/* about/positions.css: "His work now", the positions section of about.html. Owned by positions.
   Builds on home/base.css (tokens, .h-btn, .h-dark, arrival). Every rule is scoped to
   .a-positions-section; new names start a-positions-.

   What it is
   - One navy tile for the clinical role (the operating room photograph inside it, the patient door:
     the phone, second opinion, consultation), then six role rows. Every row is one door, labelled
     with the person it serves.
   - The only spine diagram on the site: a lateral cervical spine, seven vertebrae, one per role, on
     a sticky rail beside the roles (tablet and desktop; phones get the list at full width). Each
     vertebra seats into the column (rising a few units, its disc taking the load) as its role
     crosses the reading line. Scroll linked, linear, reversible. No labels and no caption: the
     drawing claims nothing, it marks where you are in the list.
   - Coupled both ways: point at or focus a role and its vertebra lights; point at a vertebra and
     its role's title marks; press a vertebra and its role comes forward as a raised sheet.

   MOTION RULE (base): nothing loops, nothing counts. Reduced motion: the column is complete, the
   coupling is instant. */

/* ── SECTION ────────────────────────────────────────────────────────────── */
.a-positions-section {
  --a-positions-gut: max(20px, calc((100% - 1200px) / 2));
  --a-positions-top: 104px;                 /* the sticky rail sits under the nav island */
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 128px var(--a-positions-gut) 96px;
  overflow-x: clip;                         /* clip, never hidden: hidden would kill the sticky rail */
}
.a-positions-inner { max-width: 1200px; margin: 0 auto; }

.a-positions-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.a-positions-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.a-positions-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── GRID: the rail beside the clinical tile and the rows ───────────────── */
.a-positions-grid {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  grid-template-areas:
    "rail chief"
    "rail roles";
  column-gap: clamp(2rem, 4vw, 4rem);
}
.a-positions-rail {
  grid-area: rail;
  position: sticky;
  top: var(--a-positions-top);
  align-self: start;
  padding-top: 0.25rem;
}
.a-positions-chief-wrap { grid-area: chief; min-width: 0; }
/* the bottom margin keeps the rail pinned while the last vertebra seats */
.a-positions-roles { grid-area: roles; list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 72px; padding: 0; min-width: 0; }

/* ── THE FIGURE ─────────────────────────────────────────────────────────── */
.a-positions-fig { margin: 0; }
.a-positions-plate { position: relative; width: 232px; }
.a-positions-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The underdrawing: every outline in pencil, so an empty column already reads as a figure. */
.a-positions-ghost path {
  fill: none;
  stroke: rgba(11, 15, 46, 0.15);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* The end of the build: all seven seated, the pencil clears and the drawing stands finished. */
.a-positions-ghost { transition: opacity var(--h-t-content) var(--h-ease); }
.a-positions-done .a-positions-ghost { opacity: 0; }
/* A level: bone in front, the posterior elements a tone back, the disc grey. --a-positions-p is
   0 (not seated) to 1 (seated); --a-positions-q is the disc's brief squash as the level lands. */
.a-positions-lvl {
  --a-positions-p: 1;
  --a-positions-q: 0;
  /* it rises about 7mm and turns about 5 degrees into the curve of the neck, pivoting on its body */
  transform-box: fill-box;
  transform-origin: 76% 52%;
  transform: translateY(calc((1 - var(--a-positions-p)) * 7px)) rotate(calc((1 - var(--a-positions-p)) * 5deg));
  opacity: clamp(0, calc(var(--a-positions-p) * 1.3 - 0.15), 1);
}
.a-positions-bone path,
.a-positions-post path {
  stroke: rgba(11, 15, 46, 0.78);
  stroke-width: 1.15;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--h-t) var(--h-ease-out), stroke var(--h-t) var(--h-ease-out);
}
.a-positions-bone path { fill: #fff; }
.a-positions-post path { fill: #E9EAF0; }
.a-positions-cancel path { fill: url(#a-positions-stip); stroke: none; }
#a-positions-stip circle { fill: rgba(11, 15, 46, 0.2); }
#a-positions-stip2 circle { fill: rgba(11, 15, 46, 0.2); }
.a-positions-trace path {
  fill: none;
  stroke: rgba(11, 15, 46, 0.3);
  stroke-width: 0.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--h-t) var(--h-ease-out);
}
.a-positions-disc {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(calc(1 - var(--a-positions-q) * 0.16));
}
.a-positions-disc path { fill: rgba(11, 15, 46, 0.07); stroke: rgba(11, 15, 46, 0.4); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.a-positions-disc ellipse { fill: rgba(11, 15, 46, 0.05); }

/* Shown: pointed at or pressed, so it stands in place at once even if the build has not reached it.
   The transition lives on this state only, so the scroll scrub itself never trails the wheel. */
.a-positions-lvl.is-shown {
  transform: none;
  opacity: 1;
  transition: transform var(--h-t-content) var(--h-ease-sheet), opacity var(--h-t) var(--h-ease-out);
}
/* Lit: the role you are reading, pointing at or focused on. */
.a-positions-lvl.is-lit .a-positions-bone path { fill: var(--teal-light); stroke: var(--teal-2); }
.a-positions-lvl.is-lit .a-positions-post path { fill: #CDE9FB; stroke: var(--teal-2); }
.a-positions-lvl.is-lit .a-positions-trace path { stroke: rgba(2, 132, 199, 0.5); }

/* The keys: one button per level band over the drawing (spine.py writes the bands). */
.a-positions-keys { position: absolute; inset: 0; }
.a-positions-keys[hidden] { display: none; }
.a-positions-key {
  position: absolute;
  left: -6px; right: -6px;
  top: var(--a-positions-t);
  height: var(--a-positions-h);
  margin: 0; padding: 0;
  border: 0;
  border-radius: var(--h-r-ctl);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.a-positions-key:focus-visible { outline: 2px solid var(--h-focus); outline-offset: -2px; }

/* ── THE CLINICAL TILE (navy, the one dark moment of this chapter) ────── */
.a-positions-chief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  min-height: 460px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--h-r-box);
  overflow: clip;
  box-shadow: 0 1px 2px rgba(11, 15, 46, 0.25), 0 22px 48px -22px rgba(11, 15, 46, 0.55);
  transition: translate var(--h-t-sheet) var(--h-ease-sheet), box-shadow var(--h-t-sheet) var(--h-ease-sheet);
}
.a-positions-chief:focus { outline: none; }
.a-positions-chief:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 4px; }
.a-positions-chief__copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: clamp(2rem, 3.4vw, 2.75rem);
}
.a-positions-chief__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.1vw, 2.85rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.a-positions-chief__place {
  margin: 0.7rem 0 2rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}
.a-positions-chief__patients {
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.a-positions-chief__lead {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
}
.a-positions-chief__scope {
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

/* The phone: one link. Large type on desktop, a full width pill on phones. */
.a-positions-call {
  position: relative;
  display: inline-grid;
  justify-items: start;
  margin: 1.3rem 0 0;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.a-positions-call::before { content: ''; position: absolute; inset: -8px -10px; }     /* a 44px target */
.a-positions-call__k { font-family: var(--sans); font-size: 0.875rem; line-height: 1.3; color: rgba(255, 255, 255, 0.74); }
.a-positions-call__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat,
              linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size var(--h-t-content) var(--h-ease-sheet);
}
@media (hover: hover) and (pointer: fine) {
  .a-positions-call:hover .a-positions-call__n { background-size: 100% 1.5px, 100% 1.5px; }
}
.a-positions-call:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 6px; }
.a-positions-call:active { opacity: 0.75; }

.a-positions-chief__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.a-positions-chief__media { position: relative; min-height: 100%; background: #070A22; }
.a-positions-chief__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% 38%;
}
/* The photograph joins the navy at its left edge instead of meeting it at a seam. */
.a-positions-chief__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(11, 15, 46, 0.55) 16%, rgba(11, 15, 46, 0) 42%);
  pointer-events: none;
}

/* ── THE ROLE ROWS ──────────────────────────────────────────────────────── */
.a-positions-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "title door" "place door";
  column-gap: 2rem;
  align-items: center;
  padding: 1.6rem 1.5rem;
  border-radius: var(--h-r-box);
  transition:
    background-color var(--h-t-sheet) var(--h-ease-sheet),
    box-shadow var(--h-t-sheet) var(--h-ease-sheet),
    translate var(--h-t-sheet) var(--h-ease-sheet),
    scale var(--h-spring-dur) var(--h-spring);
}
.a-positions-row::before {                   /* the hairline between rows, inside the row's padding */
  content: '';
  position: absolute; top: 0; left: 1.5rem; right: 1.5rem;
  height: 1px;
  background: rgba(11, 15, 46, 0.1);
  transition: opacity var(--h-t) var(--h-ease-out);
}
.a-positions-row:first-child::before { display: none; }
.a-positions-row__title {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--h-t) var(--h-ease-out);
}
.a-positions-row__place {
  grid-area: place;
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-2);
}
.a-positions-door {
  grid-area: door;
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.a-positions-door::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }   /* the whole row is the door */
.a-positions-door:focus-visible { outline: none; }
.a-positions-row:has(.a-positions-door:focus-visible) { outline: 2px solid var(--h-focus); outline-offset: 2px; }
/* Ink, with the sky only on the arrow and the drawn underline: --teal-2 on this grey is 3.7:1,
   short of 4.5:1 for text this size. */
.a-positions-door__to {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink);
  background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0% 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--h-t-content) var(--h-ease-sheet);
}
.a-positions-nb { white-space: nowrap; }
.a-positions-door__arrow {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--teal-2);
  transition: translate var(--h-spring-dur) var(--h-spring);
}

@media (hover: hover) and (pointer: fine) {
  .a-positions-row:hover .a-positions-door__to { background-size: 100% 2px; }
  .a-positions-row:hover .a-positions-door__arrow { translate: 4px 0; }
}
.a-positions-row:has(.a-positions-door:active) { scale: 0.99; transition-duration: var(--h-t-sheet), var(--h-t-sheet), var(--h-t-sheet), var(--h-t-press); }

/* A vertebra is pointed at: its role's title marks itself, wherever it is on the page. */
.a-positions-row.a-positions-hint .a-positions-row__title { text-decoration-color: var(--teal); }
.a-positions-chief.a-positions-hint { box-shadow: 0 0 0 2px var(--teal), 0 22px 48px -22px rgba(11, 15, 46, 0.55); }

/* A vertebra is pressed: its role comes forward as a raised white sheet. */
.a-positions-row.is-forward {
  background: #fff;
  box-shadow: var(--h-hairline), var(--h-shadow-2);
  translate: 0 -3px;
}
.a-positions-row.is-forward::before,
.a-positions-row.is-forward + .a-positions-row::before { opacity: 0; }
.a-positions-chief.is-forward {
  translate: 0 -4px;
  box-shadow: 0 2px 6px rgba(11, 15, 46, 0.25), 0 34px 70px -26px rgba(11, 15, 46, 0.65);
}

/* ── TABLET AND PHONE ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .a-positions-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .a-positions-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .a-positions-plate { width: 180px; }
  .a-positions-chief { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .a-positions-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "place" "door"; }
  .a-positions-door { margin-top: 0.9rem; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  /* the tile stacks: the operating room above, the patient door below at a comfortable measure */
  .a-positions-chief { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .a-positions-chief__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
  .a-positions-chief__media::after { background: linear-gradient(0deg, var(--navy) 0%, rgba(11, 15, 46, 0.4) 16%, rgba(11, 15, 46, 0) 42%); }
  .a-positions-chief__copy { margin-top: -1.5rem; }
}

/* ── THE PHONE STRIP: the same bodies on their side, pinned under the heading ── */
.a-positions-strip { display: none; }

@media (max-width: 760px) {
  .a-positions-section { --a-positions-top: 74px; padding-block: 80px; }
  /* The strip floats over the list once it pins, so it is the frosted control material. */
  .a-positions-strip {
    display: block;
    position: sticky;
    top: var(--a-positions-top);
    z-index: 3;
    margin: 0 0 1.25rem;
    padding: 5px 12px;
    border-radius: var(--h-r-box);
    --hg-tint: rgba(255, 255, 255, 0.86);
    --hg-tint-hover: rgba(255, 255, 255, 0.92);
  }
  .a-positions-band { position: relative; }
  .a-positions-svg--strip { width: 100%; }
  /* on its side a level slides in along the column from the right and seats against the one before */
  .a-positions-strip .a-positions-lvl { transform-origin: 50% 50%; transform: translateX(calc((1 - var(--a-positions-p)) * 6px)); }
  .a-positions-strip .a-positions-lvl.is-shown { transform: none; }
  .a-positions-strip .a-positions-disc { transform-origin: 0% 50%; transform: scaleX(calc(1 - var(--a-positions-q) * 0.16)); }
  .a-positions-strip .a-positions-cancel path { fill: url(#a-positions-stip2); }
  /* one key per vertebra, at least 44px wide, centred on it; the end keys reach the strip's edges */
  .a-positions-key--x {
    top: -5px; bottom: -5px; height: auto; right: auto;
    left: calc(var(--a-positions-l) + var(--a-positions-w) / 2);
    width: max(44px, var(--a-positions-w));
    translate: -50% 0;
  }
  .a-positions-key--x[data-a-positions-v="1"] { left: -12px; translate: none; width: calc(max(44px, var(--a-positions-w)) + 12px); }
  .a-positions-key--x[data-a-positions-v="7"] { left: auto; right: -12px; translate: none; width: calc(max(44px, var(--a-positions-w)) + 12px); }

  /* Phones: no side spine. A rail narrow enough to leave the roles room would clip the drawing
     and squeeze the text, so the tile and the list run full width and the figure steps aside. */
  .a-positions-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chief" "roles"; }
  .a-positions-rail { display: none; }
  .a-positions-roles { margin: 1rem 0 24px; }
  .a-positions-row { padding: 1.25rem 0.75rem 1.35rem; border-radius: var(--h-r-ctl); }
  .a-positions-row::before { left: 0.75rem; right: 0.75rem; }
  .a-positions-door { margin-top: 0.7rem; }
  .a-positions-door__to { font-size: 1rem; }

  .a-positions-chief { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .a-positions-chief__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .a-positions-chief__media::after { background: linear-gradient(0deg, var(--navy) 0%, rgba(11, 15, 46, 0.4) 18%, rgba(11, 15, 46, 0) 45%); }
  .a-positions-chief__copy { padding: 1.5rem 1.4rem 1.6rem; margin-top: -1.5rem; }
  .a-positions-chief__place { margin-bottom: 0; }
  .a-positions-chief__patients { margin-top: 1.4rem; padding-top: 1.4rem; }
  /* One tap to the office: the number becomes the first, primary pill. */
  .a-positions-call {
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    min-height: 52px;
    margin-top: 1.3rem;
    border-radius: var(--h-r-pill);
    background: var(--bg-2);
    color: var(--ink);
    box-shadow: inset 0 1px 0 #fff, 0 8px 22px -10px rgba(0, 0, 0, 0.6);
    transition: scale var(--h-spring-dur) var(--h-spring);
  }
  .a-positions-call::before { inset: 0; }
  .a-positions-call:active { opacity: 1; scale: 0.97; transition-duration: var(--h-t-press); }
  .a-positions-call__k { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); }
  .a-positions-call__k2 { display: none; }
  .a-positions-call__n { font-size: 1rem; font-weight: 600; padding: 0; background: none; }
  .a-positions-chief__acts { flex-direction: column; align-items: stretch; margin-top: 0.75rem; }
  .a-positions-chief .h-btn { width: 100%; }
  .a-positions-chief .h-btn:first-child { --b-bg: transparent; --b-bg-hover: rgba(255, 255, 255, 0.08); --b-bg-press: rgba(255, 255, 255, 0.14);
    --b-fg: #fff; --b-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); --b-shadow-hover: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
}

/* ── MOTION PREFERENCES ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .a-positions-lvl { transform: none !important; opacity: 1 !important; }
  .a-positions-disc { transform: none !important; }
  .a-positions-ghost, .a-positions-row, .a-positions-chief, .a-positions-door__to, .a-positions-door__arrow,
  .a-positions-call__n, .a-positions-bone path, .a-positions-post path, .a-positions-trace path { transition: none !important; }
  .a-positions-row.is-forward, .a-positions-chief.is-forward { translate: none; }
}
@media (forced-colors: active) {
  .a-positions-lvl.is-lit .a-positions-bone path { fill: Highlight; }
  .a-positions-row.is-forward { outline: 2px solid CanvasText; }
}