/* ==========================================================================
   DEVEXA — DataFigure component
   Reference interactive chart pattern: D3 + SVG, data separated from
   presentation (see js/charts/data-figure.js), editorial red used only as
   a focus/highlight state, never as a default series color.
   Depends on tokens from css/devexa.css and the .chart-tooltip /
   .chart-* classes from css/charts.css, both of which must load first.
   ========================================================================== */

.data-figure {
  position: relative;
}

.data-figure__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

.data-figure__svg:focus-visible {
  outline: 2px solid var(--editorial-red);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ---- gridlines / axes ---- */

.data-figure__gridline {
  stroke: var(--rule);
  stroke-opacity: var(--chart-grid-opacity);
  shape-rendering: crispEdges;
}

.data-figure__axis-label {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--muted);
}

.data-figure__axis-label--muted { fill: var(--tertiary); }

/* ---- series lines ---- */

.data-figure__series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke var(--dur-fast) var(--ease), stroke-width var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

/* Wide, invisible hit area drawn on top of each thin visible line so a
   hover/tap doesn't need pixel-perfect precision on a 2px stroke. */
.data-figure__series-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 26;
  pointer-events: stroke;
  cursor: pointer;
}

.data-figure__series-dot {
  transition: r var(--dur-fast) var(--ease), fill var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.data-figure__series-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: fill var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.data-figure__series-label-ring {
  fill: none;
  stroke: var(--editorial-red);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.data-figure__series-group.is-key-focused .data-figure__series-label-ring {
  opacity: 1;
}

/* State: this series is dimmed because a different series is
   hovered/pinned/focused. */
.data-figure__series-group.is-dimmed .data-figure__series-line,
.data-figure__series-group.is-dimmed .data-figure__series-dot,
.data-figure__series-group.is-dimmed .data-figure__series-label,
.data-figure__series-group.is-dimmed .data-figure__bar {
  opacity: 0.18;
}

/* State: this series is the active one (hover, pin, or keyboard focus).
   INTERACTION FOCUS ≠ LEGEND: red marks a small, specific thing (a line,
   a dot, a stroke) — it never becomes the fill of a whole shape, and
   label/value text stays full-contrast ink, never red, never dimmed. A
   line turning red is the one exception: highlighting the whole series'
   path is the expected "which line is this" read for a line chart, not
   the "large filled block" problem bars have. */
.data-figure__series-group.is-active .data-figure__series-line {
  stroke: var(--editorial-red);
  stroke-width: 2.5;
}

.data-figure__series-group.is-active .data-figure__series-label {
  fill: var(--ink);
  font-weight: 600;
}

/* Pinned takes a slightly heavier stroke than a transient hover, so a
   reader can tell a click actually "stuck". */
.data-figure__series-group.is-pinned .data-figure__series-line {
  stroke-width: 3;
}

/* A single real observation with a missing neighbor on both sides must
   stay legible on its own — a bigger dot, not a longer line (§14: don't
   join points across a gap just to look tidier). */
.data-figure__series-dot--isolated {
  r: 5;
}

/* Active dot: small red marker (~8px), not an enlarged one — declared
   after --isolated so it wins the radius tie when both classes apply. */
.data-figure__series-group.is-active .data-figure__series-dot {
  fill: var(--editorial-red);
  r: 4;
}

/* ---- bars (grouped bar renderer) ---- */

.data-figure__bar {
  stroke: none;
  transition: fill var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
  cursor: pointer;
}

/* Active bar: thin red outline, never a full red fill — the bar's own
   neutral color and the value above it both stay legible. */
.data-figure__series-group.is-active .data-figure__bar {
  stroke: var(--editorial-red);
  stroke-width: 2;
}

/* A category that exists on the axis but has no observation for this
   series — rendered as a dashed placeholder, never as a zero-height or
   omitted bar (§11: brak danych ≠ zero). */
.data-figure__bar--missing {
  fill: none;
  stroke: var(--tertiary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.data-figure__bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-soft);
  transition: fill var(--dur-fast) var(--ease);
}

.data-figure__series-group.is-active .data-figure__bar-value {
  fill: var(--ink);
  font-weight: 600;
}

.data-figure__series-group.is-dimmed .data-figure__bar-value {
  opacity: 0.35;
}

/* Per-category hit area spanning the full plot height, for click/hover
   anywhere in a category's column (including where a bar is missing). */
.data-figure__category-hit {
  fill: transparent;
  cursor: pointer;
}

/* ---- series key (bar charts' equivalent of direct labels — §8: the
   label must trigger exactly the same focus as hovering the shape) ---- */

.data-figure__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-2);
}

.data-figure__key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.data-figure__key-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.data-figure__key-item.is-active {
  color: var(--ink);
  font-weight: 600;
}

.data-figure__key-item.is-active .data-figure__key-swatch {
  background: var(--editorial-red) !important;
}

.data-figure__key-item.is-dimmed { opacity: 0.4; }

/* ---- crosshair ---- */

.data-figure__crosshair {
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.data-figure__crosshair.is-visible { opacity: 1; }

.data-figure__crosshair-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Rendered only for the currently active series (see showCrosshair in
   data-figure.js) — a single small "look here" marker, never one per
   series, never in a neutral color. */
.data-figure__crosshair-dot {
  fill: var(--editorial-red);
  stroke: var(--paper);
  stroke-width: 1.5;
}

/* ---- overlay (captures pointer/touch for the whole plot area) ---- */

.data-figure__overlay {
  fill: transparent;
  cursor: crosshair;
  touch-action: pan-y;
}

/* ---- annotation ---- */

.data-figure__annotation-line {
  stroke: var(--muted);
  stroke-width: 1;
}

.data-figure__annotation-line--emphasis { stroke: var(--editorial-red); }

.data-figure__annotation-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  fill: var(--ink-soft);
}

/* ---- tooltip (extends .chart-tooltip from charts.css) ----
   Editorial annotation, not a chart-library default: hierarchy is
   PERIOD (small, muted, mono) → SERIES (ink) → VALUE (ink, mono,
   heavier) — full contrast throughout. Red appears only as the small
   swatch dot on the active row, never as body text color. */

.data-figure__tooltip-period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.data-figure__tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.data-figure__tooltip-row + .data-figure__tooltip-row { margin-top: 4px; }

.data-figure__tooltip-series {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}

.data-figure__tooltip-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.data-figure__tooltip-row.is-active .data-figure__tooltip-series { font-weight: 600; }
.data-figure__tooltip-row.is-active .data-figure__tooltip-swatch { background: var(--editorial-red); }

.data-figure__tooltip-row.is-empty .data-figure__tooltip-series,
.data-figure__tooltip-row.is-empty .data-figure__tooltip-value {
  color: var(--tertiary);
  font-style: italic;
  font-weight: 400;
}

.data-figure__tooltip-swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* ---- controls / VIEW DATA toggle ---- */

.data-figure__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.data-figure__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tertiary);
  letter-spacing: 0.03em;
}

.data-figure__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 0;
}

.data-figure__toggle-glyph {
  color: var(--editorial-red);
  transition: transform var(--dur-fast) var(--ease);
}

.data-figure__toggle[aria-expanded="true"] .data-figure__toggle-glyph {
  transform: rotate(180deg);
}

.data-figure__toggle:hover .data-figure__toggle-label { text-decoration: underline; text-underline-offset: 3px; }

/* ---- data table (built from the same loaded dataset) ---- */

.data-figure__table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.data-figure__table-wrap[hidden] { display: none; }

.data-figure__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.data-figure__table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.data-figure__table th,
.data-figure__table td {
  text-align: right;
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-figure__table th[scope="row"] {
  text-align: left;
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 500;
}

.data-figure__table thead th {
  border-top: none;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
}

.data-figure__table td.is-empty { color: var(--tertiary); font-style: italic; }

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .data-figure__series-line,
  .data-figure__series-dot,
  .data-figure__series-label,
  .data-figure__series-label-ring,
  .data-figure__crosshair,
  .data-figure__toggle-glyph {
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .data-figure__controls { flex-wrap: wrap; }
}

/* ---- laying two small DataFigures side by side (e.g. value + mass,
   two different units that shouldn't share one axis) ---- */

.data-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-4);
}

.data-figure-pair__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

@media (max-width: 640px) {
  .data-figure-pair { grid-template-columns: 1fr; gap: var(--space-5); }
}