/* Uncharted - CSS Charts for Eleventy
 * Default stylesheet with CSS custom properties for easy customization
 */

/* ==========================================================================
   Color Palette
   ========================================================================== */

:root {
  --chart-color-1: #2196f3;  /* Blue */
  --chart-color-2: #4caf50;  /* Green */
  --chart-color-3: #ff7043;  /* Orange */
  --chart-color-4: #ffc107;  /* Amber */
  --chart-color-5: #009688;  /* Teal */
  --chart-color-6: #9c27b0;  /* Purple */
  --chart-color-7: #e91e63;  /* Pink */
  --chart-color-8: #3f51b5;  /* Indigo */
  --chart-color-9: #f44336;  /* Red */
  --chart-color-10: #00bcd4; /* Cyan */
  --chart-color-11: #cddc39; /* Lime */
  --chart-color-12: #78909c; /* Gray */

  /* Backgrounds - neutral with opacity for light/dark adaptability */
  --chart-bg: rgba(128, 128, 128, 0.15);

  /* Spacing and sizing */
  --chart-gap: 0.5rem;
  --chart-bar-height: 1.5rem;
  --chart-column-width: 1rem;
  --chart-donut-size: 20rem;
  --chart-donut-hole: 30%;
  --chart-dot-size: 0.75rem;
  --chart-height: 12rem;
}

/* ==========================================================================
   Color Classes
   ========================================================================== */

.chart-color-1 { --color: var(--chart-color-1); background-color: var(--chart-color-1); }
.chart-color-2 { --color: var(--chart-color-2); background-color: var(--chart-color-2); }
.chart-color-3 { --color: var(--chart-color-3); background-color: var(--chart-color-3); }
.chart-color-4 { --color: var(--chart-color-4); background-color: var(--chart-color-4); }
.chart-color-5 { --color: var(--chart-color-5); background-color: var(--chart-color-5); }
.chart-color-6 { --color: var(--chart-color-6); background-color: var(--chart-color-6); }
.chart-color-7 { --color: var(--chart-color-7); background-color: var(--chart-color-7); }
.chart-color-8 { --color: var(--chart-color-8); background-color: var(--chart-color-8); }
.chart-color-9 { --color: var(--chart-color-9); background-color: var(--chart-color-9); }
.chart-color-10 { --color: var(--chart-color-10); background-color: var(--chart-color-10); }
.chart-color-11 { --color: var(--chart-color-11); background-color: var(--chart-color-11); }
.chart-color-12 { --color: var(--chart-color-12); background-color: var(--chart-color-12); }

/* ==========================================================================
   Base Chart Styles
   ========================================================================== */

.chart {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 16rem;
}

.chart-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.chart-subtitle {
  display: block;
  font-weight: normal;
  font-size: 0.875em;
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* ==========================================================================
   Legend
   ========================================================================== */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
}

.chart-legend-item::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background-color: var(--color);
  flex-shrink: 0;
}

/* Dot/scatter charts use circular legend markers */
.chart-dot .chart-legend-item::before,
.chart-scatter .chart-legend-item::before {
  border-radius: 50%;
}

.chart-legend-item .legend-value {
  opacity: 0.7;
  margin-left: 0.125rem;
}

/* ==========================================================================
   Axes
   ========================================================================== */

.chart-body {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-height: var(--chart-height);
}

.chart-y-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-width: 2rem;
  box-sizing: border-box;
  min-height: var(--chart-height);
  padding-top: 0.5rem;
  padding-bottom: 0;
}

.chart-y-axis .axis-label {
  font-size: 0.7rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chart-y-axis .axis-label:first-child {
  transform: translateY(-50%);
}

.chart-y-axis .axis-label:nth-child(3) {
  transform: translateY(50%);
}

.chart-y-axis .axis-title {
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  font-size: 0.7rem;
  opacity: 0.6;
  white-space: nowrap;
}

.chart-x-axis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.25rem 0;
  margin-top: 0.25rem;
  padding-right: 0.5rem;
}

.chart-x-axis .axis-label {
  font-size: 0.7rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.chart-x-axis .axis-label:first-child {
  transform: translateX(-50%);
}

.chart-x-axis .axis-label:nth-child(3) {
  transform: translateX(50%);
}

.chart-x-axis .axis-title {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.6;
  white-space: nowrap;
  margin-top: 0.5rem;
}

/* Category labels (X-axis labels for vertical charts) */
.column-label,
.dot-label {
  font-size: 0.7rem;
  opacity: 0.6;
  text-align: center;
}

/* ==========================================================================
   Stacked Bar Chart (Horizontal)
   ========================================================================== */

.chart-stacked-bar .chart-bars {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-auto-rows: 1fr;
  gap: clamp(0.375rem, 1.5cqi, 1rem) 0.75rem;
  align-items: stretch;
  min-height: var(--chart-height);
}

.chart-stacked-bar .bar-row {
  display: contents;  /* Children participate in parent grid */
}

.chart-stacked-bar .bar-label {
  font-size: 0.875rem;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.chart-stacked-bar .bar-track {
  min-height: var(--chart-bar-height);
  border-radius: 3px;
  overflow: hidden;
  background: var(--chart-bg);
}

.chart-stacked-bar .bar-fills {
  display: flex;
  height: 100%;
}

.chart-stacked-bar .bar-fill {
  height: 100%;
  width: var(--value);
  transition: width 0.3s ease;
  background-color: var(--color);
}

.chart-stacked-bar .bar-value {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
}

/* ==========================================================================
   Stacked Column Chart (Vertical)
   ========================================================================== */

.chart-stacked-column .chart-body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
}

.chart-stacked-column .chart-y-axis {
  grid-row: 1;
  grid-column: 1;
}

.chart-stacked-column .chart-scroll {
  grid-row: 1 / -1;
  grid-column: 2;
  display: grid;
  grid-template-rows: subgrid;
  overflow-x: auto;
  overflow-y: visible;
}

.chart-stacked-column .chart-columns {
  grid-row: 1;
  position: relative;
  display: flex;
  gap: clamp(0.375rem, 1.5cqi, 1rem);
  align-items: stretch;
  min-height: var(--chart-height);
  padding: 0.5rem 0.5rem 0 0.5rem;
  box-sizing: border-box;
  background: var(--chart-bg);
  border-radius: 3px;
}

.chart-stacked-column .column-track {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  min-width: var(--chart-column-width);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.chart-stacked-column .column-segment {
  width: 100%;
  height: var(--value);
  transition: height 0.3s ease;
  background-color: var(--color);
}

.chart-stacked-column .column-labels {
  grid-row: 2;
  display: flex;
  gap: clamp(0.375rem, 1.5cqi, 1rem);
  padding: 0.25rem 0.5rem 0;
}

.chart-stacked-column .column-label {
  flex: 1;
  min-width: var(--chart-column-width);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rotated column labels (opt-in via rotateLabels config) */
.chart-stacked-column.rotate-labels .column-labels {
  padding-top: 0.5rem;
  align-items: flex-start;
}

.chart-stacked-column.rotate-labels .column-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  overflow: visible;
  text-overflow: clip;
}

/* ==========================================================================
   Donut Chart
   ========================================================================== */

.chart-donut {
  --donut-1: var(--chart-color-1);
  --donut-2: var(--chart-color-2);
  --donut-3: var(--chart-color-3);
  --donut-4: var(--chart-color-4);
  --donut-5: var(--chart-color-5);
  --donut-6: var(--chart-color-6);
  --donut-7: var(--chart-color-7);
  --donut-8: var(--chart-color-8);
  --donut-9: var(--chart-color-9);
  --donut-10: var(--chart-color-10);
  --donut-11: var(--chart-color-11);
  --donut-12: var(--chart-color-12);
}

.chart-donut .donut-body {
  container-type: inline-size;
  container-name: donut;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 2rem;
  flex: 1;
  min-width: 0;
}

.chart-donut .donut-container {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 0 0 var(--chart-donut-size, 20rem);
  max-width: 100%;
  aspect-ratio: 1;
}

.chart-donut .donut-body > .chart-legend {
  flex: 0 0 auto;
  justify-content: center;
}

.chart-donut .donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Radial mask punches out the center hole */
  mask-image: radial-gradient(
    circle at center,
    transparent var(--chart-donut-hole, 30%),
    black var(--chart-donut-hole, 30%)
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent var(--chart-donut-hole, 30%),
    black var(--chart-donut-hole, 30%)
  );
}

.chart-donut .donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.chart-donut .donut-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.chart-donut .donut-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.chart-donut .chart-legend {
  /* Default: horizontal legend (when below donut) */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  max-width: 100%;
}

/* Wide container: legend beside donut, stack items vertically
   Threshold ≈ --chart-donut-size (20rem) + gap (2rem) + legend-min (8rem) */
@container donut (min-width: 30rem) {
  .chart-donut .chart-legend {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: max-content;
  }

  .chart-donut .legend-value {
    margin-left: auto;
    padding-left: 0.5rem;
  }
}

/* Donut legend uses same variables as gradient for consistent overrides */
.chart-donut .chart-color-1 { --color: var(--donut-1, var(--chart-color-1)); }
.chart-donut .chart-color-2 { --color: var(--donut-2, var(--chart-color-2)); }
.chart-donut .chart-color-3 { --color: var(--donut-3, var(--chart-color-3)); }
.chart-donut .chart-color-4 { --color: var(--donut-4, var(--chart-color-4)); }
.chart-donut .chart-color-5 { --color: var(--donut-5, var(--chart-color-5)); }
.chart-donut .chart-color-6 { --color: var(--donut-6, var(--chart-color-6)); }
.chart-donut .chart-color-7 { --color: var(--donut-7, var(--chart-color-7)); }
.chart-donut .chart-color-8 { --color: var(--donut-8, var(--chart-color-8)); }
.chart-donut .chart-color-9 { --color: var(--donut-9, var(--chart-color-9)); }
.chart-donut .chart-color-10 { --color: var(--donut-10, var(--chart-color-10)); }
.chart-donut .chart-color-11 { --color: var(--donut-11, var(--chart-color-11)); }
.chart-donut .chart-color-12 { --color: var(--donut-12, var(--chart-color-12)); }


/* ==========================================================================
   Dot Chart (Categorical - columns with dots at Y positions)
   ========================================================================== */

.chart-dot .chart-body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
}

.chart-dot .chart-y-axis {
  grid-row: 1;
  grid-column: 1;
}

.chart-dot .chart-scroll {
  grid-row: 1 / -1;
  grid-column: 2;
  display: grid;
  grid-template-rows: subgrid;
  overflow-x: auto;
  overflow-y: visible;
}

.chart-dot .dot-chart {
  grid-row: 1;
  position: relative;
  min-height: var(--chart-height);
  box-sizing: border-box;
  background: var(--chart-bg);
  border-radius: 3px;
}

/* Inner field sized to content area - dots position relative to this */
.chart-dot .dot-field {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  left: 0.5rem;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.chart-dot .dot-col {
  flex: 1;
  position: relative;
  min-width: 1.5rem;
}

.chart-dot .dot {
  width: var(--chart-dot-size);
  height: var(--chart-dot-size);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: var(--value);
  transform: translate(-50%, 50%);
  cursor: default;
  background-color: var(--color);
}

.chart-dot .dot[title]:hover {
  transform: translate(-50%, 50%) scale(1.3);
  z-index: 1;
}

.chart-dot .dot-labels {
  grid-row: 2;
  display: flex;
  gap: 6px;
  padding: 0 0.5rem;
  margin-top: 0.5rem;
}

.chart-dot .dot-label {
  flex: 1;
  min-width: 1.5rem;
}

/* Rotated dot labels (opt-in via rotateLabels config) */
.chart-dot.rotate-labels .dot-labels {
  padding-top: 0.5rem;
  align-items: flex-start;
}

.chart-dot.rotate-labels .dot-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  overflow: visible;
  text-overflow: clip;
}

/* ==========================================================================
   Scatter Chart (Continuous X and Y axes)
   ========================================================================== */

.chart-scatter .chart-body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
}

.chart-scatter .chart-y-axis {
  grid-row: 1;
  grid-column: 1;
}

.chart-scatter .scatter-container {
  grid-row: 1 / -1;
  grid-column: 2;
  display: grid;
  grid-template-rows: subgrid;
}

.chart-scatter .dot-area {
  grid-row: 1;
  position: relative;
  min-height: var(--chart-height);
  background: var(--chart-bg);
  border-radius: 3px;
  box-sizing: border-box;
}

.chart-scatter .chart-x-axis {
  grid-row: 2;
}

/* Inner field sized to content area - dots position relative to this */
.chart-scatter .dot-field {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  left: 0;
}

.chart-scatter .dot {
  position: absolute;
  width: var(--chart-dot-size);
  height: var(--chart-dot-size);
  border-radius: 50%;
  left: var(--x);
  bottom: var(--value);
  transform: translate(-50%, 50%);
  cursor: default;
  background-color: var(--color);
}

.chart-scatter .dot[title]:hover {
  transform: translate(-50%, 50%) scale(1.3);
  z-index: 1;
}

/* ==========================================================================
   Animations (Optional)
   Add 'animate: true' to chart config to enable
   Clip-path applied to track containers for smooth whole-bar reveals
   ========================================================================== */

/* Row/column index for staggered delays */
/* Row, column, and dot indices set via inline styles in renderers */

/* Bar chart: clip-path on fills wrapper, reveals left-to-right */
.chart-animate .bar-fills {
  clip-path: inset(0 100% 0 0);
  animation: bar-reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: calc(var(--row-index, 0) * var(--delay-step, 0.08s));
}

@keyframes bar-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Column chart: clip-path on track, reveals bottom-to-top */
.chart-animate .column-track {
  clip-path: inset(100% 0 0 0);
  animation: column-reveal 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.05s));
}

@keyframes column-reveal {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Column chart with negatives: clip-path expands from zero axis */
.chart-animate.has-negative-y .column-track {
  --zero-from-top: calc(100% - var(--zero-position, 0%));
  animation: column-expand-from-zero 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.05s));
  clip-path: polygon(
    0% var(--zero-from-top),
    100% var(--zero-from-top),
    100% var(--zero-from-top),
    0% var(--zero-from-top)
  );
}

@keyframes column-expand-from-zero {
  from {
    clip-path: polygon(
      0% var(--zero-from-top),
      100% var(--zero-from-top),
      100% var(--zero-from-top),
      0% var(--zero-from-top)
    );
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

/* Dot chart: dots rise from bottom with staggered delays */
.chart-animate.chart-dot .dot {
  animation: dot-rise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.08s));
  opacity: 0;
}

@keyframes dot-rise {
  from {
    bottom: 0;
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.5);
  }
  to {
    /* Let CSS handle final bottom position */
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
  }
}

/* Dot chart with negatives: dots move from zero axis */
.chart-animate.chart-dot.has-negative-y .dot {
  animation: dot-from-zero 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.08s));
  opacity: 0;
}

@keyframes dot-from-zero {
  from {
    bottom: var(--zero-position, 0%);
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
  }
}

/* Donut chart: clockwise reveal using animated mask */
@property --donut-reveal {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.chart-animate .donut-ring {
  mask-image:
    radial-gradient(circle at center, transparent var(--chart-donut-hole, 30%), black var(--chart-donut-hole, 30%)),
    conic-gradient(from 0deg, black var(--donut-reveal), transparent var(--donut-reveal));
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle at center, transparent var(--chart-donut-hole, 30%), black var(--chart-donut-hole, 30%)),
    conic-gradient(from 0deg, black var(--donut-reveal), transparent var(--donut-reveal));
  -webkit-mask-composite: source-in;
  animation: donut-clockwise 0.8s ease-out 0.1s forwards;
}

@keyframes donut-clockwise {
  from { --donut-reveal: 0deg; }
  to { --donut-reveal: 360deg; }
}

/* Scatter chart: dots grow and fade in at position with stagger */
.chart-animate.chart-scatter .dot {
  animation: scatter-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
  animation-delay: calc(var(--dot-index, 0) * 0.06s);
  opacity: 0;
  transform: translate(-50%, 50%) scale(0);
}

@keyframes scatter-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .chart-animate .bar-fills,
  .chart-animate .column-track,
  .chart-animate.chart-dot .dot,
  .chart-animate.chart-scatter .dot,
  .chart-animate .donut-ring::before {
    animation: none;
  }

  .chart-animate.chart-dot .dot,
  .chart-animate.chart-scatter .dot {
    opacity: 1;
    transform: none;
  }

  .chart-animate.has-negative-y .column-track {
    clip-path: none;
  }
}

/* ==========================================================================
   Negative Value Support
   ========================================================================== */

/* Column chart negative value support */
.chart-stacked-column.has-negative-y .chart-columns {
  position: relative;
  padding-bottom: 0.5rem;
}

.chart-stacked-column.has-negative-y .column-track {
  position: relative;
  flex-direction: column;  /* Reset from column-reverse */
  overflow: visible;       /* Allow segments to show */
}

.chart-stacked-column.has-negative-y .column-segment {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--value-bottom, 0);
  height: var(--value-height, 0);
}

/* Rounded corners on outermost segments */
.chart-stacked-column.has-negative-y .column-segment.is-stack-end:not(.is-negative) {
  border-radius: 3px 3px 0 0;
}

.chart-stacked-column.has-negative-y .column-segment.is-stack-end.is-negative {
  border-radius: 0 0 3px 3px;
}

/* Rounded corners on topmost segment for positive-only charts */
.chart-stacked-column:not(.has-negative-y) .column-segment.is-stack-end {
  border-radius: 3px 3px 0 0;
}

/* Zero axis line for column charts */
.chart-stacked-column.has-negative-y .chart-columns::after {
  content: '';
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: calc(0.5rem + var(--zero-position, 0%) * 11 / 12);
  height: 1px;
  background-color: currentColor;
  opacity: 0.4;
  pointer-events: none;
}

/* Column chart Y-axis for negatives */
.chart-stacked-column.has-negative-y .chart-y-axis {
  position: relative;
  padding-bottom: 0.5rem;
}

.chart-stacked-column.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  bottom: calc(0.5rem + var(--zero-position, 50%) * 11 / 12);
}

/* Expand dot-field insets for negative values */
.chart-dot.has-negative-y .dot-field,
.chart-scatter.has-negative-y .dot-field {
  bottom: 0.5rem;
}

.chart-scatter.has-negative-x .dot-field {
  left: 0.5rem;
}

/* Y-axis padding adjustment for negative values */
.chart-dot.has-negative-y .chart-y-axis,
.chart-scatter.has-negative-y .chart-y-axis {
  padding-bottom: 0.5rem;
}

/* Zero axis lines - use dot-field for proper alignment */
.chart-dot.has-negative-y .dot-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--zero-position, 0);
  height: 1px;
  background-color: currentColor;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.chart-scatter.has-negative-y .dot-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--zero-position-y, 0);
  height: 1px;
  background-color: currentColor;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.chart-scatter.has-negative-x .dot-field::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--zero-position-x, 0);
  width: 1px;
  background-color: currentColor;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Zero-Positioned Axis Labels
   When data spans negative to positive, position the middle label at zero
   ========================================================================== */

/* Y-axis needs relative positioning for absolute label */
.chart-dot.has-negative-y .chart-y-axis,
.chart-scatter.has-negative-y .chart-y-axis {
  position: relative;
}

/* Position middle Y-axis label at zero */
.chart-dot.has-negative-y .chart-y-axis .axis-label:nth-child(2),
.chart-scatter.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}

.chart-dot.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
  bottom: calc(0.5rem + var(--zero-position, 50%) * 11 / 12);
}

.chart-scatter.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
  bottom: calc(0.5rem + var(--zero-position-y, 50%) * 11 / 12);
}

/* X-axis positioning for scatter */
.chart-scatter.has-negative-x .chart-x-axis {
  position: relative;
}

.chart-scatter.has-negative-x .chart-x-axis .axis-label:nth-child(2) {
  position: absolute;
  left: calc(0.5rem + var(--zero-position-x, 50%) * 11 / 12);
  transform: translateX(-50%);
}

/* ==========================================================================
   Download Link
   ========================================================================== */

.chart-download {
  display: block;
  font-size: 0.75em;
  margin-block-start: 0.5em;
}