@import url("./article-visual-quantitative.css?v=3");
@import url("./article-visual-diagram.css?v=3");
@import url("./article-visual-commercial.css?v=3");
@import url("./article-visual-advanced.css?v=3");

/* Author-supplied visual blocks only. Article narrative keeps its own styles. */
.otr-article-visuals {
  --visual-ink: var(--otr-ink, #111110);
  --visual-paper: var(--otr-surface, #fffdf8);
  --visual-muted: #554b3f;
  --visual-warm: var(--otr-warm, #f1e9dc);
  --visual-line: #d4c8b5;
  --visual-accent: var(--otr-orange-dark, #a83c08);
  --visual-series-0: var(--visual-accent);
  --visual-series-1: #dac8ae;
  --visual-series-2: #3b3229;
  --visual-series-3: #9c704d;
  --visual-series-4: #6f463c;
  --visual-series-5: #a69575;
  --visual-series-6: #664d30;
  --visual-series-7: #c08358;
  min-width: 0;
  max-width: 100%;
  margin-block: 1.75rem;
  color: var(--visual-ink);
  font: 400 1rem/1.5 Arial, Helvetica, sans-serif;
}

.otr-article-visuals-early {
  --visual-series-0: var(--visual-ink);
  --visual-series-2: var(--visual-accent);
}

.otr-article-visuals .otr-visual,
.otr-article-visuals .otr-visual * {
  box-sizing: border-box;
}

.otr-article-visuals .otr-visual {
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 1.75rem;
  padding: clamp(1.1rem, 3cqi, 1.75rem) 0;
  border: 0;
  border-block: 1px solid var(--visual-line);
  border-radius: 0;
  background: transparent;
  color: var(--visual-ink);
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
}

.otr-article-visuals .otr-visual figcaption {
  margin: 0 0 1.25rem;
  padding: 0;
  color: inherit;
  font: inherit;
}

.otr-article-visuals .otr-visual-title {
  display: block;
  font-size: clamp(1.25rem, 1.1rem + 1.8cqi, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.otr-article-visuals .otr-visual-context {
  display: block;
  margin-top: .5rem;
  color: var(--visual-muted);
  font-size: 1rem;
}

.otr-article-visuals .otr-visual-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.otr-article-visuals .otr-visual-table {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  border-radius: 0;
  table-layout: fixed;
  color: inherit;
  background: transparent;
  font: inherit;
}

.otr-article-visuals .otr-visual-table-wide {
  min-width: 36rem;
}

.otr-article-visuals .otr-visual-table :is(th, td) {
  padding: .75rem .8rem;
  border: 0;
  vertical-align: top;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.otr-article-visuals .otr-visual-table tr + tr > *,
.otr-article-visuals .otr-visual-table tbody tr:first-child > * {
  border-top: 1px solid var(--visual-line);
}

.otr-article-visuals .otr-visual-table tr > * + * {
  border-inline-start: 0;
}

.otr-article-visuals .otr-visual-table thead th {
  background: var(--visual-warm);
  font-weight: 700;
}

.otr-article-visuals .otr-visual-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap !important;
}

.otr-article-visuals .otr-visual .otr-visual-alternative {
  margin: .6rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--visual-ink) !important;
}

.otr-article-visuals .otr-visual .otr-visual-alternative > summary {
  min-height: 2.75rem;
  padding-block: .55rem;
  cursor: pointer;
  color: var(--visual-accent) !important;
  font-size: .938rem !important;
  font-weight: 700;
}

.otr-article-visuals .otr-visual :is(a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--visual-accent);
  outline-offset: 2px;
}

.otr-article-visuals .otr-visual-bars,
.otr-article-visuals .otr-visual-bar-row {
  display: grid;
  gap: .85rem 1rem;
}

.otr-article-visuals .otr-visual-bar-row {
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2.3fr) minmax(4rem, .5fr);
  align-items: center;
}

.otr-article-visuals .otr-visual-bar-value,
.otr-article-visuals .otr-visual-line-labels strong,
.otr-article-visuals .otr-visual-axis,
.otr-article-visuals .otr-visual-stat strong {
  font-variant-numeric: tabular-nums;
}

.otr-article-visuals .otr-visual-bar-value {
  text-align: end;
  font-size: 1.125rem;
  white-space: nowrap;
}

.otr-article-visuals .otr-visual-bar-ticks {
  position: relative;
  grid-column: 2;
  min-height: 1.75rem;
  border-top: 1px solid var(--visual-muted);
}

.otr-article-visuals .otr-visual-tick {
  position: absolute;
  color: var(--visual-muted);
  font-size: .875rem;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  width: max-content;
  max-width: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.otr-article-visuals .otr-visual-bar-ticks .otr-visual-tick {
  top: .15rem;
  left: var(--otr-tick-position);
  transform: translateX(-50%);
}

.otr-article-visuals .otr-visual-bar-ticks .otr-visual-tick-first { transform: none; }
.otr-article-visuals .otr-visual-bar-ticks .otr-visual-tick-last { transform: translateX(-100%); }

.otr-article-visuals .otr-visual svg.otr-visual-bar-plot {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1.65rem !important;
}

.otr-article-visuals .otr-visual svg.otr-visual-line-plot {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(10rem, 34cqi, 17rem) !important;
  overflow: visible;
}

.otr-article-visuals .otr-visual-line-graphic {
  display: grid;
  grid-template-columns: minmax(3.3rem, auto) minmax(0, 1fr);
  column-gap: .4rem;
}

.otr-article-visuals .otr-visual-line-ticks {
  position: relative;
  min-width: 4.6rem;
}

.otr-article-visuals .otr-visual-line-ticks .otr-visual-tick {
  top: var(--otr-tick-position);
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}

.otr-article-visuals .otr-visual-track {
  fill: var(--visual-warm);
}

.otr-article-visuals .otr-visual-gridline,
.otr-article-visuals .otr-visual-axis-line,
.otr-article-visuals .otr-visual-line,
.otr-article-visuals .otr-visual-point {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.otr-article-visuals .otr-visual-gridline { stroke: var(--visual-line); }
.otr-article-visuals .otr-visual-axis-line { stroke: var(--visual-muted); }
.otr-article-visuals .otr-visual-line { stroke: var(--visual-series-0); stroke-width: 2.25px; }
.otr-article-visuals .otr-visual-point { stroke: var(--visual-series-0); stroke-width: 7px; }

.otr-article-visuals .otr-visual-axis {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid var(--visual-line);
  color: var(--visual-muted);
  font-size: .875rem;
}

.otr-article-visuals .otr-visual-spacing-note {
  margin-top: .15rem;
  color: var(--visual-muted);
  font-size: .875rem;
}

.otr-article-visuals .otr-visual-line-labels {
  display: flex;
  grid-column: 2;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .35rem;
}

.otr-article-visuals .otr-visual-line-labels > :last-child { text-align: end; }
.otr-article-visuals .otr-visual-line-labels strong { display: block; }

.otr-article-visuals .otr-visual-series-0 { --visual-series: var(--visual-series-0); }
.otr-article-visuals .otr-visual-series-1 { --visual-series: var(--visual-series-1); }
.otr-article-visuals .otr-visual-series-2 { --visual-series: var(--visual-series-2); }
.otr-article-visuals .otr-visual-series-3 { --visual-series: var(--visual-series-3); }
.otr-article-visuals .otr-visual-series-4 { --visual-series: var(--visual-series-4); }
.otr-article-visuals .otr-visual-series-5 { --visual-series: var(--visual-series-5); }
.otr-article-visuals .otr-visual-series-6 { --visual-series: var(--visual-series-6); }
.otr-article-visuals .otr-visual-series-7 { --visual-series: var(--visual-series-7); }
.otr-article-visuals .otr-visual-bar { fill: var(--visual-series); }
.otr-article-visuals-signal .otr-visual-bar { fill: var(--visual-accent); }
.otr-article-visuals .otr-visual-arc { fill: none; stroke: var(--visual-series); }

.otr-article-visuals .otr-visual-composition {
  display: grid;
  grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
  gap: .75rem 1.25rem;
  align-items: center;
}

.otr-article-visuals .otr-visual-composition-plot {
  position: relative;
  width: min(100%, 18rem);
  aspect-ratio: 1;
  justify-self: center;
}

.otr-article-visuals .otr-visual-composition-plot svg {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

.otr-article-visuals .otr-visual-donut-center {
  position: absolute;
  inset: 25%;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: .8rem;
  line-height: 1.15;
}

.otr-article-visuals .otr-visual-donut-center strong {
  font-weight: 800;
  font-size: clamp(1.5rem, 6cqi, 3rem);
  margin-bottom: .15rem;
}

.otr-article-visuals .otr-visual-swatch {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-inline-end: .4em;
  border: 1px solid var(--visual-muted);
  border-radius: 50%;
  background: var(--visual-series);
}

.otr-article-visuals .otr-visual :is(.otr-visual-sequence, .otr-visual-sources ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.otr-article-visuals .otr-visual-sequence li { min-width: 0; }
.otr-article-visuals .otr-visual-sources li { margin: .15rem 0 0; padding: 0; }
.otr-article-visuals .otr-visual-sequence strong { display: block; }
.otr-article-visuals .otr-visual-detail { display: block; white-space: pre-wrap; }
.otr-article-visuals .otr-visual-detail:not(:empty) { margin-top: .2rem; }
.otr-article-visuals .otr-visual-sequence li + li { margin-top: 0; }

.otr-article-visuals .otr-visual-timeline li {
  position: relative;
  padding: 0 0 .85rem 1.125rem;
}

.otr-article-visuals .otr-visual-timeline li:last-child { padding-bottom: 0; }
.otr-article-visuals .otr-visual-timeline li:not(:last-child)::before {
  content: '';
  position: absolute;
  inset: .65em auto -.65em .28rem;
  border-inline-start: 1px solid var(--visual-series-0);
}

.otr-article-visuals .otr-visual-timeline li::after {
  content: '';
  position: absolute;
  inset: .47em auto auto .02rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--visual-series-0);
}

.otr-article-visuals .otr-visual-comparison,
.otr-article-visuals .otr-visual-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.otr-article-visuals .otr-visual-flow {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(7.5rem, 1fr);
  overflow-x: auto;
}

.otr-article-visuals .otr-visual-flow:has(> :nth-child(5)) {
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, 1fr);
  overflow: visible;
}

.otr-article-visuals .otr-visual-comparison li,
.otr-article-visuals .otr-visual-flow li > div {
  padding: 1rem;
  border: 1px solid var(--visual-line);
  border-radius: .25rem;
  background: transparent;
}

.otr-article-visuals .otr-visual-flow li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: .45rem;
}

.otr-article-visuals .otr-visual-flow li:last-child { grid-template-columns: minmax(0, 1fr); }
.otr-article-visuals .otr-visual-flow-arrow { align-self: center; font-size: 1.75rem; color: var(--visual-accent); }
.otr-article-visuals .otr-visual-flow li:last-child .otr-visual-flow-arrow { display: none; }

.otr-article-visuals .otr-visual-flow:has(> :nth-child(5)) li { grid-template-columns: minmax(0, 1fr); }
.otr-article-visuals .otr-visual-flow:has(> :nth-child(5)) .otr-visual-flow-arrow {
  justify-self: center;
  transform: rotate(90deg);
}

.otr-article-visuals .otr-visual-stat strong {
  display: block;
  color: var(--visual-series-0);
  font-size: clamp(2.75rem, 11cqi, 5.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.otr-article-visuals .otr-visual-stat span {
  display: block;
  margin-top: .25rem;
  font-weight: 650;
}

.otr-article-visuals .otr-visual-callout,
.otr-article-visuals .otr-visual-note {
  padding: .85rem 0;
  border: 0;
  border-top: 1px solid var(--visual-line);
  border-radius: 0;
  background: transparent;
  white-space: pre-wrap;
}

.otr-article-visuals .otr-visual-note {
  margin-top: .875rem;
  color: var(--visual-muted);
  font-style: italic;
}

.otr-article-visuals .otr-visual-sources {
  margin-top: .875rem;
  padding-top: .55rem;
  border-top: 1px solid var(--visual-line);
  color: var(--visual-muted);
  font-size: .938rem;
}

.otr-article-visuals .otr-visual-sources a {
  color: var(--visual-accent);
  text-decoration: underline;
  text-underline-offset: .16em;
}

@container (max-width: 34rem) {
  .otr-article-visuals .otr-visual-flow {
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .otr-article-visuals .otr-visual-flow li { grid-template-columns: minmax(0, 1fr); }
  .otr-article-visuals .otr-visual-flow-arrow { justify-self: center; transform: rotate(90deg); }
}

@container (max-width: 25rem) {
  .otr-article-visuals .otr-visual-bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); }
  .otr-article-visuals .otr-visual-bar-label { grid-column: 1; grid-row: 1; }
  .otr-article-visuals .otr-visual-bar-value { grid-column: 2; grid-row: 1; }
  .otr-article-visuals :is(.otr-visual-bar-plot, .otr-visual-bar-ticks) { grid-column: 1 / -1; }
  .otr-article-visuals .otr-visual-bar-ticks .otr-visual-tick:not(.otr-visual-tick-first, .otr-visual-tick-last) { display: none; }
  .otr-article-visuals .otr-visual-composition { grid-template-columns: minmax(0, 1fr); }
  .otr-article-visuals .otr-visual-composition-plot { width: min(16rem, 100%); }
  .otr-article-visuals .otr-visual-table :is(th, td) { padding: .4rem .5rem; }
}

@container (max-width: 14rem) {
  .otr-article-visuals .otr-visual-donut-center > span { display: none; }
}

/* Match the existing interface font inside Signal and Early narrative layers. */
@layer otr-serif-system {
  body .otr-article-visuals[data-otr-article-visuals] .otr-visual :not(svg, svg *) {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body .otr-article-visuals[data-otr-article-visuals] .otr-visual :is(figcaption, li, th, td) {
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }
}

/* An editorial sequence, with equal spacing representing order only. */
.otr-article-visuals .otr-visual-timeline { display: grid; gap: 1rem; }
.otr-article-visuals .otr-visual-timeline li { padding: 0 0 1rem 1.75rem; }
.otr-article-visuals .otr-visual-timeline li::after {
  inset: .3em auto auto 0; width: .8rem; height: .8rem;
  border: 2px solid var(--visual-accent); background: var(--visual-paper);
}
.otr-article-visuals .otr-visual-timeline li:not(:last-child)::before {
  inset: .65em auto -1.65em .36rem; border-color: var(--visual-line);
}
.otr-article-visuals .otr-visual-timeline strong { font-size: 1.1rem; color: var(--visual-accent); }
.otr-article-visuals .otr-visual-stat { padding-block: .75rem 1.25rem; }
.otr-article-visuals .otr-visual-stat span { margin-top: .75rem; font-size: 1.125rem; }
.otr-article-visuals .otr-visual-composition .otr-visual-table { font-size: 1.05rem; }
.otr-article-visuals .otr-visual-composition td { font-weight: 750; text-align: end; }
@container (min-width: 38rem) {
  .otr-article-visuals .otr-visual-timeline:not(:has(> :nth-child(5))) {
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  }
  .otr-article-visuals .otr-visual-timeline:not(:has(> :nth-child(5))) li {
    padding: 2.25rem 1rem .5rem 0;
  }
  .otr-article-visuals .otr-visual-timeline:not(:has(> :nth-child(5))) li::after { inset: .4rem auto auto 0; }
  .otr-article-visuals .otr-visual-timeline:not(:has(> :nth-child(5))) li:not(:last-child)::before {
    inset: .75rem 0 auto .4rem; border-inline-start: 0; border-top: 1px solid var(--visual-line);
  }
}