/*
 * Chart-specific styles: polar plot grid, linear chart host.
 * Loaded by index.html; NOT by login.html.
 *
 * SVG content (bar colors, stroke widths, label colors) is driven
 * entirely by computePolarLayout / computeLinearLayout and their
 * render counterparts — no CSS tokens are needed there. This file
 * owns only the outer DOM containers and the responsive grid.
 */

/* ------------------------------------------------------------------ */
/* Polar plot grid                                                      */
/* ------------------------------------------------------------------ */

.polar-plots {
  display: flex;
  flex-wrap: wrap;
  /* Row gap > column gap so the title above each chart pairs
     visually with its own donut rather than the row above.
     Matches the prototype: activity-viz-polar.html:39 */
  gap: 28px 12px;
  container-type: inline-size;
}

.polar-plot {
  flex: 0 0 100%;   /* 1 per row on narrow / phone viewports */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Container-query breakpoints lifted verbatim from the prototype.
   At each threshold we add one more plot per row:
     < 460 px  → 1 per row (default above)
     460-619   → 2 per row
     620-899   → 3 per row
     900-1179  → 4 per row
     ≥ 1180    → 5 per row                                              */
@container (min-width: 460px) {
  .polar-plot { flex: 0 0 calc((100% - 12px) / 2); }
}
@container (min-width: 620px) {
  .polar-plot { flex: 0 0 calc((100% - 24px) / 3); }
}
@container (min-width: 900px) {
  .polar-plot { flex: 0 0 calc((100% - 36px) / 4); }
}
@container (min-width: 1180px) {
  .polar-plot { flex: 0 0 calc((100% - 48px) / 5); }
}

.polar-plot .day-title {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.polar-plot svg {
  display: block;
  width: 100%;
  /* aspect-ratio matches the cropped viewBox "0 8 100 84" used by
     renderPolar, so the SVG element hugs the donut content tightly
     and the day title sits close to the chart without a tall gap. */
  aspect-ratio: 100 / 84;
}

/* ------------------------------------------------------------------ */
/* Linear chart host                                                    */
/* ------------------------------------------------------------------ */

.linear-chart {
  width: 100%;
}

.linear-chart svg {
  display: block;
  width: 100%;
  /* Height is clamped independent of width so row heights don't
     change as the viewport narrows. Matches the prototype clamp in
     activity-viz-horizontal.html:37. */
  height: clamp(220px, 40vw, 380px);
}