/* The Hyperdeep section (research.js): a company in depth, one dotted panel per module. Builds on
   ../styles.css (frame, tokens), the chart kit's inspector (../explore/lab/lab.css) and the company
   view's stacks, legends and notes (app.css). Colour stays in the marks and the small icon tiles;
   numbers and words wear the text tokens. */

/* ---------- the head: the eyebrow, the name, the lede, where it comes from, the module links */
.hd-head { display: flex; flex-direction: column; gap: 14px; padding-block: 52px 30px; }
.hd-head h2 { font-size: clamp(30px, 4.2vw, 52px); max-width: 20ch; }
.hd .hd-lede { font-size: 17px; max-width: 70ch; color: var(--muted); }
.hd .hd-lede b { color: var(--text); font-weight: 600; }
.hd-asof { margin: 0; font: 400 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
/* the nav's scroll padding, plus the company bar that slides in under it (app.css does the sections) */
.hd .cell[id] { scroll-margin-top: 46px; }

/* ---------- the headline numbers: three across, two down */
.hd-stats-cell { padding-block: 0; }
.hd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(-1 * var(--pad)); }
.hd-stat { padding: 22px var(--pad) 24px; border-left: 1px dotted var(--guide); min-width: 0; }
.hd-stat:nth-child(3n + 1) { border-left-color: transparent; }
.hd-stat:nth-child(n + 4) { border-top: 1px dotted var(--guide); }
.hd-stat small { display: block; font: 400 11px/1.4 var(--mono); text-transform: uppercase; color: var(--muted); }
.hd-stat b { display: block; margin-top: 6px; font: 600 clamp(26px, 3vw, 38px)/1 var(--heading-face); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hd-stat i { display: block; margin-top: 7px; font: 400 12.5px/1.45 var(--sans); font-style: normal; color: var(--muted); }

/* ---------- a module: an eyebrow, a title, a deck, then its chart, readout and notes */
.hd-mod { display: flex; flex-direction: column; gap: 14px; padding-block: 34px 38px; min-width: 0; }
.hd-mod-h { display: flex; flex-direction: column; gap: 8px; }
.hd-mod h3 { margin: 0; font: 600 clamp(21px, 2.3vw, 28px)/1.08 var(--heading-face); letter-spacing: -0.035em; text-wrap: balance; max-width: 30ch; }
.hd-mod .lab-note { margin-top: 4px; }
.hd-mod .lab-fig { margin-top: 4px; }
.hd-mod .co-stage { padding-bottom: 34px; }
.hd-sub { margin: 0 0 8px; font: 400 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hd-sub span { text-transform: none; letter-spacing: 0; color: var(--text); }

/* a key for the custom charts: a swatch each */
.hd-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.hd-key span { display: inline-flex; align-items: center; gap: 7px; }
.hd-key i { width: 12px; height: 9px; border-radius: 2px; }
.hd-key .k-old { background: color-mix(in oklab, var(--co) 34%, var(--chart-bg)); }
.hd-key .k-new { background: var(--co); }

/* a passage quoted as filed */
.hd-quote { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--stroke-strong); }
.hd-quote p { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--text); max-width: 72ch; }

/* ---------- the bar rows (barRows): parts by kind, a row lit on hover, the rest dimmed */
.lab-svg .hd-bar { fill: var(--c, var(--co)); transition: opacity 0.15s; }
.lab-svg .hd-bar.old { fill: color-mix(in oklab, var(--co) 34%, var(--chart-bg)); }
.lab-svg .hd-bar.new { fill: var(--co); }
.lab-svg .hd-bar.gone { fill: var(--chart-bg); stroke: var(--c, var(--co)); stroke-width: 1.25; }
.lab-svg .hd-bar.total { fill: var(--text); }
.lab-svg .hd-bar.cursor { fill: color-mix(in oklab, var(--c) 55%, var(--chart-bg)); stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 2; }
.lab-svg .hd-bar.in { fill: var(--cobalt); }
.lab-svg .hd-bar.out { fill: var(--cherry); }
.lab-svg .hd-conn { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.lab-svg .hd-hit { fill: transparent; cursor: default; }
.lab-svg.focus .hd-row:not(.on) .hd-bar { opacity: 0.35; }
.lab-svg .hd-row.lost .t-val { fill: var(--muted); }
.lab-svg .hd-row.mine .t-name, .lab-svg .hd-row.mine .t-val { font-weight: 600; fill: var(--text); }
/* bars grow in from their own edge once the module is in view */
.hd-mod .hd-row .hd-bar, .hd-strip .hd-bar { transform-box: fill-box; transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.15s; transition-delay: var(--d, 0ms), 0ms; }
.hd-mod .hd-row .hd-bar { transform-origin: var(--ox, left) center; transform: scaleX(0); }
.hd-mod .hd-row { --d: 0ms; }
.hd-mod .hd-row .hd-bar { transition-delay: var(--d), 0ms; }
.hd-strip .hd-bar { transform-origin: center bottom; transform: scaleY(0); }
.hd-on .hd-row .hd-bar, .hd-on .hd-strip .hd-bar { transform: none; }
@media (prefers-reduced-motion: reduce) { .hd-mod .hd-row .hd-bar, .hd-strip .hd-bar { transform: none; transition: none; } }

/* ---------- the businesses: a card each */
.hd-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hd-seg { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.hd-seg header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.hd-seg header i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); align-self: center; }
.hd-seg h4 { margin: 0; font: 600 17px/1.2 var(--heading-face); letter-spacing: -0.02em; }
.hd-seg header small { font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hd-seg-big { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hd-seg-big b { font: 600 clamp(28px, 3vw, 36px)/1 var(--heading-face); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.hd-seg-big span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.hd-seg-big em { font-style: normal; color: var(--text); font-weight: 500; }
.hd-seg-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.hd-seg-dl dt { font: 400 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hd-seg-dl dd { margin: 3px 0 0; font: 500 13.5px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.hd-seg-dl dd small { display: block; font: 400 11.5px/1.35 var(--sans); color: var(--muted); }
.hd-seg-fig { border-top: 1px dotted var(--guide); padding-top: 10px; min-height: 128px; }
.hd-strip .seg-rev { fill: var(--c); }
.hd-strip .seg-cap { fill: var(--surface); stroke: var(--c); stroke-width: 1.2; }
.hd-strip .hd-hit { fill: transparent; }
.hd-strip-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font: 400 10.5px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.hd-strip-key span { display: inline-flex; align-items: center; gap: 6px; }
.hd-strip-key i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.hd-strip-key i.c { background: var(--surface); box-shadow: inset 0 0 0 1.2px var(--c); }
.hd-seg-lines { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dotted var(--guide); display: flex; flex-direction: column; gap: 7px; }
.hd-seg-lines li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 8px; font: 400 12.5px/1.35 var(--sans); }
.hd-seg-lines i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); align-self: center; }
.hd-seg-lines b { font-weight: 500; font-variant-numeric: tabular-nums; }
.hd-seg-lines em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--muted); min-width: 5ch; text-align: right; }
.hd-why summary { cursor: pointer; font: 400 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hd-why summary:hover { color: var(--text); }
.hd-why .hd-quote { margin-top: 8px; }
.hd-why .hd-quote + .hd-quote { margin-top: 10px; }
.hd-why .hd-quote p { font-size: 13px; }

/* ---------- the debt by instrument: then and now, a bar each on one scale */
.hd-dt { display: flex; flex-direction: column; border-top: 1px dotted var(--guide); }
.hd-dt-r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px dotted var(--guide); font: 400 12.5px/1.3 var(--sans); }
.hd-dt-h { font: 400 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hd-dt-n small { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.hd-dt-v { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hd-dt-v i { height: 9px; width: calc((100% - 8ch) * var(--f, 0)); min-width: 2px; border-radius: 2px; background: var(--slate); flex: none; }
.hd-dt-v b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-dt-v.none { color: var(--muted); }
.hd-dt-r.gone .hd-dt-n { color: var(--muted); }
.hd-dt-r.gone .hd-dt-v i { background: color-mix(in oklab, var(--slate) 40%, var(--chart-bg)); }
.hd-dt-t { border-bottom: 0; font-weight: 600; }
.hd-dt-t b { font-weight: 600; }
.hd-tranches ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.hd-tranches li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 8px 10px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); font: 400 11px/1.3 var(--mono); }
.hd-tranches li b { font-weight: 500; color: var(--text); }
.hd-tranches li span { color: var(--muted); text-align: right; }
.hd-tranches li i { grid-column: 1 / -1; font-style: normal; font: 600 15px/1.1 var(--heading-face); letter-spacing: -0.02em; }

/* ---------- who pays: a quarter's revenue as one bar, the big customers in it */
.hd-cust { display: flex; flex-direction: column; gap: 14px; }
.hd-share-bar { display: flex; height: 44px; gap: 2px; }
.hd-share-bar span { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 0 8px; border-radius: 2px; overflow: hidden; white-space: nowrap; font: 400 10.5px/1 var(--mono); }
.hd-share-bar span b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hd-share-bar span i { font-style: normal; font-variant-numeric: tabular-nums; }
.hd-share-bar .p0 { background: var(--ink); color: var(--on-ink); }
.hd-share-bar .p1 { background: color-mix(in oklab, var(--text) 62%, var(--chart-bg)); color: var(--on-ink); }
.hd-share-bar .rest { background: color-mix(in oklab, var(--text) 9%, var(--chart-bg)); color: var(--muted); }
.hd-share-n { margin: 6px 0 0; font: 400 11px/1.4 var(--mono); color: var(--muted); }
.hd-cust-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.hd-cust-who b { color: var(--text); font-weight: 600; }
.hd-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px dotted var(--guide); padding-top: 14px; }
.hd-pairs small, .hd-deal small, .hd-tile small { display: block; font: 400 10.5px/1.35 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hd-pairs b { display: block; margin-top: 5px; font: 600 24px/1 var(--heading-face); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hd-pairs i { display: block; margin-top: 5px; font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--muted); }

/* ---------- the deals: a card each */
.hd-deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hd-deal { padding: 14px 14px 12px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.hd-deal > b { display: block; margin-top: 6px; font: 600 15px/1.25 var(--heading-face); letter-spacing: -0.015em; }
.hd-deal p { margin: 6px 0 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.hd-deal p strong { display: block; margin-bottom: 2px; font: 600 24px/1 var(--heading-face); letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- up next: the events in date order on the left; the next launch and the next Starship
   flight counted down on the right, and the flagged passage under them */
.hd-next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.hd-events { list-style: none; margin: 0; padding: 0; border-top: 1px dotted var(--guide); }
.hd-ev { display: grid; grid-template-columns: 15ch minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 8px; border-bottom: 1px dotted var(--guide); }
.hd-ev-when { font: 500 11.5px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.hd-ev-when small { display: block; font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hd-ev-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-ev-what b { font: 500 13.5px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-ev-what small { font: 400 11px/1.3 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-ev-what small:empty { display: none; }
.hd-ev-tag { display: inline-flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.hd-ev-tag i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.hd-ev.k-spot { background: linear-gradient(90deg, color-mix(in oklab, var(--burgundy) 10%, transparent), transparent 80%); }
.hd-ev.k-spot .hd-ev-what b, .hd-ev.k-report .hd-ev-what b { font-weight: 600; }
.hd-ev.k-report .hd-ev-tag { color: var(--text); }
.hd-ev.due { opacity: 0.6; }
.hd-next-side { display: flex; flex-direction: column; gap: 12px; }
.hd-count { padding: 14px 16px 13px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); }
.hd-count:empty { display: none; }
.hd-count .hd-sub { margin-bottom: 6px; }
.hd-count-t { display: block; font: 600 clamp(24px, 2.6vw, 32px)/1 var(--heading-face); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.hd-count-n { margin: 8px 0 3px; font: 500 14px/1.3 var(--sans); }
.hd-count.spot { border-color: color-mix(in oklab, var(--burgundy) 50%, var(--stroke)); }
.hd-flag { padding-top: 12px; border-top: 1px dotted var(--guide); display: flex; flex-direction: column; gap: 8px; }
.hd-flag .hd-sub { margin: 0; }
.hd-flag .hd-quote p { font-size: 13px; }
.hd-fine { margin: 0; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.hd-fine a { color: inherit; }
.hd-fine:empty { display: none; }

/* ---------- the operating numbers: a tile per metric, with its last periods as small bars (a fall hollow) */
.hd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.hd-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 12px 96px 12px 14px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.hd-tile small { grid-column: 1 / -1; }
.hd-tile b { font: 600 24px/1 var(--heading-face); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-tile i { font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.hd-tile em { font-style: normal; color: var(--text); font-weight: 500; }
.hd-spark { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.hd-spark span { width: 6px; border-radius: 1.5px 1.5px 0 0; background: color-mix(in oklab, var(--text) 22%, var(--surface)); }
.hd-spark span.now { background: var(--text); }
.hd-spark span.gap { margin-left: 5px; }
.hd-spark span.neg { background: transparent; box-shadow: inset 0 0 0 1.2px color-mix(in oklab, var(--text) 40%, var(--surface)); }
.hd-spark span.now.neg { box-shadow: inset 0 0 0 1.2px var(--text); }

/* ---------- the filings as news: a month at a time */
.hd-news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 36px; }
.hd-news-m ol { list-style: none; margin: 0; padding: 0; border-top: 1px dotted var(--guide); }
.hd-news-m { margin-bottom: 14px; }
.hd-news-r { display: grid; grid-template-columns: 6.5ch 6ch minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--guide); }
.hd-news-r time { font: 400 11px/1.3 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.hd-form { justify-self: start; font: 400 10px/1 var(--mono); padding: 3px 5px; border: var(--line) solid var(--stroke-strong); border-radius: 3px; color: var(--text); white-space: nowrap; }
.hd-news-t { min-width: 0; color: var(--text); text-decoration: none; font: 500 13.5px/1.35 var(--sans); }
.hd-news-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.hd-src { padding-block: 20px 24px; }
.hd-method summary { cursor: pointer; font: 400 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hd-method summary:hover { color: var(--text); }
.hd-method ul { margin: 12px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 8px; font: 400 11px/1.6 var(--mono); color: var(--muted); max-width: 120ch; }
.hd-method b { color: var(--text); font-weight: 500; }
.hd-method a { color: inherit; }

/* ---------- smaller screens: the grids fold */
@media (max-width: 1100px) { .hd-segs { grid-template-columns: 1fr; } .hd-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; } .hd-seg > header, .hd-seg > .hd-seg-big, .hd-seg > .hd-why { grid-column: 1 / -1; } .hd-seg-fig { grid-column: 2; grid-row: 3 / span 2; } }
@media (max-width: 960px) {
  .hd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-stat:nth-child(n) { border-left-color: var(--guide); border-top: 1px dotted var(--guide); }
  .hd-stat:nth-child(2n + 1) { border-left-color: transparent; }
  .hd-stat:nth-child(-n + 2) { border-top: 0; }
  .hd-next { grid-template-columns: 1fr; }
  .hd-news { grid-template-columns: 1fr; }
  .hd-head { padding-block: 40px 24px; }
}
@media (max-width: 640px) {
  .hd-seg { display: flex; }
  .hd-deals, .hd-pairs { grid-template-columns: 1fr; }
  .hd-ev { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-inline: 4px; }
  .hd-ev-when { grid-column: 1 / -1; }
  .hd-ev-when small { display: inline; margin-left: 6px; }
  .hd-dt-r { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .hd-news-r { grid-template-columns: 6ch minmax(0, 1fr); }
  .hd-news-r .hd-form { display: none; }
}
@media (max-width: 560px) { .hd-stat { padding: 16px 14px 18px; } .hd-stat b { font-size: 25px; } .hd-stat i { font-size: 11.5px; } }