@charset "UTF-8";

/* Kadın.ca Charts — zero-dependency SVG visualization system. */
:root {
  --chart-brand: var(--brand-text);
  --chart-rose: #d96886;
  --chart-amber: #d79a43;
  --chart-violet: #7565d9;
  --chart-teal: #298990;
  --chart-blue: #4c74c9;
  --chart-success: var(--success);
  --chart-danger: var(--danger);
  --chart-grid: color-mix(in srgb, var(--line) 76%, transparent);
  --chart-band: color-mix(in srgb, var(--brand-soft) 34%, transparent);
  --chart-track: color-mix(in srgb, var(--line) 64%, transparent);
  --chart-tooltip: var(--brand-deep);
  --chart-tooltip-text: var(--on-inverse);
  --chart-panel-shadow: 0 24px 64px rgba(var(--brand-rgb), .08);
}

html[data-theme-scope="frontend"][data-theme-resolved="dark"] {
  --chart-rose: #ed8ba3;
  --chart-amber: #efb768;
  --chart-violet: #a99cf5;
  --chart-teal: #69c1c5;
  --chart-blue: #88a9ed;
  --chart-grid: color-mix(in srgb, var(--line) 72%, transparent);
  --chart-band: color-mix(in srgb, var(--brand-soft) 22%, transparent);
  --chart-track: color-mix(in srgb, var(--line) 68%, transparent);
  --chart-tooltip: #f6f1f4;
  --chart-tooltip-text: #21171d;
  --chart-panel-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.kdn-chart {
  position: relative;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  color: var(--text);
  isolation: isolate;
}

.kdn-chart-viewport {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.kdn-chart[data-chart-type="line"] .kdn-chart-viewport,
.kdn-chart[data-chart-type="area"] .kdn-chart-viewport,
.kdn-chart[data-chart-type="bar"] .kdn-chart-viewport {
  min-height: var(--kdn-chart-render-height, 280px);
}

.kdn-chart[data-chart-type="radial"] .kdn-chart-viewport,
.kdn-chart[data-chart-type="donut"] .kdn-chart-viewport { min-height: 260px; }

.kdn-chart[data-chart-type="sparkline"] .kdn-chart-viewport { min-height: 56px; }
.kdn-chart[data-chart-type="heatmap"] .kdn-chart-viewport { min-height: 170px; overflow-x: auto; justify-content: start; }
.kdn-chart[data-chart-type="meter"] .kdn-chart-viewport { min-height: 38px; }

.kdn-chart-svg {
  display: block;
  width: 100%;
  height: var(--kdn-chart-render-height, auto);
  overflow: visible;
  font-family: var(--font-sans);
}

.kdn-chart-band { fill: var(--chart-band); }
.kdn-chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kdn-chart-axis-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.kdn-chart-axis-label--x { text-anchor: middle; }
.kdn-chart-axis-label--y { text-anchor: end; }

.kdn-chart-area { pointer-events: none; }
.kdn-chart-line {
  fill: none;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 7px 8px rgba(var(--brand-rgb), .1));
  transition: opacity 500ms ease;
}
.kdn-chart-line.is-visible { opacity: 1; }
.kdn-chart-point { stroke: var(--surface-solid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kdn-chart-activity-stem {
  opacity: .74;
  stroke-linecap: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.kdn-chart-activity-point {
  vector-effect: non-scaling-stroke;
}
.kdn-chart-activity-point.is-zero { opacity: .72; }
.kdn-chart-activity-point.is-active {
  filter: drop-shadow(0 5px 7px rgba(var(--brand-rgb), .22));
  stroke: var(--surface-solid);
  stroke-width: 3;
}
.kdn-chart-bar { opacity: .9; transition: opacity var(--transition); }
.kdn-chart-bar:hover { opacity: 1; }
.kdn-chart-overlay { fill: transparent; cursor: crosshair; }
.kdn-chart-tracker { pointer-events: none; }
.kdn-chart-tracker-line { stroke: color-mix(in srgb, var(--brand-text) 45%, var(--line)); stroke-dasharray: 4 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kdn-chart-tracker-point { stroke: var(--surface-solid); stroke-width: 3; vector-effect: non-scaling-stroke; }
.kdn-chart-focus-points circle { fill: transparent; outline: 0; }
.kdn-chart-focus-points circle:focus { fill: color-mix(in srgb, var(--brand-text) 16%, transparent); stroke: var(--brand-text); stroke-width: 2; }

.kdn-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: max-content;
  min-width: 150px;
  max-width: min(260px, calc(100% - 16px));
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--chart-tooltip-text) 14%, transparent);
  border-radius: var(--radius-m);
  background: var(--chart-tooltip);
  box-shadow: var(--shadow-deep);
  color: var(--chart-tooltip-text);
  pointer-events: none;
  will-change: transform;
}

.kdn-chart-tooltip > strong { display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 850; }
.kdn-chart-tooltip-list { display: grid; gap: var(--dropdown-gap); }
.kdn-chart-tooltip-list > span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--dropdown-gap); }
.kdn-chart-tooltip-list i,
.kdn-chart-legend-item i,
.kdn-chart-legend-value i { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); }
.kdn-chart-tooltip-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; font-weight: 700; }
.kdn-chart-tooltip-list em { font-size: .68rem; font-style: normal; font-weight: 850; font-variant-numeric: tabular-nums; }
.kdn-chart-tooltip-radial { display: block; font-size: .72rem; font-weight: 800; }

.kdn-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dropdown-gap);
  margin-top: 12px;
}
.kdn-chart-legend[hidden] { display: none; }
.kdn-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--dropdown-gap);
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  color: var(--text-soft);
  font-size: .66rem;
  font-weight: 800;
  transition: opacity var(--transition), border-color var(--transition), color var(--transition);
}
.kdn-chart-legend-item:hover { border-color: color-mix(in srgb, var(--brand-text) 32%, var(--line)); color: var(--brand-text); }
.kdn-chart-legend-item.is-muted { opacity: .42; }
.kdn-chart-legend--values { display: grid; align-content: center; justify-content: stretch; margin-top: 0; }
.kdn-chart-legend-value { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--dropdown-gap); min-height: 34px; padding: 0 3px; border-bottom: 1px solid var(--line); }
.kdn-chart-legend-value:last-child { border-bottom: 0; }
.kdn-chart-legend-value b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-size: .67rem; }
.kdn-chart-legend-value em { color: var(--text); font-size: .68rem; font-style: normal; font-weight: 850; font-variant-numeric: tabular-nums; }

.kdn-chart-ring-track,
.kdn-chart-ring,
.kdn-chart-donut-segment {
  fill: none;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.kdn-chart-ring-track { stroke: var(--chart-track); stroke-width: 13; }
.kdn-chart-ring { stroke-linecap: round; stroke-width: 10; }
.kdn-chart-donut-segment { cursor: pointer; stroke-linecap: round; stroke-width: 18; transition: opacity var(--transition), stroke-width var(--transition); }
.kdn-chart-donut-segment:hover,
.kdn-chart-donut-segment:focus { opacity: .82; stroke-width: 22; outline: 0; }
.kdn-chart-radial-caption { fill: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; }
.kdn-chart-radial-value { fill: var(--text); font-size: 27px; font-weight: 780; text-anchor: middle; font-variant-numeric: tabular-nums; }

.kdn-chart-svg--spark { overflow: visible; }
.kdn-chart-spark-area { opacity: .12; }
.kdn-chart-spark-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.kdn-chart-spark-point { stroke: var(--surface-solid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kdn-chart-spark-bar { opacity: .82; }
.kdn-chart-spark-bar.is-zero { opacity: .68; }
.kdn-chart-spark-bar.is-active { opacity: .96; }
.kdn-chart-heat-cell { transition: opacity var(--transition), transform var(--transition); transform-box: fill-box; transform-origin: center; }
.kdn-chart-heat-cell:hover,
.kdn-chart-heat-cell:focus { opacity: .72; outline: 0; transform: scale(.86); }
.kdn-chart-meter-track { fill: var(--chart-track); }
.kdn-chart-meter-segment { opacity: .9; }
.kdn-chart-message { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; }

.kdn-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: var(--gap);
}
.kdn-chart-panel {
  min-width: 0;
  overflow: visible;
  box-shadow: var(--chart-panel-shadow);
}
.kdn-chart-stat {
  flex: 0 0 clamp(92px, 32%, 132px);
  width: clamp(92px, 32%, 132px);
  margin-inline-start: auto;
}
.kdn-chart-stat .kdn-chart-viewport { min-height: 48px; }
.kdn-chart-stat .kdn-chart-svg { height: 48px; }
@container (min-width: 540px) {
  .kdn-chart[data-chart-type="radial"],
  .kdn-chart[data-chart-type="donut"] {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(160px, .65fr);
    align-items: center;
    gap: var(--gap);
  }
}

@media (max-width: 1024px) {
  .kdn-chart-grid { grid-template-columns: 1fr; }
  .kdn-chart-axis-label { font-size: 10px; }
}

@media (max-width: 640px) {
  .kdn-chart[data-chart-type="radial"] .kdn-chart-viewport,
  .kdn-chart[data-chart-type="donut"] .kdn-chart-viewport { min-height: 230px; }
  .kdn-chart-legend { justify-content: flex-start; }
  .kdn-chart-stat { width: 96px; flex-basis: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .kdn-chart-line,
  .kdn-chart-bar,
  .kdn-chart-donut-segment,
  .kdn-chart-heat-cell { transition: none; }
}

@media print {
  .kdn-chart-tooltip { display: none !important; }
  .kdn-chart-line { opacity: 1; }
  .kdn-chart-panel { break-inside: avoid; box-shadow: none; }
}