/* research charts (owned by the charts task)
 * Static HTML/CSS charts. Every value is real text in the markup; the bars are
 * decoration drawn from --v (a percentage of the track). JS only adds .has-js on <html>
 * and .is-in on a figure when it scrolls into view. No script, or reduced motion => final state.
 */

.rchart {
  --rc-ink: var(--ink, #2a2a2c);
  --rc-ink-strong: var(--ink-strong, #0a0a0b);
  --rc-muted: var(--ink-muted, #55555a);
  --rc-rule: var(--rule, rgba(42, 42, 44, 0.16));
  --rc-wash: var(--c-wash, rgba(181, 214, 192, 0.22));
  --rc-own: var(--c-own, #b5d6c0);
  --rc-leak: var(--c-leak, #f3cdbf);
  --rc-none: var(--c-none, #c3d9ee);
  --rc-neutral: var(--c-neutral, #d9d6cf);
  --rc-serif: var(--font-serif, 'Libertinus Serif', serif);
  --rc-mono: var(--font-mono, 'Share Tech Mono', monospace);
  --rc-label-w: 11rem;
  --rc-value-w: 6.75rem;
  --rc-gap: 0.9rem;
  --rc-bar-h: 1.35rem;
  --rc-dur: 900ms;
  --rc-ease: cubic-bezier(0.33, 1, 0.68, 1);

  container: rchart / inline-size;
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
  margin-inline: 0;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--rc-rule);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--rc-ink);
  font-family: var(--rc-serif);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: break-word;
}

/* ---------- head ---------- */
.rchart__head {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.15rem;
}
.rchart .rchart__title {
  margin: 0;
  padding: 0;
  max-width: 38em;
  color: var(--rc-ink-strong);
  font-family: var(--rc-serif);
  font-size: clamp(1.2rem, 4.6cqi, 1.5rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

/* ---------- rows (stacked by default; widened by the container query below) ---------- */
.rchart__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.rchart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'label value' 'track track';
  align-items: end;
  gap: 0.3rem var(--rc-gap);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  break-inside: avoid;
}
.rchart__label {
  grid-area: label;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.rchart__value {
  grid-area: value;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem;
  font-family: var(--rc-mono);
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rchart__num {
  font-variant-numeric: tabular-nums;
}
.rchart__n {
  color: var(--rc-muted);
  font-size: 0.78rem;
}
.rchart__track {
  grid-area: track;
  position: relative;
  height: var(--rc-bar-h);
  min-width: 0;
  background-color: var(--rc-wash);
  background-image: linear-gradient(to right, var(--rc-rule) 1px, transparent 1px);
  background-size: 25% 100%;
  border-right: 1px solid var(--rc-rule);
}
.rchart__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--v, 0) * 1%);
  box-sizing: border-box;
  border: 1px solid var(--rc-ink);
  background: var(--rc-neutral);
  transform-origin: left center;
}
.rchart__bar[data-tone='own'] { background: var(--rc-own); }
.rchart__bar[data-tone='leak'] { background: var(--rc-leak); }
.rchart__bar[data-tone='none'] { background: var(--rc-none); }
.rchart__bar[data-tone='neutral'] { background: var(--rc-neutral); }

/* diverging bars around a centre line: --v is the share of the HALF axis (0-100) */
.rchart__track--div::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--rc-ink);
}
.rchart__bar--pos { left: 50%; width: calc(var(--v, 0) * 0.5%); }
.rchart__bar--neg { left: auto; right: 50%; width: calc(var(--v, 0) * 0.5%); transform-origin: right center; }

/* axis under a plot: tick labels sit on the same track column as the bars */
.rchart__axis {
  margin: 0.2rem 0 0;
  color: var(--rc-muted);
  font-family: var(--rc-mono);
  font-size: 0.74rem;
  line-height: 1;
}
.rchart__ticks {
  display: block;
  position: relative;
  height: 1rem;
}
.rchart__ticks i {
  position: absolute;
  top: 0;
  left: calc(var(--at, 0) * 1%);
  transform: translateX(calc(var(--at, 0) * -1%));
  font-style: normal;
  white-space: nowrap;
}

/* ---------- panels (small multiples / grouped) ---------- */
.rchart__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
  gap: 1.6rem 1.75rem;
}
.rchart__panel {
  min-width: 0;
}
.rchart .rchart__panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.75rem;
  margin: 0 0 0.7rem;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid var(--rc-rule);
  color: var(--rc-ink-strong);
  font-family: var(--rc-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.rchart__panel-note {
  color: var(--rc-muted);
  font-family: var(--rc-mono);
  font-size: 0.76rem;
  font-weight: 400;
}
.rchart__panel-hint {
  margin: -0.35rem 0 0.7rem;
  color: var(--rc-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

/* ---------- dot strip (model -> favorite brand) ---------- */
.rchart__cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  margin: 0 0 0.5rem;
  color: var(--rc-ink);
  font-family: var(--rc-mono);
  font-size: 0.74rem;
  line-height: 1.2;
  text-align: center;
}
.rchart__cols span { display: block; }
.rchart__cols b { display: block; margin-top: 0.12rem; font-weight: 400; color: var(--rc-muted); }
.rchart__cells {
  grid-area: track;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  min-width: 0;
  height: 1.7rem;
  background: linear-gradient(var(--rc-rule), var(--rc-rule)) center / 100% 1px no-repeat;
}
.rchart__cell {
  display: grid;
  place-items: center;
  font-style: normal;
}
.rchart__dot {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  box-sizing: border-box;
  border: 1px solid var(--rc-ink);
  border-radius: 50%;
  background: var(--rc-neutral);
}
.rchart__dot[data-tone='own'] { background: var(--rc-own); }
.rchart__dot[data-tone='leak'] { background: var(--rc-leak); }
.rchart__dot[data-tone='none'] { background: var(--rc-none); }
.rchart--strip { --rc-label-w: 7.75rem; --rc-value-w: 9rem; }
.rchart--strip .rchart__value {
  font-family: var(--rc-serif);
  font-size: 1rem;
  white-space: normal;
  justify-content: flex-start;
  text-align: left;
}

/* ---------- caption + source ---------- */
.rchart__caption {
  margin: 1.1rem 0 0;
  max-width: 44rem;
  color: var(--rc-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.rchart__source {
  margin: 0.45rem 0 0;
  color: var(--rc-muted);
  font-family: var(--rc-mono);
  font-size: 0.76rem;
  line-height: 1.45;
}
.rchart__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- archive map (links into the explorer) ---------- */
a.rchart__row { cursor: pointer; }
a.rchart__row:hover .rchart__label,
a.rchart__row:focus-visible .rchart__label {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a.rchart__row:focus-visible {
  outline: 2px solid var(--rc-ink-strong);
  outline-offset: 3px;
  border-radius: 2px;
}
.rchart--archive .rchart__rows { gap: 0.55rem; }
.rchart--archive { --rc-bar-h: 1.1rem; }

/* ---------- copy status (created by research-charts.js) ---------- */
.report-status {
  color: var(--ink-muted, #55555a);
  font-family: var(--font-mono, 'Share Tech Mono', monospace);
  font-size: 0.78rem;
  line-height: 1.3;
}
.report-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- wide container: label | track | value on one line ---------- */
@container rchart (min-width: 34rem) {
  .rchart__plot > .rchart__rows > .rchart__row,
  .rchart__plot > .rchart__rows > li > .rchart__row {
    grid-template-columns: var(--rc-label-w) minmax(0, 1fr) var(--rc-value-w);
    grid-template-areas: 'label track value';
    align-items: center;
  }
  .rchart__plot > .rchart__rows .rchart__label { font-size: 1.02rem; }
  .rchart__plot > .rchart__rows .rchart__value { flex-direction: column; align-items: flex-end; gap: 0.1rem; }
  .rchart--strip .rchart__plot > .rchart__rows .rchart__value { align-items: flex-start; }
  .rchart__plot > .rchart__axis {
    padding-left: calc(var(--rc-label-w) + var(--rc-gap));
    padding-right: calc(var(--rc-value-w) + var(--rc-gap));
  }
  .rchart__plot > .rchart__cols {
    padding-left: calc(var(--rc-label-w) + var(--rc-gap));
    padding-right: calc(var(--rc-value-w) + var(--rc-gap));
  }
}
@container rchart (min-width: 44rem) {
  .rchart--archive .rchart__plot > .rchart__rows { columns: 2; column-gap: 2.25rem; display: block; }
  .rchart--archive .rchart__plot > .rchart__rows > li { margin: 0 0 0.55rem; break-inside: avoid; }
  .rchart--archive { --rc-label-w: 10.5rem; --rc-value-w: 2.5rem; }
}
@container rchart (max-width: 21rem) {
  .rchart { --rc-bar-h: 1.2rem; }
  .rchart__value { font-size: 0.92rem; }
}

/* ---------- animation: only when JS is present AND motion is allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rchart__bar {
    transition: transform var(--rc-dur) var(--rc-ease) var(--d, 0ms);
  }
  .rchart__dot {
    transition: transform calc(var(--rc-dur) * 0.55) var(--rc-ease) var(--d, 0ms),
      opacity calc(var(--rc-dur) * 0.4) ease-out var(--d, 0ms);
  }
  .has-js .rchart:not(.is-in) .rchart__bar { transform: scaleX(0); }
  .has-js .rchart:not(.is-in) .rchart__dot { transform: scale(0.2); opacity: 0; }
}
@media print {
  .rchart { break-inside: avoid; background: none; }
  .rchart__bar, .rchart__dot { transform: none !important; opacity: 1 !important; transition: none !important; }
}