/* ============================================================
   THE SUCCESSION — additions to the ledger and channel packages.
   Only the two charts this page introduces live here: the three
   incoming-gift panels on one scale, and the collapse strip.
   ============================================================ */

/* ---------------------------------------------------------- incoming panels
   Small multiples on a shared y-scale, so the eye compares heights across
   registrations rather than reading three separately-fitted charts. */
.panels{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:60rem){.panels{grid-template-columns:repeat(3,1fr)}}
.panel{margin:0;background:var(--navy-800);padding:.75rem .9rem .5rem}
.panel figcaption{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;margin-bottom:.25rem}
.panel figcaption b{font-family:var(--chyron);font-size:1.15rem;font-weight:600;color:#fff;letter-spacing:.01em}
.panel figcaption span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:#93a8c2}
.panel svg,.strip svg{display:block;width:100%;height:auto;overflow:visible}
.panel .base,.strip .base{stroke:#3b5677;stroke-width:1}
.panel .m{fill:var(--gold)}
.panel .bar .hit{fill:transparent}
.panel .bar:hover .m,.panel .bar:focus-within .m{fill:var(--gold-lit)}
.panel .gap{fill:none;stroke:#5c6f88;stroke-width:1;stroke-dasharray:2 3}
.panel .rev{stroke:var(--red);stroke-width:2}
.panel .revt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:#ff8a99}
.panel .yr,.strip .yr{font-family:var(--mono);font-size:11px;fill:#93a8c2;text-anchor:middle}
.panel .ax{font-family:var(--mono);font-size:11px;fill:#6d7d92;text-anchor:end}

/* ---------------------------------------------------------- collapse strip
   One dot per collapse with 50+ funders. The median is a rule, the named case
   is the only filled red mark and the only direct label. */
.strip{max-width:46rem;margin:0 0 1rem;background:var(--navy-800);border:1px solid var(--line);padding:.8rem .9rem .5rem}
.strip .m{fill:#9fb3cc;stroke:var(--navy-800);stroke-width:2}
.strip .dot .hit{fill:transparent}
.strip .dot:hover .m{fill:#fff}
.strip .dot.hot .m{fill:var(--red);stroke:#fff;stroke-width:2}
.strip .tk{stroke:#3b5677}
.strip .med{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 3}
.strip .medt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--gold-lit)}
.strip .hott{font-family:var(--chyron);font-size:17px;font-weight:600;fill:#fff}
.strip .cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:#93a8c2}

/* ---------------------------------------------------------- table view */
.tview{margin-top:.6rem}
.tview summary{cursor:pointer;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-lit);padding:.4rem 0}
.tview summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.panel .m,.strip .m{transition:none}}
@media (forced-colors:active){.panel .m,.strip .m{fill:CanvasText}.strip .dot.hot .m{fill:Highlight}}

/* the ordered lists carry their own counter; drop the browser indent that showed the frame colour */
#law .spec,#spec .spec{padding:0;margin:0}
#after .join,#control .join,#paper .join,#notfindings .join{white-space:normal}

/* ---------------------------------------------------------- the art
   Hero: phone above the title, cropped to the three registrations; desktop
   behind the masthead with the title in the empty navy left. Plates sit
   beside each segment's headline. */
.stage{position:relative;overflow:hidden;border-bottom:3px solid var(--red)}
.stage-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:72% 40%}
.stage .mast{position:relative;z-index:2}
@media (min-width:60rem){
  .stage-art{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:right center}
  .stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(5,12,22,.97) 0,rgba(5,12,22,.88) 34%,rgba(5,12,22,.3) 64%,rgba(5,12,22,.06)),
      linear-gradient(0deg,rgba(5,12,22,.92) 0,transparent 40%)}
  .stage .mast{padding-block:4rem 3rem}
  .stage .mast .dek{max-width:38rem}
}
.segtop{display:grid;gap:1rem 2rem;align-items:end;margin-bottom:1.2rem}
.segtop .seghead{margin-bottom:0}
.segtop.blkrow{align-items:start;margin-top:1rem}
.segtop.blkrow .blk{margin-top:0!important}
@media (min-width:52rem){.segtop{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.plate{margin:0;position:relative;border:1px solid var(--line);background:var(--navy-800);box-shadow:0 22px 44px -28px #000}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;background:var(--red);color:#fff;padding:.32rem .6rem}

/* grid children default to their content width; a wide table inside would push the page sideways */
.segtop > *,.findrow > *{min-width:0}