/* Lanelytic product brief and the data components of the market pages: tables, charts, key figures.
   Tokens match the site (web/public/styles.css): navy and slate, figures in a monospaced face so
   columns of numbers line up. */

/* Inter and JetBrains Mono, served from the site (Latin subset, variable weight; licences in /fonts). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-2: #eff4ff;
  --ink: #0b1c30;
  --ink-2: #434750;
  --ink-3: #66707f;
  --head: #002958;
  --line: #e3e8f1;
  --line-2: #cbd5e1;
  --accent: #006398;
  --accent-ink: #ffffff;
  --brand: #0f3f7a;
  --bar: #c5d3ea;
  --bar-latest: #0f3f7a;
  --grid: #e9eef6;
  --axis: #c3c6d1;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-all: #898781;
  --good: #15803d;
  --good-bg: #dcfce7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --font: Inter, "Inter var", InterVariable, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  color-scheme: light;
}

/* Dark: the device's setting unless the visitor chose light, or the visitor's choice of dark
   (site.js sets data-theme on <html> on the site). :where() keeps the first rule as weak as plain :root. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg: #09111f;
    --surface: #0f1a2c;
    --surface-2: #14223a;
    --ink: #e6edf9;
    --ink-2: #b4c0d4;
    --ink-3: #8f9bb1;
    --head: #dce7ff;
    --line: #1f2e47;
    --line-2: #2c3f5f;
    --accent: #93ccff;
    --accent-ink: #002958;
    --brand: #aac7ff;
    --bar: #2a3b58;
    --bar-latest: #93ccff;
    --grid: #1b2940;
    --axis: #34476a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-all: #898781;
    --good: #4ade80;
    --good-bg: #0f2e1d;
    --bad: #fca5a5;
    --bad-bg: #3a1618;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #09111f;
  --surface: #0f1a2c;
  --surface-2: #14223a;
  --ink: #e6edf9;
  --ink-2: #b4c0d4;
  --ink-3: #8f9bb1;
  --head: #dce7ff;
  --line: #1f2e47;
  --line-2: #2c3f5f;
  --accent: #93ccff;
  --accent-ink: #002958;
  --brand: #aac7ff;
  --bar: #2a3b58;
  --bar-latest: #93ccff;
  --grid: #1b2940;
  --axis: #34476a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-all: #898781;
  --good: #4ade80;
  --good-bg: #0f2e1d;
  --bad: #fca5a5;
  --bad-bg: #3a1618;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Inter's x-height (0.546 of the size). Fallback fonts shown before Inter arrives, and the
     monospaced figures inside sentences and table rows, are scaled to it, so text doesn't jump
     when the font swaps and figures read as the same size as the words around them. */
  font-size-adjust: 0.546;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sheet {
  max-width: 820px;
  margin: 32px auto;
  padding: 36px 44px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 8px;
}

/* Masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.brand svg {
  width: 28px;
  height: 28px;
}

.logo-bg {
  fill: #0f3f7a;
}

.logo-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edition {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crumbs {
  margin: -12px 0 16px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

h1 {
  margin: 0;
  color: var(--head);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.meta {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.note {
  margin: 16px 0 0;
  max-width: 64ch;
}

/* Key figures */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0 8px;
}

.stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.stat p {
  margin: 0;
}

/* Label in small capitals with its icon, the figure in the monospaced face, then its comparison. */
.stat-label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

.stat-label svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}

.stat-value {
  margin-top: 6px;
  color: var(--head);
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.stat-note {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* The change in a key figure: green when it's good news, red when it's bad. */
.trend {
  font-family: var(--mono);
  font-weight: 600;
}

.trend.good {
  color: var(--good);
}

.trend.bad {
  color: var(--bad);
}

/* Sections */

section {
  margin-top: 32px;
}

h2 {
  margin: 0 0 4px;
  color: var(--head);
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Section headings carry a small icon. */
h2 > svg {
  width: 18px;
  height: 18px;
  margin: 0 8px -2px 0;
  color: var(--accent);
}

.section-note {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 70ch;
}

.changes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.changes li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  max-width: 70ch;
}

.changes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}

.notices {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* The tariff timeline: each change in duty paid, then the notices from just before it */
.timeline > li {
  margin-bottom: 16px;
}

.timeline .notices {
  margin-top: 6px;
}

.timeline .notices li {
  padding-left: 0;
  margin-bottom: 6px;
}

.timeline .notices li::before {
  content: none;
}

.notices li {
  margin-bottom: 10px;
  max-width: 70ch;
}

.notice-meta {
  display: block;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* Tables */

/* Wide tables scroll sideways inside their card, and the keyboard can scroll them too. */
.table-wrap {
  overflow-x: auto;
}

.table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.table-wrap + .section-note {
  margin-top: 16px;
}

.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.data th,
.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Column headings: small capitals on a pale band. */
.data thead th {
  padding-block: 9px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
  border-bottom-color: var(--line-2);
  vertical-align: bottom;
}

.data tbody th {
  background: var(--surface);
  font-weight: 600;
}

.data tbody tr:hover > * {
  background: var(--surface-2);
}

.data .num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data thead .num {
  font-family: var(--font);
  font-size: 0.6875rem;
  white-space: normal;
}

/* Small figures under a value: the change, or a product's HS code. */
.delta {
  display: block;
  margin-top: 1px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.71875rem;
  font-weight: 400;
}

/* A change that is good or bad news sits in a tinted chip: share gained, duty cut, a growing market. */
.delta.good,
.delta.bad,
.chg.good,
.chg.bad {
  width: fit-content;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 600;
}

.chg {
  display: inline-block;
  font-family: var(--mono);
}

.delta.good,
.chg.good {
  background: var(--good-bg);
  color: var(--good);
}

.delta.bad,
.chg.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

/* Each supplier's last 13 months, as a line scaled to its own row. */
.spark-cell {
  width: 88px;
  vertical-align: middle !important;
}

.row-spark {
  display: block;
  width: 72px;
  height: 22px;
  margin-left: auto;
  overflow: visible;
}

.row-spark polyline {
  fill: none;
  stroke: var(--series-all);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.row-spark.good polyline {
  stroke: var(--accent);
}

.row-spark.bad polyline {
  stroke: var(--bad);
}

/* Landed cost by origin: each supplier's price, freight and insurance, and duty per unit as one
   bar, in the first three slots of the categorical palette, all bars on one scale. */
.bar-cell {
  width: 156px;
  vertical-align: middle !important;
}

.cost-bar {
  display: block;
}

.cost-bar .s1 { fill: var(--series-1); }
.cost-bar .s2 { fill: var(--series-2); }
.cost-bar .s3 { fill: var(--series-3); }

.key.block {
  width: 10px;
  height: 10px;
}

/* Landed-cost estimator: the finder's inputs, and the result as a key figure. brief.js shows it. */
.estimator {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.estimator h3 {
  margin: 0 0 6px;
  color: var(--head);
  font-size: 1rem;
}

.estimator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 14px;
}

.estimator label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.estimator .optional,
.estimator .hint {
  color: var(--ink-2);
  font-weight: 400;
}

.estimator .hint {
  font-size: 0.8125rem;
}

.estimator .hint:empty {
  display: none;
}

.estimator input,
.estimator select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.estimator input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.estimate {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.estimate p {
  margin: 0;
}

.estimate .estimate-compare {
  margin-top: 8px;
  color: var(--ink);
  font-size: 0.9375rem;
}

.data .yours > * {
  background: var(--surface-2);
}

.data .yours th {
  color: var(--head);
}

/* Ports of entry: ranked, with bars scaled to the largest. */
.port-bars {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.port-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  font-size: 0.875rem;
}

.port-name {
  color: var(--ink);
  font-weight: 500;
}

.port-figs {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.port-figs b {
  color: var(--head);
  font-weight: 600;
}

.meter {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
}

.meter .track {
  fill: var(--surface-2);
}

.meter .fill {
  fill: var(--brand);
}

.data .muted th,
.data .muted td {
  color: var(--ink-2);
}

.data .total th,
.data .total td {
  color: var(--head);
  font-weight: 650;
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
}

/* Chart */

.chart {
  margin: 0;
}

.chart-body {
  position: relative;
  display: flex;
}

.y-axis {
  flex: 0 0 48px;
}

.plot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.tick,
.x-label {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tick {
  text-anchor: end;
  dominant-baseline: middle;
}

.x-label {
  text-anchor: middle;
}

.grid {
  stroke: var(--grid);
  stroke-width: 1;
}

.baseline {
  stroke: var(--axis);
  stroke-width: 1;
}

/* Where an HS revision changed what a code covers */
.series-break {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.break-label {
  fill: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  pointer-events: none;
}

/* Tariff changes from the timeline: dotted where a revision is dashed, labelled with who moved and
   which way, the label haloed in the surface so it reads where it crosses a line. */
.event-mark {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 1 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.event-label {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.event-labels {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.bar {
  fill: var(--bar);
}

.col.latest .bar {
  fill: var(--bar-latest);
}

.col:hover .bar,
.col:focus-within .bar {
  opacity: 0.75;
}

.hit {
  fill: transparent;
  outline: none;
}

.hit:focus-visible {
  stroke: var(--accent);
  stroke-width: 2;
}

.tip {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04);
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.tip strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.9375rem;
}

.tip span {
  color: var(--ink-2);
}

.chart-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
}

.table-view {
  min-width: 0;
}

.chart-download {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.chart-download:hover {
  text-decoration: underline;
}

.table-view summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.875rem;
}

.table-view .data {
  max-width: 360px;
  margin-top: 8px;
}

/* Line charts: supplier share and duty paid over time. Series colors are the validated
   categorical palette (blue, orange, aqua, yellow), assigned by supplier rank, the same in both
   charts; "All countries" is the muted gray. */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--series-all);
}

.key.s1 { background: var(--series-1); }
.key.s2 { background: var(--series-2); }
.key.s3 { background: var(--series-3); }
.key.s4 { background: var(--series-4); }

.trend-pair {
  display: grid;
  gap: 28px;
}

@media (min-width: 760px) {
  .trend-pair {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.line-chart {
  min-width: 0;
  margin: 0;
}

.chart-title {
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.line-body {
  display: flex;
}

.line-plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  outline: none;
}

.line-plot:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--accent);
}

.lines {
  display: block;
  overflow: visible;
}

.lines .grid,
.lines .baseline,
.line {
  vector-effect: non-scaling-stroke;
}

.line {
  fill: none;
  stroke: var(--series-all);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line.s1 { stroke: var(--series-1); }
.line.s2 { stroke: var(--series-2); }
.line.s3 { stroke: var(--series-3); }
.line.s4 { stroke: var(--series-4); }

.x-axis {
  display: block;
  overflow: visible;
}

.x-axis text {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
}

.end-labels {
  flex: 0 0 56px;
  overflow: visible;
}

.end-dot {
  fill: var(--series-all);
  stroke: var(--surface);
  stroke-width: 2;
}

.end-dot.s1 { fill: var(--series-1); }
.end-dot.s2 { fill: var(--series-2); }
.end-dot.s3 { fill: var(--series-3); }
.end-dot.s4 { fill: var(--series-4); }

.end-value {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  dominant-baseline: middle;
}

.crosshair {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--axis);
  pointer-events: none;
}

.line-tip {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04);
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}

/* display: grid above would otherwise override the hidden attribute. */
.line-tip[hidden] {
  display: none;
}

.line-tip .tip-month {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.line-tip .tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.line-tip .tip-row span {
  color: var(--ink-2);
}

.line-chart .table-view .data {
  max-width: none;
}

.takeaway {
  margin-top: 12px;
}

/* On this page */

.jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 16px 0 0;
}

.jumps a {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-decoration: none;
}

.jumps a:hover,
.jumps a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

section[aria-labelledby] {
  scroll-margin-top: 16px;
}

/* Product finder (/hs/) */

.finder {
  padding: 18px 20px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.finder label {
  display: block;
  margin: 8px 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.finder input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.finder-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.finder-results {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.finder-results a {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.finder-results strong {
  display: block;
  font-weight: 600;
}

.finder-results a:hover strong,
.finder-results a:focus-visible strong {
  color: var(--accent);
  text-decoration: underline;
}

.finder-results span {
  display: block;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.finder-note {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* About and footer */

.about ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.about li {
  margin-bottom: 4px;
  max-width: 80ch;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 18px;
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface-2);
}

.cta p {
  margin: 0;
}

.cta a {
  flex: none;
  font-weight: 600;
}

@media (max-width: 720px) {
  .sheet {
    margin: 0;
    padding: 20px 16px 24px;
    border: 0;
    border-radius: 0;
  }


  h1 {
    font-size: 1.625rem;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .data {
    font-size: 0.875rem;
  }

  .data th,
  .data td {
    padding: 8px 6px;
  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .x-label.alt,
  .event-label {
    display: none;
  }

  .estimator {
    padding: 14px 12px;
  }

  .estimator-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .data {
    font-size: 0.8125rem;
  }

  .data th,
  .data td {
    padding: 8px 4px;
  }
}

/* Without font-size-adjust the monospaced faces run a little large beside Inter. */
@supports not (font-size-adjust: 0.5) {
  .data .num,
  .delta,
  .notice-meta {
    font-size: 0.8125rem;
  }
}

/* Print, or Save as PDF: always light, no interactive bits. */

@page {
  margin: 14mm;
}

@media print {
  /* Paper is always light, whatever the screen shows. */
  :root,
  :root[data-theme="dark"] {
    --bg: #f8f9ff;
    --surface: #ffffff;
    --surface-2: #eff4ff;
    --ink: #0b1c30;
    --ink-2: #434750;
    --ink-3: #66707f;
    --head: #002958;
    --line: #e3e8f1;
    --line-2: #cbd5e1;
    --accent: #006398;
    --accent-ink: #ffffff;
    --brand: #0f3f7a;
    --bar: #c5d3ea;
    --bar-latest: #0f3f7a;
    --grid: #e9eef6;
    --axis: #c3c6d1;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-all: #898781;
    color-scheme: light;
  }

  body {
    background: #ffffff;
    font-size: 9.5pt;
    line-height: 1.4;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .masthead {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  h1 {
    font-size: 20pt;
  }

  .stats {
    margin: 14px 0 0;
  }

  .stat {
    padding: 8px 12px;
  }

  section {
    margin-top: 18px;
  }

  .section-note {
    margin-bottom: 8px;
  }

  .changes li {
    margin-bottom: 3px;
  }

  .data th,
  .data td {
    padding: 4px 8px;
  }

  .cta {
    margin-top: 18px;
    padding: 10px 14px;
  }

  .tip,
  .chart-foot,
  .jumps,
  .line-tip,
  .crosshair,
  .line-chart .table-view {
    display: none;
  }

  .stats,
  .chart,
  tr {
    break-inside: avoid;
  }

  h2,
  .section-note {
    break-after: avoid;
  }
}