/* Silvercrest Chart — shared styles (Bloomberg-style print chart, web-rendered) */
@import url('colors_and_type.css');

/* ── GoudySAMG: replaces all type across the charts ──────────────────────
   Three uploaded cuts mapped across the weight range so the existing
   weight values (300/400/500 → regular, 600/700 → bold) resolve cleanly,
   and any italic request uses the italic cut. */
@font-face {
  font-family: "GoudySAMG";
  src: url("fonts/GoudySAMG.ttf") format("truetype");
  font-weight: 100 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GoudySAMG";
  src: url("fonts/GoudySAMGBold.ttf") format("truetype");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GoudySAMG";
  src: url("fonts/GoudySAMGItalic.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* Repoint every brand type variable to GoudySAMG. Because all chart text
   (titles, eyebrows, subtitles, axis labels, legends, source lines) resolves
   through these vars, this swaps the font everywhere while keeping each
   element's size, weight, color and styling untouched. */
:root {
  --sc-serif-display: "GoudySAMG", Georgia, serif;
  --sc-serif-text:    "GoudySAMG", Georgia, serif;
  --sc-sans:          "GoudySAMG", Georgia, serif;
  --sc-copperplate:   "GoudySAMG", Georgia, serif;
  --sc-mono:          "GoudySAMG", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--sc-fg-1);
  font-family: var(--sc-serif-display);
}

.sc-figure {
  /* Graphic sized for document placement: 3.75in wide max; the chart+legend
     block is held to 3in tall per-figure (independent of title/subtitle/source).
     Fixed-height zones (head / chart / legend) make the x-axis baseline and the
     source line land at the same y across all four charts. */
  width: 3.75in;
  max-width: 3.75in;
  margin: 0 auto;
  padding: 14px 7px 12px;
  background: #fff;
  font-family: var(--sc-serif-display);
  display: flex;
  flex-direction: column;
}

/* Fixed header zone — title/divider/subtitle bottom-aligned so the chart top
   (and therefore the x-axis) is at the same y regardless of title line-count. */
.sc-head {
  height: 1.35in;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sc-head > :first-child { margin-top: 0; }

/* Legend zone below the chart — sized to content so empty zones collapse. */
.sc-legendzone {
  height: auto;
  width: 100%;
  padding-top: 4px;
}
.sc-legendzone .sc-legend { margin: 0; }

/* Eyebrow / fig label */
.sc-fig-eyebrow {
  font-family: var(--sc-serif-display);
  font-size: 22px; /* 7pt @300px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-crest-navy-deep);
  margin: 0 0 12px;
}

.sc-fig-title {
  font-family: var(--sc-serif-display);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.005em;
  color: var(--sc-crest-navy-deep);
  line-height: 1.12;
  margin: 0 0 7px;
}

.sc-fig-subtitle {
  font-family: var(--sc-serif-display);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.25;
  color: #000;
  margin: 0 0 14px;
}

.sc-fig-divider {
  border: 0;
  border-top: 1px solid var(--sc-crest-silver);
  margin: 0 0 10px;
}

/* Chart container — fixed height so the x-axis baseline aligns across charts */
.sc-chart-wrap {
  position: relative;
  width: 100%;
  height: 2.25in;
}
.sc-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--sc-sans);
}

/* SVG text classes */
.sc-axis-label { font: 25px var(--sc-serif-display); fill: #000; }
.sc-axis-line { stroke: #BFBFBF; stroke-width: 1.5; fill: none; }
.sc-grid-line { stroke: #E6E6E6; stroke-width: 1; fill: none; }
.sc-zero-line { stroke: #7F7F7F; stroke-width: 1.5; fill: none; }
.sc-tick-line { stroke: #BFBFBF; stroke-width: 1.5; }

/* Legend — wraps responsively like the title (text reflows, never clips) */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sc-serif-display);
  font-size: 15px;
  font-weight: 400;
  color: #000;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.sc-legend.sc-legend--row {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 8px;
}
/* Ordered, left-aligned grid legend for multi-series charts */
.sc-legend.sc-legend--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  justify-items: start;
  align-items: baseline;
  column-gap: 26px;
  row-gap: 9px;
  font-size: 15px;
  text-align: left;
  width: 100%;
}
.sc-legend.sc-legend--grid li { justify-self: start; text-wrap: normal; }
.sc-legend li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}
.sc-legend .sw {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 13px;
  border-radius: 0;
  align-self: center;
}
.sc-legend .sw.line {
  height: 3px;
}

/* Source line */
.sc-source {
  font-family: var(--sc-serif-display);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--sc-fg-3);
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--sc-rule-hairline);
}

/* Tooltip */
.sc-tooltip {
  position: absolute;
  pointer-events: none;
  background: #fff;
  color: var(--sc-fg-1);
  padding: 14px 18px;
  font-family: var(--sc-serif-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  border: 1px solid var(--sc-crest-navy-deep);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(22, 53, 116, 0.18);
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 120ms var(--sc-easing);
  white-space: nowrap;
  z-index: 10;
}
.sc-tooltip.visible { opacity: 1; }
.sc-tooltip .t-date {
  font-family: var(--sc-serif-display);
  font-weight: 500;
  color: var(--sc-crest-navy-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sc-crest-gold);
}
.sc-tooltip .t-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-tooltip .t-row .t-sw {
  width: 16px; height: 16px; display: inline-block;
}
.sc-tooltip .t-row .t-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sc-hover-dot {
  fill: #fff;
  stroke-width: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--sc-easing);
}
.sc-hover-dot.visible { opacity: 1; }

.sc-hover-line {
  stroke: var(--sc-crest-navy);
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  pointer-events: none;
  opacity: 0;
}
.sc-hover-line.visible { opacity: 1; }

.sc-hit-overlay {
  fill: transparent;
  cursor: crosshair;
}