/* ROI3 v14 illustrated Steps 1 and 2. Every rule is scoped to #capacity or #leader.
   Legacy dialog and reader rules are untouched. Nothing animates, so reduced motion needs no override.
   PROVISIONAL AFTER RENDER: art frame aspect ratios, background y positions, callout positions and the
   Scene 1 region split were set before the planned art existed. Each is in a rule marked ADJUST. */

/* Section headings */
#capacity #cap-h, #leader #lead-h { max-width: 22ch; margin-bottom: .5rem; font-size: clamp(1.9rem, 4.4vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
#capacity .capx-line, #leader .ldrx-line { max-width: 62ch; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.4; }
#leader.alt { background: #fff; border-top: 1px solid var(--line); }

/* STEP 1 · comparison canvas */
#capacity .capx-canvas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 1.5rem; }
#capacity .capx-panel { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
#capacity .capx-panel .cap-open::after { border-radius: .25rem; }
#capacity .capx-panel:hover .cap-open::after { box-shadow: inset 0 0 0 3px var(--teal); }

#capacity .capx-head { order: 0; display: flex; align-items: flex-end; gap: .75rem; padding: 0 0 .7rem; }
#capacity .capx-count { flex: none; color: var(--ink); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: .85; letter-spacing: -.04em; }
#capacity .capx-head h3 { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
#capacity .capx-kicker { margin: .1rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.25; }

/* One source image, cropped to its equal half. The width is exact, so a panel split never drifts. */
#capacity .capx-frame { display: contents; }
#capacity .capx-art { order: 1; width: 100%; aspect-ratio: 1 / 1; background-color: #eef2f7; background-image: url(/art/capacity-scenes-v14.png); background-repeat: no-repeat; background-size: 200% auto; }
#capacity .capx-solo .capx-art { background-position: 0% 40%; } /* ADJUST y */
#capacity .capx-team .capx-art { background-position: 100% 40%; } /* ADJUST y */

/* Setup labels: amber always means setup required */
#capacity .capx-frame .capx-callouts { order: 3; display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; }
#capacity .capx-callouts .cap-tag { min-height: 44px; padding: .35rem .8rem; border: 2px solid var(--amber); border-radius: 2rem; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.15; }
#capacity .capx-callouts .cap-tag::after { border-color: var(--amber); }
#capacity .capx-callouts .cap-tag:hover { background: var(--amber); color: #fff; text-decoration: underline; }
#capacity .capx-callouts .cap-tag:hover::after { border-color: #fff; }
#capacity .capx-callouts .cap-tag:focus-visible, #capacity .capx-callouts .cap-tag:target { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* Separate measures, one common scale per measure */
#capacity .cap-chart.capx-measures { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin: .8rem 0 0; }
#capacity .capx-measures .bars { margin: 0; }
#capacity .capx-measures .bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; min-width: 0; }
#capacity .capx-measures .bar .v { order: -1; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; text-align: left; letter-spacing: -.02em; }
#capacity .capx-measures .bar .l { min-height: 2.5em; color: var(--muted); font-size: .82rem; line-height: 1.25; }
#capacity .capx-measures .track { position: relative; height: .85rem; border-radius: .15rem; }
#capacity .capx-measures .fill { border-radius: 0; }
#capacity .capx-measures .track::after { content: ""; position: absolute; inset: 0; }
#capacity .capx-hours .bar .v { color: var(--teal); }
#capacity .capx-pct .bar .v { color: var(--blue); }
#capacity .capx-hours .track::after { background: repeating-linear-gradient(to right, transparent 0 calc(25% - 2px), #fff calc(25% - 2px) 25%); }
#capacity .capx-pct .track::after { background: repeating-linear-gradient(to right, transparent 0 calc(50% - 2px), #fff calc(50% - 2px) 50%); }
#capacity .capx-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; line-height: 1.2; }
#capacity .capx-panel > .cap-open { order: 4; margin-top: .9rem; }

/* Measure it */
#capacity .cap-more { gap: .9rem; margin-top: 2rem; padding: 1.1rem 1.25rem 1.25rem; border-radius: .35rem; background: var(--ink); color: #fff; }
#capacity .capx-measure-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
#capacity .capx-measure-head h3 { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 800; }
#capacity .cap-more .capx-measure-open { margin: 0; border-color: #fff; background: transparent; color: #fff; }
#capacity .cap-more .capx-measure-open::after { content: none; }
#capacity .cap-more .capx-measure-open:hover { background: #fff; color: var(--ink); }
#capacity .cap-more .capx-measure-open:focus-visible { outline-color: #fff; }
#capacity .cap-more .cap-mlink { border: 0; border-top: 2px solid #5eead4; border-radius: 0; background: transparent; color: #fff; }
#capacity .cap-more .cap-mlink::after { border-color: #5eead4; }
#capacity .cap-more .cap-mlink:hover { border-color: #5eead4; text-decoration: underline; }
#capacity .cap-more .cap-mlink:focus-visible, #capacity .cap-more .cap-mlink:target { outline: 3px solid #fff; outline-offset: 2px; }
#capacity .cap-more .cap-num { background: #5eead4; color: var(--ink); }
#capacity .capx-note { margin-top: .7rem; }

/* STEP 2 · worked story */
#leader .ldrx-story { display: grid; gap: 2.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
#leader .ldrx-scene { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
#leader .ldrx-cap { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
#leader .ldrx-n { flex: none; color: var(--blue); font-size: 2.1rem; line-height: 1; }

#leader .ldrx-frame { position: relative; min-width: 0; }
#leader .ldrx-art { width: 100%; aspect-ratio: 1 / 1; background-color: #eef2f7; background-image: url(/art/leadership-scenes-v14.png); background-repeat: no-repeat; background-size: 300% auto; }
#leader .ldrx-scene-see .ldrx-art { background-position: 0% 40%; } /* ADJUST y */
#leader .ldrx-scene-coach .ldrx-art { background-position: 50% 40%; } /* ADJUST y */
#leader .ldrx-scene-team .ldrx-art { background-position: 100% 40%; } /* ADJUST y */

/* Picture regions are the links to the four main readers */
#leader .ldrx-hit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: block; padding: .7rem; color: #fff; text-decoration: none; }
#leader .ldrx-hit-leader { right: 50%; } /* ADJUST split */
#leader .ldrx-hit-records { left: 50%; } /* ADJUST split */
#leader .ldrx-tag { display: inline-block; padding: .4rem .7rem; border-radius: .3rem; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; }
#leader .ldrx-tag::after { content: " \203A"; }
#leader .ldrx-hit:hover, #leader .ldrx-hit:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; background: rgba(31, 95, 191, .1); border-radius: 0; }
#leader .ldrx-hit:hover .ldrx-tag, #leader .ldrx-hit:focus-visible .ldrx-tag { background: var(--blue); text-decoration: underline; }

/* Data objects in the scene: the heading link stretches over its whole object */
#leader .ldrx-data { position: relative; z-index: 2; min-width: 0; margin-top: .75rem; padding: .85rem 1rem 1rem; border-radius: .35rem; }
#leader .ldrx-data:hover, #leader .ldrx-data:focus-within, #leader .ldrx-reach:hover, #leader .ldrx-reach:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
#leader .ldrx-dt { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
#leader .ldrx-dt a { color: inherit; text-underline-offset: 3px; }
#leader .ldrx-dt a::after { content: ""; position: absolute; inset: 0; }
#leader .ldrx-dt a:focus-visible { outline: none; }
#leader .ldrx-unit { margin: 0; font-size: .82rem; line-height: 1.3; }
#leader .ldrx-data .bars { gap: .35rem; margin: .35rem 0 0; }
#leader .ldrx-data .bar { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .5rem; }
#leader .ldrx-data .bar .l { grid-column: 1; grid-row: 1; font-size: .88rem; font-weight: 600; }
#leader .ldrx-data .bar .track { grid-column: 2; grid-row: 1; height: .8rem; border-radius: .15rem; }
#leader .ldrx-data .bar .fill { border-radius: 0; }
#leader .ldrx-data .bar .v { grid-column: 3; grid-row: 1; font-size: 1.2rem; line-height: 1; }

/* The same marker follows the same four stalled proposals from signal to decision */
#leader .ldrx-stalled { display: inline-flex; flex: none; gap: .18rem; padding-top: .15rem; }
#leader .ldrx-stalled i { display: block; width: .7rem; height: .9rem; background: var(--amber); clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%); }

#leader .ldrx-screen { background: var(--ink); color: #fff; }
#leader .ldrx-screen .ldrx-unit { color: #c9d4e3; }
#leader .ldrx-screen .bar .track { background: rgba(255, 255, 255, .18); }
#leader .ldrx-screen .bar .fill { background: #8ab6ff; }
#leader .ldrx-screen .bar .fill.f-amber { background: #ffb454; }
#leader .ldrx-screen .ldrx-stalled i { background: #ffb454; }
#leader .ldrx-flag { display: flex; align-items: flex-start; gap: .55rem; margin: .65rem 0 0; padding-top: .55rem; border-top: 1px dashed rgba(255, 255, 255, .4); color: #ffd9a3; font-size: .92rem; font-weight: 700; line-height: 1.3; }

#leader .ldrx-note { border-top: 4px solid var(--amber); background: #fff7ea; color: var(--ink); }
#leader .ldrx-decide { display: flex; align-items: flex-start; gap: .55rem; margin: .55rem 0 0; font-size: .98rem; line-height: 1.32; }
#leader .ldrx-doc { flex: none; width: 1rem; height: 1.25rem; fill: #fff; stroke: var(--blue); stroke-width: 1.5; }

#leader .ldrx-board { border-top: 4px solid var(--teal); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
#leader .ldrx-board .ldrx-unit { color: var(--muted); }
#leader .ldrx-board .bar .v { color: var(--teal); font-size: 1.5rem; font-weight: 800; }
#leader .ldrx-transfer { display: block; width: 100%; max-width: 20rem; height: auto; margin: .25rem 0 .5rem; }
#leader .ldrx-transfer .ldrx-doc-path { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
#leader .ldrx-transfer .ldrx-tx { fill: var(--ink); font-size: 12.5px; font-weight: 700; }
#leader .ldrx-transfer .ldrx-link { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 3 3; }
#leader .ldrx-transfer circle { fill: var(--blue); }
#leader .ldrx-transfer .ldrx-ini { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }

/* What the setup takes, and how reach differs. Widths are qualitative, not a measure. */
#leader .ldrx-reach { position: relative; display: grid; gap: 1rem; margin-top: 2rem; padding: 1rem 0 0; border-top: 3px solid var(--ink); }
#leader .ldrx-needs { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .4rem 0 0; padding: 0; list-style: none; }
#leader .ldrx-needs li { font-size: .95rem; font-weight: 600; line-height: 1.3; }
#leader .ldrx-needs li::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; background: var(--amber); }
#leader .ldrx-spans { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
#leader .ldrx-spans li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .6rem; }
#leader .ldrx-role { font-size: .92rem; font-weight: 700; line-height: 1.2; }
#leader .ldrx-span { display: block; min-width: min(100%, 11rem); padding: .3rem .6rem; border-left: 4px solid var(--teal); background: #e6f4f2; font-size: .88rem; line-height: 1.25; }
#leader .ldrx-s1 { width: 50%; }
#leader .ldrx-s2 { width: 75%; }
#leader .ldrx-s3 { width: 100%; }
#leader .ldrx-foot { margin-top: .9rem; }

/* Two scenes side by side, or scene beside its data */
@media (min-width: 640px) {
  #capacity .capx-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  #leader .ldrx-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  #leader .ldrx-cap { grid-column: 1 / -1; }
  #leader .ldrx-data { margin-top: 0; }
}
@media (min-width: 760px) {
  #leader .ldrx-reach { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; }
}

/* Desktop Step 1: one continuous canvas with labels placed on the art */
@media (min-width: 900px) {
  #capacity .capx-canvas, #capacity .cap-more { width: min(1240px, calc(100vw - 2rem)); margin-left: calc((100% - min(1240px, 100vw - 2rem)) / 2); }
  #capacity .capx-canvas { gap: 0; }
  #capacity .capx-head { padding-right: 1rem; }
  #capacity .capx-frame { position: relative; display: block; }
  #capacity .capx-art { aspect-ratio: 8 / 7; max-height: 78vh; } /* ADJUST ratio */
  #capacity .capx-frame .capx-callouts { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  #capacity .capx-frame .capx-callouts li { position: absolute; }
  #capacity .capx-callouts .cap-tag { pointer-events: auto; white-space: nowrap; }
  /* ADJUST: place each label beside its pictured object after the first render */
  #capacity .capx-at-solo-tools { top: 6%; left: 4%; }
  #capacity .capx-at-solo-files { top: 14%; right: 4%; }
  #capacity .capx-at-solo-start { top: 58%; left: 4%; }
  #capacity .capx-at-team-data { top: 4%; left: 50%; transform: translateX(-50%); }
  #capacity .capx-at-team-tools { top: 20%; right: 3%; }
  #capacity .capx-at-team-training { top: 20%; left: 3%; }
  #capacity .capx-at-team-quality { top: 44%; right: 3%; }
  #capacity .capx-at-team-budget { top: 50%; left: 3%; }
  #capacity .cap-chart.capx-measures { position: relative; margin: -4.5rem 1.25rem 0; padding: .85rem 1.1rem .75rem; border-radius: .35rem; background: #fff; box-shadow: 0 .25rem 1rem rgba(11, 31, 58, .14); }
  #capacity .capx-panel > .cap-open { margin-left: 1.25rem; }
}

/* Desktop Step 2: three scenes form one canvas, data objects overlap the art */
@media (min-width: 1000px) {
  #leader .ldrx-story, #leader .ldrx-reach { width: min(1240px, calc(100vw - 2rem)); margin-left: calc((100% - min(1240px, 100vw - 2rem)) / 2); }
  #leader .ldrx-story { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  #leader .ldrx-scene { grid-template-columns: minmax(0, 1fr); }
  #leader .ldrx-cap { padding: 0 .75rem; }
  #leader .ldrx-art { aspect-ratio: 4 / 5; max-height: 80vh; } /* ADJUST ratio */
  #leader .ldrx-data { margin: -8.5rem .75rem 0; box-shadow: 0 .25rem 1rem rgba(11, 31, 58, .14); }
  #leader .ldrx-board { box-shadow: inset 0 0 0 1px var(--line), 0 .25rem 1rem rgba(11, 31, 58, .14); }
}

/* Rendered-art integration: exact source proportions, no enclosing art rectangles. */
#capacity .capx-art { aspect-ratio: 2149 / 1464; background-color: transparent; background-size: 200% 100%; }
#capacity .capx-solo .capx-art { background-position: 0% 50%; }
#capacity .capx-team .capx-art { background-position: 100% 50%; }
#leader .ldrx-art { aspect-ratio: 1 / 1; background-color: transparent; background-size: 300% 100%; }
#leader .ldrx-scene-see .ldrx-art { background-position: 0% 50%; }
#leader .ldrx-scene-coach .ldrx-art { background-position: 50% 50%; }
#leader .ldrx-scene-team .ldrx-art { background-position: 100% 50%; }
@media (min-width: 900px) {
  #capacity .capx-art { aspect-ratio: 2149 / 1464; max-height: none; }
  #capacity .cap-chart.capx-measures { margin: .3rem 1.25rem 0; padding: .5rem 1.1rem; background: transparent; box-shadow: none; }
  #capacity .capx-at-solo-tools { top: 4%; left: 3%; }
  #capacity .capx-at-solo-files { top: 35%; right: 3%; }
  #capacity .capx-at-solo-start { top: auto; bottom: 3%; left: 3%; }
  #capacity .capx-at-team-data { top: 45%; left: 50%; }
  #capacity .capx-at-team-tools { top: 5%; right: 3%; }
  #capacity .capx-at-team-training { top: 5%; left: 3%; }
  #capacity .capx-at-team-quality { top: auto; bottom: 1%; right: 3%; }
  #capacity .capx-at-team-budget { top: auto; bottom: 1%; left: 3%; }
}
@media (min-width: 1000px) {
  #leader .ldrx-cap { min-height: 2.6em; align-items: flex-start; }
  #leader .ldrx-art { aspect-ratio: 1 / 1; max-height: none; }
  #leader .ldrx-data { margin-top: -2.5rem; }
}