/* Masters live in visual/diagram1. Keep semantic classes when re-exporting. */
.s213-inline-diagram {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.s213-inline-diagram .diagram-grid-horizontal {
  fill: none !important;
  stroke: var(--force-diagram-grid-color) !important;
  stroke-width: var(--force-diagram-grid-width) !important;
  stroke-dasharray: none !important;
  vector-effect: non-scaling-stroke;
}
.s213-inline-diagram .diagram-axis-number,
.s213-inline-diagram .diagram-axis-number tspan {
  stroke: none !important;
  font-family: var(--force-diagram-axis-font) !important;
  font-size: var(--force-diagram-axis-size) !important;
  font-weight: var(--force-diagram-axis-weight) !important;
  font-style: normal !important;
  fill: var(--force-diagram-axis-color) !important;
}
.s213-inline-diagram .diagram-data-line {
  stroke: var(--force-diagram-data-color) !important;
  stroke-width: var(--force-diagram-data-width) !important;
  vector-effect: non-scaling-stroke;
}

/* Axis labels sit directly on the graphic, without backing boxes. */
.s213-inline-diagram .diagram-axis-box {
  display: none !important;
}

.s213-inline-diagram .diagram-secondary-line {
  stroke: var(--force-diagram-secondary-color) !important;
  stroke-width: var(--force-diagram-secondary-width) !important;
  vector-effect: non-scaling-stroke;
}

/* Main/secondary describe the label role, separately from its white halo. */
.s213-inline-diagram .diagram-main-text .direct-label {
  fill: var(--force-diagram-data-color) !important;
}
.s213-inline-diagram .diagram-secondary-text .direct-label {
  fill: var(--force-diagram-secondary-color) !important;
}
.s213-inline-diagram[data-diagram="evs"] text,
.s213-inline-diagram[data-diagram="evs"] tspan {
  font-family: var(--force-diagram-text-font) !important;
  font-weight: var(--force-diagram-text-weight) !important;
  font-size: var(--force-diagram-text-size) !important;
  font-style: normal !important;
}

/* Axis numbers retain their own size and weight within the EV text treatment. */
.s213-inline-diagram[data-diagram="evs"] .diagram-axis-number,
.s213-inline-diagram[data-diagram="evs"] .diagram-axis-number tspan {
  font-size: var(--force-diagram-axis-size) !important;
  font-weight: var(--force-diagram-axis-weight) !important;
}

/* All editable diagram lettering uses the shared Myriad font family. */
.s213-inline-diagram text,
.s213-inline-diagram tspan {
  font-family: var(--force-diagram-text-font) !important;
}
.s213-inline-diagram .diagram-main-text text,
.s213-inline-diagram .diagram-main-text tspan,
.s213-inline-diagram .diagram-secondary-text text,
.s213-inline-diagram .diagram-secondary-text tspan {
  font-size: var(--force-diagram-line-title-size) !important;
  font-weight: var(--force-diagram-text-weight) !important;
}

.s213-inline-diagram .diagram-secondary-line.secondary-solid,
.s213-inline-diagram .diagram-secondary-line.secondary-lite {
  stroke-dasharray: none !important;
}
.s213-inline-diagram .diagram-secondary-line.secondary-dashed {
  stroke-dasharray: var(--force-diagram-secondary-dash) !important;
}
.s213-inline-diagram .diagram-secondary-line.secondary-short-dash {
  stroke-dasharray: var(--force-diagram-secondary-short-dash) !important;
}
.s213-inline-diagram .diagram-secondary-line.secondary-dotted {
  stroke-dasharray: var(--force-diagram-secondary-dot) !important;
  stroke-linecap: round !important;
}
.s213-inline-diagram .secondary-lite {
  opacity: var(--force-diagram-secondary-lite-opacity);
}
.s213-inline-diagram .diagram-secondary-marker {
  stroke: var(--force-diagram-secondary-color) !important;
  vector-effect: non-scaling-stroke;
}

.s213-inline-diagram .diagram-data-line.main-red {
  stroke: var(--force-diagram-main-red-color) !important;
}
.s213-inline-diagram .diagram-line-title,
.s213-inline-diagram .diagram-line-title tspan {
  font-size: var(--force-diagram-line-title-size) !important;
  font-weight: var(--force-diagram-text-weight) !important;
  fill: var(--force-diagram-data-color) !important;
}
.s213-inline-diagram .diagram-line-title {
  stroke: #fff;
  stroke-width: 9px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.s213-inline-diagram .diagram-line-title.main-red,
.s213-inline-diagram .diagram-line-title.main-red tspan {
  fill: var(--force-diagram-main-red-color) !important;
}

.s213-inline-diagram .diagram-axis-outlines path {
  fill: var(--force-diagram-axis-color) !important;
}

.s213-inline-diagram .main-number,
.s213-inline-diagram .main-number tspan {
  font-family: var(--force-diagram-text-font) !important;
  font-weight: var(--force-diagram-text-weight) !important;
  font-size: var(--force-diagram-main-number-size) !important;
  fill: var(--force-diagram-data-color) !important;
}
.s213-inline-diagram .main-number.main-red,
.s213-inline-diagram .main-number.main-red tspan {
  fill: var(--force-diagram-main-red-color) !important;
}

/* Cropped masters must never paint outside their own card. */
.s213-inline-diagram { overflow: hidden; }
.s213-inline-diagram .diagram-city-name,
.s213-inline-diagram .diagram-city-name tspan {
  font-family: var(--force-diagram-text-font) !important;
  fill: var(--force-diagram-secondary-color) !important;
  font-size: var(--force-diagram-secondary-label-size) !important;
  font-weight: var(--force-diagram-secondary-label-weight) !important;
}

/* Main line names share uppercase lettering; numeric callouts stay unchanged. */
.s213-inline-diagram .diagram-main-text text,
.s213-inline-diagram .diagram-main-text tspan,
.s213-inline-diagram .diagram-line-title,
.s213-inline-diagram .diagram-line-title tspan {
  text-transform: uppercase;
}

/* Chart annotations follow the same typography tokens as both axes. */
.s213-inline-diagram .chart-font,
.s213-inline-diagram .chart-font tspan {
  font-family: var(--force-diagram-axis-font) !important;
  font-size: var(--force-diagram-axis-size) !important;
  font-weight: var(--force-diagram-axis-weight) !important;
  font-style: normal !important;
  fill: var(--force-diagram-axis-color) !important;
  stroke: none !important;
  text-transform: none;
}

.s213-inline-diagram .chart-large,
.s213-inline-diagram .chart-large tspan {
  font-family: var(--force-diagram-axis-font) !important;
  font-size: var(--force-diagram-chart-large-size) !important;
  font-weight: var(--force-diagram-axis-weight) !important;
  font-style: normal !important;
  fill: var(--force-diagram-axis-color) !important;
  stroke: none !important;
  text-transform: none;
}

/* Main reference: Seas rise faster. Scale strokes with the diagram. */
.s213-inline-diagram .diagram-data-line {
  vector-effect: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s213-inline-diagram .diagram-data-line.main-muted {
  stroke: var(--force-diagram-main-muted-color) !important;
}
.s213-inline-diagram text.diagram-main-label,
.s213-inline-diagram text.diagram-main-label tspan,
.s213-inline-diagram text.diagram-main-label textPath,
.s213-inline-diagram text.diagram-main-label-halo,
.s213-inline-diagram text.diagram-main-label-halo tspan {
  font-family: var(--force-diagram-text-font) !important;
  font-size: var(--force-diagram-main-label-size) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}
.s213-inline-diagram text.diagram-main-label,
.s213-inline-diagram text.diagram-main-label tspan,
.s213-inline-diagram text.diagram-main-label textPath {
  fill: var(--force-diagram-data-color) !important;
  stroke: none !important;
}
.s213-inline-diagram text.diagram-main-label.main-muted,
.s213-inline-diagram text.diagram-main-label.main-muted tspan {
  fill: var(--force-diagram-main-muted-color) !important;
}
.s213-inline-diagram text.diagram-main-label-halo,
.s213-inline-diagram text.diagram-main-label-halo tspan {
  fill: #fff !important;
  stroke: #fff !important;
  stroke-width: 8px !important;
  stroke-linejoin: round;
}

/* Secondary legend names use the series color, not the axis-note color. */
.s213-inline-diagram[data-diagram="energy-trends"] .legend-text,
.s213-inline-diagram .diagram-secondary-text .direct-label tspan {
  fill: var(--force-diagram-secondary-color) !important;
}

.s213-inline-diagram .diagram-secondary-text text,
.s213-inline-diagram .diagram-secondary-text tspan,
.s213-inline-diagram text.secondary-label,
.s213-inline-diagram text.secondary-halo {
  font-size: var(--force-diagram-secondary-label-size) !important;
  font-weight: var(--force-diagram-secondary-label-weight) !important;
}

/* Text backings mask curves without inheriting the SVG's default stroke. */
.s213-inline-diagram .label-backing {
  fill: #fff !important;
  fill-opacity: 1 !important;
  opacity: 1 !important;
  stroke: none !important;
  stroke-width: 0 !important;
}

/* cards.css sets `svg { stroke: currentColor }` for icons. Inline chart SVGs
   inherit it, which outlined every un-stroked rect: the 576x576 background
   (the light grey frame round each chart), axis-label boxes and legend bands.
   :where() keeps this at element specificity, so any stroke the artwork sets
   through its own classes still wins; only the inherited one is removed. */
:where(.s213-inline-diagram) :where(rect) {
  stroke: none;
}