/* ixway /leaders/ — page styles on top of tokens.css, hero.css and site.css (all unchanged).
   lh-* is the hero's organization diagram; ld-* the figures further down. Figure rules: docs/FIGURES.md. */

/* ---------- hero: the month's AI spend as a treemap, under the fog ---------- */
/* The pinned panel fills the screen like the main page's. On a window taller than the headline plus the map
   (capped at 780px), the extra space is split above and below (--lh-extra) instead of pooling under the map.
   It pins for min(90svh, 840px) of scroll: a little less than the main page, one picture rather than a walk through a request. */
.hero {
  --lh-top0: calc(var(--nav-h) + clamp(20px, 5.5vh, 64px) + clamp(2rem, 0.9rem + 3.3vw, 3.75rem) * 1.08 + clamp(16px, 3vh, 36px));
  --lh-extra: max(0px, calc((100svh - var(--lh-top0) - 824px) / 2));
  --lh-top: calc(var(--lh-top0) + var(--lh-extra));
}
@media (max-width: 640px) { .hero { --lh-top0: calc(var(--nav-h) + 14px + clamp(2rem, 0.9rem + 3.3vw, 3.75rem) * 2.25); } }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .hero { height: calc(100svh + min(90svh, 840px)); }
  .hero__copy { padding-top: calc(var(--nav-h) + clamp(20px, 5.5vh, 64px) + var(--lh-extra)); }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (max-width: 640px) {
  .hero__copy { padding-top: calc(var(--nav-h) + 14px + var(--lh-extra)); }
}

.lh-viz {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: var(--lh-top);
  height: min(calc(100svh - var(--lh-top) - clamp(16px, 3vh, 32px)), 780px);
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in srgb, var(--ink) calc(var(--hero-bg) * 100%), var(--fog-2));
}
.lh-k { color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.lh-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.lh-total b { font-weight: 500; font-size: 14px; }
.lh-modes { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.hero.is-live .lh-modes { pointer-events: auto; }
.lh-modes .lh-k { margin-right: 4px; }
.lh-modes button { font: 12px var(--font-mono); color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer; }
.lh-modes button:hover { border-color: var(--ink); color: var(--ink); }
.lh-modes button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lh-modes button:focus-visible { outline: 1px dashed var(--ink); outline-offset: 2px; }
.lh-map { flex: 1 1 auto; min-height: 0; width: 100%; overflow: visible; display: block; user-select: none; pointer-events: none; }
.hero.is-live .lh-map { pointer-events: auto; }
.lh-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; min-height: 15px; font-size: 11px; color: var(--ink-2); }
.lh-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px var(--ink-3); }
.lh-foot { color: var(--ink-3); font-size: 11.5px; }

.hero.is-live .lh-hint { color: var(--ink); }
.lh-hint::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; border: 1.5px solid currentColor; border-radius: 50%; }

/* Each part fades in from its --s, the hero progress at which it starts. */
.lh-col { opacity: clamp(0, (var(--hero-progress) - var(--s)) / 0.08, 1); }
.lh-debris { opacity: clamp(0, 1 - var(--hero-progress) / 0.3, 1); }
.lh-debris text { fill: currentColor; }
.lh-debris path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .7; }

.lh-team__box { fill: none; stroke: currentColor; stroke-width: 1; }
.lh-team__name { fill: currentColor; font-weight: 500; font-size: 12.5px; }
.lh-team__sub { fill: currentColor; fill-opacity: .62; font-size: 11.5px; }
.lh-team__box { fill: transparent; }
.lh-group__box { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-width: 1; }
.lh-group__head { fill: transparent; }
.lh-group__name { fill: currentColor; font-size: 11.5px; font-weight: 500; }
.lh-group__sub { fill: currentColor; fill-opacity: .62; font-size: 11px; }
/* a pull request: a cell sized by its cost; hatched cells are work that produced no PR */
.lh-cell rect { fill: var(--paper-2); fill-opacity: var(--hero-bg); stroke: var(--paper); stroke-width: 1; }
.lh-cell__name { fill: currentColor; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; }
.lh-cell__sub { fill: currentColor; fill-opacity: .62; font-size: 10.5px; }
.lh-sub.lh-acc-t, .lh-acc-t { fill: var(--accent-deep); fill-opacity: 1; color: var(--accent-deep); }
.lh-hatch { stroke: var(--rule-2); stroke-width: 1.4; }
/* categories (work, AI tool): only each group's header strip takes its shade, so the map stays light */
.lh-c0 .lh-group__head, i.lh-c0 { fill: color-mix(in srgb, var(--ink-2) 80%, var(--ink-3)); background: color-mix(in srgb, var(--ink-2) 80%, var(--ink-3)); }
.lh-c1 .lh-group__head, i.lh-c1 { fill: var(--ink-3); background: var(--ink-3); }
.lh-c2 .lh-group__head, i.lh-c2 { fill: color-mix(in srgb, var(--ink-3) 45%, var(--rule-2)); background: color-mix(in srgb, var(--ink-3) 45%, var(--rule-2)); }
.lh-c3 .lh-group__head, i.lh-c3 { fill: var(--rule-2); background: var(--rule-2); }
.lh-c4 .lh-group__head, i.lh-c4 { fill: var(--rule); background: var(--rule); }
.lh-c5 .lh-group__head, i.lh-c5 { fill: var(--paper-2); background: var(--paper-2); }
.lh-c6 .lh-group__head, i.lh-c6 { fill: var(--paper); background: var(--paper); }
:is(.lh-c0, .lh-c1, .lh-c2) > .lh-hov > text { fill: var(--paper); fill-opacity: 1; }
.lh-cell--none rect { fill: url(#lh-hatch); fill-opacity: 1; }
.lh-cell--acc rect { stroke: var(--accent); stroke-width: 2; }
.lh-legend .lh-key-none { background: repeating-linear-gradient(45deg, var(--rule-2) 0 1.4px, transparent 1.4px 3.5px); }
.lh-legend .lh-key-cell { background: var(--paper-2); }
.lh-legend .lh-hint { margin-left: auto; color: var(--ink-3); }
.lh-back { font: 12px var(--font-mono); color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: var(--r-sm); padding: 4px 9px; margin-right: 6px; cursor: pointer; }
.lh-back:hover { background: var(--ink); color: var(--paper); }
.lh-cells--focus .lh-cell rect { stroke: var(--rule-2); }
.lh-cell__title { fill: currentColor; font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.lh-swap { animation: lh-swap .32s ease-out; }
@keyframes lh-swap { from { opacity: 0; } to { opacity: 1; } }
.lh-mv { outline: none; }
.hero.is-live .lh-cell.is-on rect { stroke: var(--ink); stroke-width: 1.5; }
.hero.is-live .lh-cell--acc.is-on rect { stroke: var(--accent); stroke-width: 2.5; }
.hero.is-live .lh-group:hover .lh-group__box { stroke-opacity: 1; stroke-width: 1.5; }
.hero.is-live .lh-team.is-on .lh-team__box, .lh-team:focus-visible .lh-team__box { stroke-width: 2; }
@media (hover: hover) and (pointer: fine) {
  .hero.is-live .lh-hov { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23eceae4' fill-opacity='.7' stroke='%23141412' stroke-width='1.5'/%3E%3Cpath d='M17.9 17.9L25 25' stroke='%23141412' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, zoom-in; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-viz { position: relative; top: auto; bottom: auto; height: min(680px, 80vh); margin: 28px auto 48px; color: var(--ink); }
  .lh-col { opacity: 1; }
  .lh-debris { display: none; }
  .lh-swap { animation: none; }
}
@media (scripting: none) { .lh-viz { display: none !important; } }

/* ---------- shared figure parts ---------- */
.ld-hdr { font: 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.ld-mono { font-family: var(--font-mono); font-size: 12.5px; }
.ld-sub { color: var(--ink-3); font: 11.5px/1.35 var(--font-mono); }
.ld-sub b { color: var(--ink); font-weight: 500; }
.ld-acc { color: var(--accent-deep); }
.ld-part { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: clamp(56px, 7vw, 104px) 0 18px; padding-top: 18px; border-top: 1px solid var(--ink); display: flex; gap: 14px; }
.ld-part span { color: var(--ink-3); }
.ld-h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.03em; max-width: 24ch; }
.ld-h3 + .lede { margin-top: 14px; }
.ld-subhead { display: grid; grid-template-columns: 7fr 5fr; gap: 20px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 1024px) { .ld-subhead { grid-template-columns: 1fr; } }

/* ---------- why now: two cited figures ---------- */
.ld-stats { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--ink); }
.ld-stats p.ld-stats__head { grid-column: 1 / -1; max-width: none; padding: 18px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.ld-stats p { padding-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.45; max-width: 44ch; }
.ld-stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-bottom: 10px; }
.ld-stats span { display: block; margin-top: 8px; font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: .02em; }
@media (max-width: 640px) { .ld-stats { grid-template-columns: 1fr; } }

/* ---------- FIG. 1 — adoption and concentration ---------- */
.ld-adopt { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ld-roster__row, .ld-roster__hdr { display: grid; grid-template-columns: 104px minmax(0, 1fr) 128px 92px; gap: 16px; align-items: center; }
.ld-roster__hdr { padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.ld-roster__row { padding: 11px 0; border-bottom: 1px solid var(--rule); font: 12.5px var(--font-mono); }
.ld-roster__name { font-weight: 500; }
.ld-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.ld-dots i.off { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.ld-roster__tools { color: var(--ink-2); font-size: 11.5px; line-height: 1.3; }
.ld-roster__spend { text-align: right; }
.ld-roster__spend span { display: block; color: var(--ink-3); font-size: 11px; }
.ld-roster__ftr { display: flex; justify-content: space-between; padding-top: 12px; }
.ld-dist svg { width: 100%; height: auto; overflow: visible; font: 11px var(--font-mono); }
.ld-dist .bar { fill: var(--ink); }
.ld-dist .bar--top { fill: var(--accent); }
.ld-dist .ax { stroke: var(--ink); stroke-width: 1; }
.ld-dist .grid { stroke: var(--rule); stroke-width: 1; }
.ld-dist .t { fill: var(--ink-3); }
.ld-dist .t--ink { fill: var(--ink); font-weight: 500; }
.ld-dist .t--acc { fill: var(--accent-deep); font-weight: 500; }
.ld-dist .lead { stroke: var(--ink-3); stroke-width: 1; fill: none; }

/* ---------- FIG. 2 — routing profiles per team ---------- */
.ld-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink); }
.ld-tab { font: 12.5px var(--font-mono); color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 18px 10px 0; margin-right: 18px; cursor: pointer; text-align: left; }
.ld-tab span { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.ld-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ld-tab:hover { color: var(--ink); }
.ld-tab:focus-visible { outline: 1px dashed var(--ink); outline-offset: 2px; }
.ld-panel { padding-top: 28px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px clamp(32px, 5vw, 80px); }
.ld-panel[hidden] { display: none; }
.ld-panel__rule { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.ld-panel__why { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 46ch; }
.ld-panel__meta { margin-top: 18px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font: 12px var(--font-mono); }
.ld-panel__meta dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; padding-top: 1px; }
.ld-bars { display: grid; gap: 18px; }
.ld-bar__label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ld-stack { display: flex; height: 22px; gap: 2px; }
.ld-stack i { display: block; flex: var(--f) 1 0; position: relative; }
.ld-stack .m-fable { background: var(--ink); }
.ld-stack .m-opus { background: var(--ink-2); }
.ld-stack .m-sonnet { background: var(--ink-3); }
.ld-stack .m-haiku { background: var(--rule-2); }
.ld-stack .m-local { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.ld-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font: 11px var(--font-mono); color: var(--ink-2); }
.ld-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.ld-legend .m-fable { background: var(--ink); } .ld-legend .m-opus { background: var(--ink-2); } .ld-legend .m-sonnet { background: var(--ink-3); }
.ld-legend .m-haiku { background: var(--rule-2); } .ld-legend .m-local { box-shadow: inset 0 0 0 1px var(--ink); }
.ld-req { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; font: 12.5px var(--font-mono); }
.ld-req q { font-family: var(--font-body); font-size: 14px; color: var(--ink); quotes: "“" "”"; grid-column: 1 / -1; }
.ld-req__to { color: var(--ink); }
.ld-req__to::before { content: "→ "; color: var(--accent); }
.ld-req__why { color: var(--ink-3); }
.ld-req__cost { text-align: right; grid-row: 2; grid-column: 2; }
.ld-shadow { border: 1px dashed var(--ink-3); padding: 14px 16px; }
.ld-shadow .ld-hdr { margin-bottom: 10px; }
.ld-js .ld-panel--all-js { display: none; }

/* ---------- FIG. 3 — findings, with owner and status (extends site.css .fx-*) ---------- */
.ld-fx .fx-findings__hdr, .ld-fx .fx-row { grid-template-columns: 1.3fr 1.4fr 90px; }
.ld-fx .fx-row__team { display: block; color: var(--ink-3); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.ld-status { text-align: right; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--ink-3); }
.ld-status--sent { color: var(--accent-deep); }

/* ---------- FIG. 4 — my usage ---------- */
.ld-me { border: 1px solid var(--ink); display: grid; grid-template-columns: 220px 1fr; }
.ld-me__side { border-right: 1px solid var(--rule); padding: 16px 18px; display: grid; align-content: start; gap: 16px; font: 12.5px var(--font-mono); }
.ld-me__tile dt { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ld-me__tile dd { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin-top: 2px; }
.ld-me__main { padding: 16px 20px; display: grid; gap: 18px; }
.ld-me__sess { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ld-me__sess p { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.ld-me__sess .ld-sub { grid-column: 1; }
.ld-me__sess .ld-mono { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
/* A finding is waste: amber, as in fig-observe.css. */
.ld-me__find { border: var(--edge) solid var(--warn); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; }
.ld-me__find .ld-acc { color: var(--warn); }
.ld-me__find p { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.ld-me__prompt { font: 12px/1.45 var(--font-mono); color: var(--ink-2); background: var(--paper-2); padding: 10px 12px; border-left: 2px solid var(--accent); }
.ld-me__act { display: flex; gap: 16px; align-items: center; font: 12px var(--font-mono); flex-wrap: wrap; }
.ld-me__act b { color: var(--accent-deep); font-weight: 500; }
.ld-btn { font: 12px var(--font-mono); padding: 7px 12px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }

/* ---------- FIG. 5 — one record, a view per role ---------- */
.ld-roles .ld-panel { grid-template-columns: repeat(3, 1fr); }
.ld-roles h4 { margin: 0 0 10px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 400; }
.ld-roles ul li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.ld-roles ul.no li { color: var(--ink-3); }
.ld-roles ul.no li::before { content: "— "; }
.ld-roles .ld-land { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.ld-roles .ld-land + p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }

/* ---------- setup ---------- */
.ld-gw { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; align-items: start; font: 12.5px var(--font-mono); }
.ld-gw .fx-gw__link { margin-top: 30px; height: 120px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ld-adopt, .ld-panel, .ld-roles .ld-panel { grid-template-columns: 1fr; }
  .ld-gw { grid-template-columns: 1fr; }
  .ld-gw .fx-gw__link { height: 56px; margin-top: 0; }
}
@media (max-width: 640px) {
  .ld-roster__hdr { display: none; }
  .ld-roster__row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .ld-roster__name { grid-column: 1; }
  .ld-roster__spend { grid-column: 2; grid-row: 1; }
  .ld-roster__row .ld-dots, .ld-roster__tools { grid-column: 1 / -1; }
  .ld-fx .fx-row { grid-template-columns: 1fr auto; }
  .ld-me { grid-template-columns: 1fr; }
  .ld-me__side { border-right: 0; border-bottom: 1px solid var(--rule); grid-template-columns: repeat(3, 1fr); }
  .ld-me__tile dd { font-size: 20px; }
  .ld-tab { margin-right: 14px; padding-right: 0; }
}
.ld-me__open { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.ld-me__open:hover { border-bottom-color: var(--ink); }