/* ==========================================================================
   .tp-chart — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   The chart-plus-exact-value-table pairing (FEAT-027, UX "Honesty of data").
   The canvas is the illustration; the table is the record. P4.F1 renders into
   this shell and must not invent a chart-only style.

   Variants   --tall  --short
   Elements   __title  __description  __canvas-wrap  __canvas  __table
              __legend  __legend-item  __legend-marker  __empty
   Markers    __legend-marker--series-1 … --series-8

   OWNERSHIP NOTE. orchestration_plan.md §5.2 and ruling R-22 place
   css/components/chart.css with IMP-06, while P1.F2.T3's file table places it
   with IMP-01 and P1.F2's §5 requires it to ship here "so P4.F1.T2 has no
   reason to invent a chart-only style". It is authored here to satisfy the
   binding acceptance criterion and raised as an escalation; the expected
   resolution is the R-12/R-23 shape — created in Wave 1, extended by IMP-06 in
   Wave 4.

   ACC-004 AND THE SERIES MARKERS. Eight categorical colours cannot be told
   apart by a reader with deuteranopia. Every series therefore has a SHAPE as
   well as a colour, and the shapes below match the marker/dash pairing
   documented against --tp-color-chart-1 … -8 in tokens.css. The legend shows
   the shape; P4.F1.T4 draws the same shape on the canvas. Neither half works
   alone.
   ========================================================================== */

.tp-chart {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-4);
  min-width: 0;
  margin: 0;
}

/* The <figcaption>, referenced by the figure's aria-labelledby. */
.tp-chart__title {
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-lg);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
}

.tp-chart__description {
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
}

/* --------------------------------------------------------------------------
   Presentation controls — P4.F1.T3

   The 2-D/3-D toggle, and nothing else. It sits between the title and the
   canvas because that is where it applies: everything below it changes, and
   the table below THAT does not.

   The control itself is .tp-button --secondary --small, not a bespoke control.
   That is deliberate and it is what satisfies ACC-006 for free: .tp-button
   already carries min-width: var(--tp-space-target-min) (24px) and --small
   carries min-height: var(--tp-space-7) (32px), and the product-wide focus ring
   in utilities.css already applies. A second button style here would have to
   re-earn all three.
   -------------------------------------------------------------------------- */

.tp-chart__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Comfortably past the ACC-006 spacing expectation even when a future control
     joins the toggle in this row. */
  gap: var(--tp-space-2);
}

/* The toggle ships with the hidden attribute set and charts-3d.js reveals it,
   so this rule styles a control that can already do something. Nothing here
   overrides `hidden`: a display value on a hidden element would show a dead
   button to every reader with JavaScript disabled. */
.tp-chart__style-toggle {
  /* The state and the action are two spans so the accessible name reads as one
     phrase — "Presentation: 2-D Switch to 3-D" — while the two halves can be
     replaced independently by textContent. */
  gap: var(--tp-space-2);
}

/* The half naming the view in force. Weighted so the eye lands on the state
   before the action, without a second colour carrying that distinction. */
.tp-chart__style-state {
  font-weight: var(--tp-weight-bold);
}

.tp-chart__style-action {
  color: var(--tp-color-text-secondary);
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */

/* Chart.js sizes the canvas to its parent, so the parent — not the canvas —
   owns the height. Without a bounded parent the library grows the canvas on
   every resize event, which looks like a slow memory leak. */
.tp-chart__canvas-wrap {
  position: relative;
  width: 100%;
  height: var(--tp-space-12);
  min-width: 0;
}

@media (min-width: 48rem) {
  .tp-chart__canvas-wrap {
    height: calc(var(--tp-space-12) * 2);
  }
}

.tp-chart--short .tp-chart__canvas-wrap {
  height: var(--tp-space-11);
}

.tp-chart--tall .tp-chart__canvas-wrap {
  height: calc(var(--tp-space-12) * 3);
}

/* aria-hidden in the template: the table below carries the same data in an
   accessible form, so announcing an empty canvas adds nothing. */
.tp-chart__canvas {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.tp-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2) var(--tp-space-4);
}

.tp-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-color-text-secondary);
  font-size: var(--tp-text-sm);
}

.tp-chart__legend-marker {
  flex: none;
  width: var(--tp-space-3);
  height: var(--tp-space-3);
  background-color: var(--tp-color-text-muted);
}

/* Series 1 — circle, solid line. */
.tp-chart__legend-marker--series-1 {
  background-color: var(--tp-color-chart-1);
  border-radius: var(--tp-radius-pill);
}

/* Series 2 — square, dashed 6-3. */
.tp-chart__legend-marker--series-2 {
  background-color: var(--tp-color-chart-2);
  border-radius: 0;
}

/* Series 3 — triangle, dotted 2-2. */
.tp-chart__legend-marker--series-3 {
  background-color: var(--tp-color-chart-3);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Series 4 — diamond, dashed 10-4. */
.tp-chart__legend-marker--series-4 {
  background-color: var(--tp-color-chart-4);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Series 5 — cross, dash-dot. */
.tp-chart__legend-marker--series-5 {
  background-color: var(--tp-color-chart-5);
  clip-path: polygon(
    35% 0%,
    65% 0%,
    65% 35%,
    100% 35%,
    100% 65%,
    65% 65%,
    65% 100%,
    35% 100%,
    35% 65%,
    0% 65%,
    0% 35%,
    35% 35%
  );
}

/* Series 6 — star, dotted 1-3. */
.tp-chart__legend-marker--series-6 {
  background-color: var(--tp-color-chart-6);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* Series 7 — rounded square, dashed 8-2.
   CORRECTED BY P4.F1.T4, and the correction matters twice over. As authored,
   series 7 was `transform: rotate(45deg)` on a square, which draws exactly the
   shape series 4's diamond clip-path draws — two marks that a reader is asked
   to tell apart, rendering identically. It also had no counterpart on the
   canvas: Chart.js has one rotated rectangle and series 4 already holds it. A
   rounded square is distinct from every other mark here and is Chart.js's
   `rectRounded`, so the legend and the canvas now show the same thing.
   tokens.css still comments this series as "rect-rot"; correcting that comment
   is an INTEGRATION REQUEST against P1.F2.T1, which owns the file. */
.tp-chart__legend-marker--series-7 {
  background-color: var(--tp-color-chart-7);
  border-radius: var(--tp-radius-sm);
}

/* Series 8 — rotated cross, dashed 2-6.
   Also corrected by P4.F1.T4, for the second half of the same reason: Chart.js
   draws one triangle orientation and series 3 already holds it, so an inverted
   triangle could never appear on the canvas. `crossRot` — an X — is distinct
   from series 5's upright cross and from every other mark. tokens.css comments
   this series as "triangle-down"; same INTEGRATION REQUEST. */
.tp-chart__legend-marker--series-8 {
  background-color: var(--tp-color-chart-8);
  clip-path: polygon(
    0% 20%,
    20% 0%,
    50% 30%,
    80% 0%,
    100% 20%,
    70% 50%,
    100% 80%,
    80% 100%,
    50% 70%,
    20% 100%,
    0% 80%,
    30% 50%
  );
}

/* --------------------------------------------------------------------------
   The mandatory exact-value table
   -------------------------------------------------------------------------- */

/* Scrolls inside itself like every other table (UX-004). Styling comes from
   table.css; only the pairing's own spacing lives here, so there is exactly
   one table style in the product. */
.tp-chart__table {
  min-width: 0;
}

/* The overflow container around the pairing's table. .tp-table__scroll already
   owns the scrolling and the focus ring; this only stops the container from
   forcing the flex column wider than the card it sits in, which is what would
   put a horizontal scrollbar on the page body instead of on the table
   (UX-004). */
.tp-chart__table-scroll {
  min-width: 0;
}

/* A chart with no data still renders its table and its caption, so the reader
   learns that the period is empty rather than that the page is broken. */
.tp-chart__empty {
  padding: var(--tp-space-6);
  border: var(--tp-border-width-hairline) dashed var(--tp-color-border-subtle);
  border-radius: var(--tp-radius-md);
  color: var(--tp-color-text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Reduced motion — ACC-005

   The blanket in utilities.css shortens every transition in the product to
   0.01ms so that a handler waiting on transitionend is not stranded. For this
   component that is not enough: ACC-005 as P4.F1 reads it requires animation to
   be DISABLED, not shortened.

   `transition: none` is the shorthand, so it sets transition-property to none —
   a property the blanket does not touch, and one no !important is competing
   for. The result is that the toggle genuinely runs no transition rather than
   running a very fast one. !important is not used and is not permitted here;
   utilities.css and print.css are the only two files that may.

   The chart's own animation is disabled in JavaScript, because a canvas is not
   styled by CSS: charts.js returns `animation: false` under the same preference
   and charts-3d.js reads each arc's settled geometry rather than following it
   into place.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tp-chart__style-toggle {
    transition: none;
  }
}