/* 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: #fff;
  color: var(--sc-fg-1);
  font-family: var(--sc-serif-display);
}

.sc-figure {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 20px;
  background: #fff;
  font-family: var(--sc-serif-display);
}

/* 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: 38px; /* 12pt @300px */
  letter-spacing: -0.005em;
  color: var(--sc-crest-navy-deep);
  line-height: 1.12;
  margin: 0 0 10px;
}

.sc-fig-subtitle {
  font-family: var(--sc-serif-display);
  font-size: 26px; /* 8pt @300px */
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.25;
  color: #000;
  margin: 0 0 22px;
}

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

/* Chart container */
.sc-chart-wrap {
  position: relative;
  width: 100%;
}
.sc-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sc-sans);
}

/* SVG text classes */
.sc-axis-label { font: 26px var(--sc-serif-display); fill: #000; } /* 8pt @300px */
.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: 26px; /* 8pt @300px */
  font-weight: 400;
  color: #000;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sc-legend.sc-legend--row {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 10px;
}
.sc-legend li {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}
.sc-legend .sw {
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  border-radius: 0;
  align-self: center;
}
.sc-legend .sw.line {
  height: 5px;
}

/* Source line */
.sc-source {
  font-family: var(--sc-serif-display);
  font-size: 26px; /* 8pt @300px */
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--sc-fg-3);
  margin: 22px 0 0;
  padding-top: 18px;
  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: 24px; /* 2× — 7.5pt @300px */
  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;
}