/* ============================================================
   Gantry web — Explore › Trends                              #/explore
   Layout + motion for surfaces/web/trends.jsx. Tokens only.
   Hairlines carry the structure; nothing here casts a shadow.
   ============================================================ */

.cg-tr-page { display: flex; flex-direction: column; gap: 16px; }
.cg-tr-muted { font-size: 10.5px; color: var(--fg-4); }
.cg-tr-wait { font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); }

.cg-tr-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
}
.cg-tr-h1 {
  margin: 6px 0 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.015em; color: var(--fg);
}
.cg-tr-lede {
  margin: 10px 0 0; max-width: 62ch;
  font-size: 13.5px; line-height: 1.55; color: var(--fg-2);
}
.cg-tr-asof { font-size: 10.5px; color: var(--fg-4); text-align: right; line-height: 1.6; }

/* ---------- Section furniture ---------- */
.cg-tr-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  /* A deep link lands the heading clear of the app chrome. */
  scroll-margin-top: 72px;
}
.cg-tr-sec-title { margin: 4px 0 0; font-size: 24px; }
.cg-tr-sec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px;
}
.cg-tr-sec-grid-3 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cg-tr-sec-foot { display: flex; justify-content: flex-end; }

/* ---------- Ranked list cards ---------- */
.cg-tr-list-card { overflow: hidden; display: flex; flex-direction: column; }
.cg-tr-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.cg-tr-list-head-main { min-width: 0; }
.cg-tr-list { list-style: none; margin: 0; padding: 0; }
.cg-tr-list-empty {
  font-family: var(--font-serif); font-size: 13.5px; color: var(--fg-4);
}
.cg-tr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .14s var(--ease);
  animation: cg-tr-rise .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.cg-tr-row:last-child { border-bottom: 0; }
.cg-tr-row:hover { background: var(--bg-hover); }
.cg-tr-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cg-tr-rank { width: 16px; flex: none; font-size: 10px; color: var(--fg-4); text-align: right; }
.cg-tr-logo { width: 28px; height: 28px; font-size: 11px; }
.cg-tr-avatar { width: 28px; height: 28px; font-size: 10.5px; flex: none; }
.cg-tr-row-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
.cg-tr-row-name {
  font-size: 13px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-row-sub {
  font-size: 10.5px; color: var(--fg-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-row-metric {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex: none; text-align: right;
}
.cg-tr-row-num { font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.cg-tr-row-num-sub { font-size: 10px; color: var(--fg-4); white-space: nowrap; }
/* Sentiment is stated by the caller, never inferred from a bare number. */
.cg-tr-row-num[data-dir="up"] { color: var(--good); }
.cg-tr-row-num[data-dir="down"] { color: var(--bad); }

/* A person's influence: tier · score · the shared ten-segment gauge, then the
   record counts under it. */
.cg-tr-influence {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none;
}
.cg-tr-influence-top { display: inline-flex; align-items: center; gap: 8px; }
.cg-tr-influence-score { font-size: 12px; color: var(--fg); }

/* ---------- Disciplines: one row you move through ---------- */
/* The STRIP scrolls sideways; the page never does. min-width:0 is what keeps
   that true inside the page's flex column — without it the widest card sets
   the column's width and the whole document gains a horizontal scrollbar. */
.cg-tr-carousel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cg-tr-carousel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cg-tr-carousel-at { letter-spacing: .02em; }
.cg-tr-carousel-arrows { display: inline-flex; gap: 6px; }
/* No chevronLeft in the icon set — one glyph, turned. */
.cg-tr-carousel-back { display: inline-flex; transform: rotate(180deg); }

.cg-tr-disc-strip {
  display: flex; gap: 14px; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' focus rings and their lift on hover. */
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  /* iOS/Safari: keep the flick momentum the strip is built around. */
  -webkit-overflow-scrolling: touch;
  scroll-margin-top: 72px;
}
.cg-tr-disc-strip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cg-tr-disc-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* One to three cards depending on the viewport, and never so narrow that
     the three entity columns inside collapse to nothing. */
  width: clamp(320px, 33.5vw, 460px);
  max-width: 100%;
  display: flex;
}
.cg-tr-disc-slide > .cg-tr-disc { flex: 1 1 auto; }
@media (max-width: 720px) {
  .cg-tr-disc-slide { width: min(88vw, 460px); }
}
.cg-tr-disc {
  overflow: hidden; display: flex; flex-direction: column;
  animation: cg-tr-rise .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.cg-tr-disc-body { display: flex; flex-direction: column; gap: 12px; }
.cg-tr-disc-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.cg-tr-disc-name {
  margin: 0;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.005em; color: var(--fg);
}
.cg-tr-disc-name-link {
  padding: 0; margin: 0; border: 0; background: none; text-align: left;
  font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-xs);
  transition: color .14s var(--ease);
}
.cg-tr-disc-name-link:hover { color: var(--brand-text); }
.cg-tr-disc-name-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cg-tr-counts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.cg-tr-count { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cg-tr-count-num { font-size: 26px; line-height: 1.1; }
.cg-tr-delta-line { font-size: 10.5px; white-space: nowrap; }
.cg-tr-delta-line[data-dir="up"] { color: var(--good); }
.cg-tr-delta-line[data-dir="down"] { color: var(--bad); }
.cg-tr-delta-line[data-dir="flat"] { color: var(--fg-4); }
.cg-tr-disc-summary {
  margin: 0; max-width: 64ch;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--fg-2);
}
.cg-tr-disc-summary-empty { color: var(--fg-4); }
.cg-tr-research {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 11.5px; line-height: 1.5; color: var(--fg-3);
}
.cg-tr-research b { font-weight: 500; color: var(--fg); }

/* Three compact columns of the entities that stand out in the discipline. */
.cg-tr-disc-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); background: var(--bg-1);
}
.cg-tr-disc-col { min-width: 0; padding: 12px 14px 10px; }
.cg-tr-disc-col + .cg-tr-disc-col { border-left: 1px solid var(--line); }
.cg-tr-disc-col-label { margin-bottom: 6px; }
.cg-tr-disc-list { list-style: none; margin: 0; padding: 0; }
.cg-tr-disc-row { border-top: 1px solid var(--line); }
.cg-tr-disc-row:first-child { border-top: 0; }
.cg-tr-disc-link {
  display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0;
  padding: 6px 0; margin: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-xs);
}
.cg-tr-disc-link:hover .cg-tr-disc-row-name { color: var(--brand-text); }
.cg-tr-disc-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cg-tr-disc-row-name {
  font-size: 12px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .14s var(--ease);
}
.cg-tr-disc-row-sub {
  font-size: 10px; color: var(--fg-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-disc-col-empty {
  padding: 6px 0; font-family: var(--font-serif); font-size: 12.5px; color: var(--fg-4);
}
.cg-tr-disc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px; border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .cg-tr-disc-cols { grid-template-columns: 1fr; }
  .cg-tr-disc-col + .cg-tr-disc-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Year series panels ---------- */
.cg-tr-panels {
  /* One panel per row since the funding panel became a flow diagram: a
     Sankey's whole job is the ribbons between two labelled columns, and at
     half width the gutters ate the names and the ribbons had nothing left. */
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.cg-tr-panel {
  overflow: hidden;
  animation: cg-tr-rise .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.cg-tr-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.cg-tr-panel-lede {
  margin: 6px 0 0; max-width: 46ch;
  font-size: 12px; line-height: 1.45; color: var(--fg-3);
}
.cg-tr-delta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: right;
}
.cg-tr-delta-years { font-size: 10px; color: var(--fg-4); }
/* The awards behind the dollars — the second figure on a money panel. */
.cg-tr-delta-sub { font-size: 10px; color: var(--fg-4); white-space: nowrap; }

/* ---------- Year chart ---------- */
.cg-tr-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 130px; margin: 18px 0 0;
}
.cg-tr-bar-slot {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 5px;
}
.cg-tr-bar {
  display: block; width: 100%; height: var(--h, 2%);
  background: var(--brand); border-radius: var(--r-xs);
  transform-origin: bottom;
  animation: cg-tr-grow .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
/* The year in progress is hatched, not short: a partial year drawn as a
   plain shorter bar reads as a decline. */
.cg-tr-bar[data-partial="true"] {
  background: repeating-linear-gradient(
    135deg, var(--brand), var(--brand) 3px,
    transparent 3px, transparent 6px);
  opacity: .75;
}
/* ⚠ A GAP IS A BREAK, NOT A ZERO. A missing year drawn to the floor reads as
   the year the activity stopped — a statement the data never made. */
.cg-tr-gap {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%; padding-bottom: 4px;
}
.cg-tr-gap-mark {
  display: block; width: 100%; height: 0;
  border-top: 1px dashed var(--line-strong);
}
.cg-tr-year { font-size: 9.5px; color: var(--fg-4); }

/* ---------- The long view, kept beside the funding delta ---------- */
.cg-tr-spark { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; }
.cg-tr-spark-svg { display: block; overflow: visible; }
.cg-tr-spark-seg {
  stroke: var(--fg-3); stroke-width: 1.5; stroke-linecap: round; fill: none;
}
/* The year in progress holds a fraction of a year; drawn solid it would read
   as a fall. Dashed, it reads as unfinished. */
.cg-tr-spark-seg[data-partial="true"] { stroke-dasharray: 2.5 2.5; opacity: .65; }
.cg-tr-spark-dot { fill: var(--brand); }

/* ---------- Flow diagrams ---------- */
/* ONE HUE, at one opacity. Nothing here encodes growth, decline or identity
   in color: the labels carry identity and the thickness carries the money. */
.cg-tr-flow { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cg-tr-flow-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
}
.cg-tr-flow-years { flex: none; }
.cg-tr-flow-caption { font-size: 10.5px; color: var(--fg-4); }
.cg-tr-flow-cols {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.cg-tr-flow-plot { position: relative; min-height: 120px; }
.cg-tr-flow-svg { display: block; width: 100%; overflow: visible; }

.cg-tr-flow-link {
  fill: var(--brand); fill-opacity: .22;
  transition: fill-opacity .16s var(--ease);
}
.cg-tr-flow-svg[data-dim="true"] .cg-tr-flow-link { fill-opacity: .07; }
.cg-tr-flow-svg .cg-tr-flow-link[data-on="true"] { fill-opacity: .46; }
/* The year toggle redraws the ribbons; a short fade reads as a redraw rather
   than a jump. Thickness is the message, so nothing else moves. */
.cg-tr-flow-ribbons { animation: cg-tr-flow-in .22s var(--ease) both; }

.cg-tr-flow-band { fill: var(--fg-3); transition: fill .16s var(--ease); }
/* The line from a band to its name, drawn only where de-collision moved the
   name off its bar. Recessive by default — it is wayfinding, not data. */
.cg-tr-flow-leader {
  fill: none; stroke: var(--line); stroke-width: 1;
  transition: stroke .16s var(--ease);
}
.cg-tr-flow-leader[data-on="true"] { stroke: var(--fg-3); }
.cg-tr-flow-band[data-on="true"] { fill: var(--fg); }
.cg-tr-flow-label {
  font-family: var(--font-sans); font-size: 11.5px; fill: var(--fg-2);
  dominant-baseline: middle; transition: fill .16s var(--ease);
}
.cg-tr-flow-label[data-on="true"] { fill: var(--fg); }

/* A node that IS an entity opens its page, so it wears a link's affordances:
   pointer, the hairline underline a name carries elsewhere on this page, and
   a real focus ring. The funding flow's institution side has no id to open,
   and those labels deliberately get none of this. */
.cg-tr-flow-labellink { cursor: pointer; pointer-events: none; }
/* The row rect under a linkable name carries the pointer; the glyphs do not
   (see the note in trends.jsx). It still needs the hand cursor. */
.cg-tr-flow-hit-band[data-link="true"] { cursor: pointer; }
.cg-tr-flow-labellink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.cg-tr-flow-label[data-link="true"] {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.cg-tr-flow-labellink:hover .cg-tr-flow-label[data-link="true"],
.cg-tr-flow-labellink:focus-visible .cg-tr-flow-label[data-link="true"] {
  fill: var(--fg);
  text-decoration-color: var(--brand);
}
/* The direct label the figure is read from, so --fg-3 rather than the page's
   --fg-4 muted: at 10px on the dark surface --fg-4 lands under 4.5:1, and a
   value you have to hover to read is not a direct label. */
/* The money rides on the name's own line, ahead of it, in the mono face and
   a step back in colour: the name is what a reader is scanning for, the
   figure is what they check once they have found it. */
.cg-tr-flow-money {
  font-family: var(--font-mono); font-size: 10px; fill: var(--fg-3);
}
.cg-tr-flow-label[data-on="true"] .cg-tr-flow-money { fill: var(--fg-2); }
/* A 1px ribbon must not be a 1px thing to hit. */
.cg-tr-flow-hit {
  fill: none; stroke: transparent; pointer-events: all; cursor: default;
}
.cg-tr-flow-hit-band { fill: transparent; pointer-events: all; cursor: default; }

.cg-tr-flow-tip {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(12px, -50%); pointer-events: none; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 300px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  /* A true overlay — the one place on this page a shadow is earned. */
  box-shadow: var(--shadow-md);
}
.cg-tr-flow-tip[data-flip="true"] { transform: translate(-100%, -50%) translateX(-12px); }
.cg-tr-flow-tip-name { font-size: 11.5px; line-height: 1.35; color: var(--fg); }
.cg-tr-flow-tip-num { font-size: 11px; color: var(--fg-2); }
.cg-tr-flow-tip-sub { font-size: 10.5px; color: var(--fg-4); }
.cg-tr-flow-tip-delta { font-size: 10.5px; color: var(--fg-4); }
.cg-tr-flow-tip-delta[data-dir="up"] { color: var(--good); }
.cg-tr-flow-tip-delta[data-dir="down"] { color: var(--bad); }

.cg-tr-flow-state {
  padding: 26px 0; font-family: var(--font-serif); font-size: 13.5px; color: var(--fg-4);
}
.cg-tr-flow-foot {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
/* Why one institution can appear twice. Said on the surface, not hidden in a
   tooltip — it is a property of the record, not a rendering detail. */
.cg-tr-flow-note {
  margin: 0; max-width: 62ch; flex: 1 1 320px;
  font-size: 10.5px; line-height: 1.5; color: var(--fg-4);
}

/* The table twin: every value the ribbons carry, reachable without a mouse. */
.cg-tr-flow-table-wrap { overflow-x: auto; }
.cg-tr-flow-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cg-tr-flow-table-cap {
  text-align: left; padding-bottom: 6px; font-size: 10.5px; color: var(--fg-4);
}
.cg-tr-flow-table th, .cg-tr-flow-table td {
  padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.cg-tr-flow-table th { font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.cg-tr-flow-table td { color: var(--fg-2); }
.cg-tr-flow-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg-tr-flow-table td[data-dir="up"] { color: var(--good); }
.cg-tr-flow-table td[data-dir="down"] { color: var(--bad); }

.cg-tr-flow-card { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .cg-tr-flow-bar { align-items: flex-start; }
  .cg-tr-flow-tip { max-width: 220px; }
}

@keyframes cg-tr-flow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cg-tr-panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.cg-tr-basis {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--fg-4);
}
.cg-tr-scheduled { font-size: 10.5px; color: var(--brand-text); }

/* ---------- Where the money moved (payer shift) ----------
   A column per company, so one payer's gains and losses read together — a
   single flat list would interleave two companies' decisions and express
   neither. Layout only; every colour, hairline and radius is a token. */
.cg-tr-shift-grid {
  display: grid; gap: 18px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cg-tr-shift-payer {
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 12px 14px; min-width: 0;
}
.cg-tr-shift-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.cg-tr-shift-payer-name {
  font-size: 13.5px; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-shift-sub { font-size: 10.5px; color: var(--fg-4); margin-top: 3px; }
.cg-tr-shift-rows { list-style: none; padding: 0; margin: 10px 0 0; }
.cg-tr-shift-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.cg-tr-shift-row:last-child { border-bottom: 0; }
.cg-tr-shift-name {
  font-size: 12.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-shift-note {
  grid-column: 1 / -1; font-size: 10px; color: var(--fg-4);
}

/* ---------- Movers ---------- */
.cg-tr-mover-list { list-style: none; margin: 0; padding: 4px 18px 14px; }
.cg-tr-mover {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 12px; padding: 5px 0;
  animation: cg-tr-rise .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
/* A mover that resolved to an organization is a link to it. */
.cg-tr-mover-link { cursor: pointer; margin: 0 -8px; padding: 5px 8px; border-radius: var(--r-xs); }
.cg-tr-mover-link:hover { background: var(--bg-hover); }
.cg-tr-mover-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cg-tr-mover-name {
  font-size: 12px; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-mover-state { font-size: 9.5px; color: var(--fg-4); margin-left: 6px; }
.cg-tr-mover-nums { font-size: 10.5px; color: var(--fg-4); white-space: nowrap; }
.cg-tr-mover-change {
  font-size: 10.5px; min-width: 108px; text-align: right; white-space: nowrap;
}
/* Money panels: the awards and the average each implies, under the dollars.
   Spans the row so the dollar columns above stay aligned across the list. */
.cg-tr-mover-sub {
  grid-column: 1 / -1; margin-top: -3px;
  font-size: 9.5px; color: var(--fg-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cg-tr-mover-change[data-dir="up"] { color: var(--good); }
.cg-tr-mover-change[data-dir="down"] { color: var(--bad); }
.cg-tr-mover-change[data-dir="flat"] { color: var(--fg-4); }

/* ---------- Rising ---------- */
.cg-tr-rising { overflow: hidden; }
.cg-tr-rising-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid var(--line);
}
.cg-tr-rising-list { list-style: none; margin: 0; padding: 0; }
.cg-tr-rising-row {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .14s var(--ease);
  animation: cg-tr-rise .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.cg-tr-rising-row:last-child { border-bottom: 0; }
.cg-tr-rising-row:hover { background: var(--bg-hover); }
.cg-tr-rising-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cg-tr-rising-main {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto;
}
.cg-tr-rising-name { font-size: 13px; color: var(--fg); }
.cg-tr-rising-usd { font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.cg-tr-rising-where { white-space: nowrap; }
.cg-tr-rising-because {
  font-size: 10.5px; color: var(--fg-4); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Meetings (the embedded browse view) ---------- */
/* CongressBrowse is a page of its own and arrives with page padding and a
   page-size display heading. Nested here it is one rung of the People
   section, so the wrapper takes the padding back and brings its heading
   down to the section scale. Only layout is touched; the component is not
   forked. */
.cg-tr-meetings > .cg-page { padding: 0; max-width: none; }
.cg-tr-meetings .cg-cg-h1 { font-size: 24px; }

/* ---------- Compliance events ---------- */
/* One card spanning the section grid: the window's mix by kind in a side
   column, the most recent records beside it, the reading of the score
   under both. Adverse kinds draw in --bad / --warn through the DS pill and
   dot; nothing on the card is ever drawn in --good except a clean score. */
.cg-tr-sec-grid-full { grid-column: 1 / -1; }
.cg-tr-comp-body { display: grid; grid-template-columns: minmax(250px, 310px) 1fr; }
.cg-tr-comp-mix {
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--line);
  /* Wide enough for the longest kind ("state program exclusion") to read
     whole; a truncated category is a category the reader cannot check. */
  --meter-label-w: 178px;
}
.cg-tr-comp-mix-label { margin-bottom: 2px; }
.cg-tr-comp-total { font-size: 11px; color: var(--fg-2); margin-top: 4px; }
.cg-tr-comp-undated { line-height: 1.45; }
.cg-tr-comp-row { gap: 14px; }
.cg-tr-comp-row .cg-tr-row-main { flex: 1 1 180px; }
.cg-tr-comp-event { display: flex; flex-direction: column; gap: 3px; flex: 1.4 1 220px; min-width: 0; }
.cg-tr-comp-detail {
  font-size: 11px; line-height: 1.4; color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tr-comp-when { min-width: 84px; }
.cg-tr-comp-score {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
  flex: none; width: 76px;
}
.cg-tr-comp-score-num { font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.cg-tr-comp-reading {
  margin: 0; border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-size: 12.5px; line-height: 1.5; color: var(--fg-3);
}

/* ---------- The check-in panel ---------- */
/* The ranked list is the panel's body; the public record is one signal
   INSIDE it, under a hairline — never a second card, never a shadow: they
   are two readings of one population and the merge is the point (see the
   header note in trends.jsx). */
.cg-tr-checkin > .cg-tr-comp { border-top: 1px solid var(--line); }
.cg-tr-checkin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cg-tr-checkin-head .cg-tr-panel-lede { margin-bottom: 0; max-width: 66ch; }
/* The cohort switch. Label first so the control sits at the card's edge,
   where the eye leaves the heading. */
.cg-tr-checkin-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; cursor: pointer;
}
/* An unread mark can only appear while the switch is ON — the whitespace
   cohort has no watch behind it to measure a read against. */
.cg-tr-checkin-new {
  margin-left: 6px; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand);
}
/* The rule spans the card; only the measure is capped. */
.cg-tr-comp-reading > span { display: block; max-width: 78ch; }
@media (max-width: 760px) {
  .cg-tr-comp-body { grid-template-columns: 1fr; }
  .cg-tr-comp-mix { border-right: 0; border-bottom: 1px solid var(--line); }
  .cg-tr-comp-row { flex-wrap: wrap; }
  .cg-tr-comp-event { flex-basis: 100%; padding-left: 28px; }
}

@keyframes cg-tr-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cg-tr-grow {
  from { transform: scaleY(0); opacity: .4; }
  to   { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-tr-panel, .cg-tr-disc, .cg-tr-bar, .cg-tr-mover, .cg-tr-row, .cg-tr-rising-row,
  .cg-tr-flow-ribbons {
    animation: none;
  }
  .cg-tr-row, .cg-tr-rising-row, .cg-tr-disc-row-name, .cg-tr-disc-name-link,
  .cg-tr-flow-link, .cg-tr-flow-band, .cg-tr-flow-label { transition: none; }
  /* The strip still moves a card at a time — it just arrives instead of
     travelling. The JS reads the same preference and stops asking for
     smooth, so neither half can re-introduce the animation alone. */
  .cg-tr-disc-strip { scroll-behavior: auto; }
}