/* Cheeky Charts 1.0.16 — modern, quiet-luxury chart styling. Zero-chrome defaults. */
.cchk-figure {
  --cchk-ink: #101828;
  --cchk-muted: #667085;
  --cchk-line: #eaecf0;
  --cchk-card: #ffffff;
  --cchk-accent: #2e86ab;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--cchk-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Card chrome returns only when a background color is chosen. */
.cchk-figure.cchk-solid {
  background: var(--cchk-card);
  border: 1px solid var(--cchk-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
}
.cchk-head {
  text-align: center;
  margin: 0;
  padding: 0;
}
.cchk-title {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--cchk-t-family, inherit);
  font-size: var(--cchk-t-size, clamp(1.25rem, 2.6vw, 1.75rem));
  font-weight: var(--cchk-t-weight, 700);
  font-style: var(--cchk-t-style, normal);
  letter-spacing: var(--cchk-t-spacing, -0.02em);
  line-height: var(--cchk-t-height, 1.25);
  text-align: var(--cchk-t-align, center);
  text-decoration: var(--cchk-t-deco, none);
  text-transform: var(--cchk-t-transform, none);
  color: var(--cchk-t-color, var(--cchk-ink));
}
.cchk-subtitle {
  display: block;
  margin-top: 0.35rem;
  margin-bottom: 0;
  font-family: var(--cchk-s-family, inherit);
  font-size: var(--cchk-s-size, 0.925rem);
  font-weight: var(--cchk-s-weight, 400);
  font-style: var(--cchk-s-style, normal);
  letter-spacing: var(--cchk-s-spacing, 0.01em);
  line-height: var(--cchk-s-height, 1.5);
  text-align: var(--cchk-s-align, center);
  text-decoration: var(--cchk-s-deco, none);
  text-transform: var(--cchk-s-transform, none);
  color: var(--cchk-s-color, var(--cchk-muted));
}
.cchk-canvas-wrap {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.cchk-canvas {
  width: 100% !important;
  height: 100% !important;
}
/* Subtle high-end ease-in on scroll into view.
   Visible by default: if JS/Chart.js never run (e.g. a builder live-swap),
   the chart area, legend and table still show instead of vanishing. */
.cchk-reveal.cchk-in {
  animation: cchk-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cchk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* Scroll-replay mode (opt-in via Scroll replay toggle): the canvas wrap
   eases away scrolling past and eases back in on return. Opacity (not
   display) so layout never jumps; legend/table/titles stay put. */
.cchk-scroll .cchk-reveal { opacity: 0; }
.cchk-scroll .cchk-reveal.cchk-in {
  opacity: 1;
  animation: cchk-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cchk-scroll .cchk-reveal.cchk-out {
  opacity: 0;
  animation: cchk-fall 0.45s ease-in both;
}
@keyframes cchk-fall {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .cchk-reveal.cchk-in {
    animation: none;
  }
  .cchk-scroll .cchk-reveal { opacity: 1; }
  .cchk-scroll .cchk-reveal.cchk-out { animation: none; }
}
/* Custom HTML legend — town names always clearly visible. */
.cchk-legend {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.cchk-legend--left { justify-content: flex-start; }
.cchk-legend--right { justify-content: flex-end; }
.cchk-legend--top { margin: 0 0 1.25rem; }
.cchk-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--cchk-line);
  border-radius: var(--cchk-leg-r, 999px);
  background: #f9fafb;
  font-size: 0.875rem;
  line-height: 1.4;
}
.cchk-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}
.cchk-legend-label { font-weight: 600; color: var(--cchk-leg-label, inherit); }
.cchk-legend-value {
  color: var(--cchk-leg-val, var(--cchk-muted));
  font-variant-numeric: tabular-nums;
}
/* AI + screen-reader data table. Visible, beautiful, semantic. */
.cchk-data {
  margin-top: 1.25rem;
  margin-inline: auto;
  border-top: var(--cchk-div-w, 1px) solid var(--cchk-div-c, var(--cchk-line));
  padding-top: 1rem;
  max-width: var(--cchk-table-w, none);
}
.cchk-data-toggle {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--cchk-tgl-size, 0.9rem);
  color: var(--cchk-tgl-color, var(--cchk-accent));
}
.cchk-table-wrap { overflow-x: auto; }
.cchk-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.925rem;
}
.cchk-table caption {
  text-align: left;
  font-weight: 700;
  font-size: var(--cchk-cap-size, 0.925rem);
  color: var(--cchk-cap-color, inherit);
  padding-bottom: 0.5rem;
}
.cchk-table th,
.cchk-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: var(--cchk-div-w, 1px) solid var(--cchk-div-c, var(--cchk-line));
}
.cchk-table thead th {
  font-size: var(--cchk-th-size, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cchk-th-color, var(--cchk-muted));
}
.cchk-table tbody th {
  font-weight: 600;
  font-size: var(--cchk-tdl-size, inherit);
  color: var(--cchk-tdl-color, inherit);
}
.cchk-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: var(--cchk-tdv-size, inherit);
  color: var(--cchk-tdv-color, inherit);
}
.cchk-table thead th:last-child { text-align: right; }
.cchk-note {
  font-size: 0.85rem;
  color: var(--cchk-muted);
  margin-top: 0.75rem;
  line-height: 1.55;
}
/* Empty state — styled setup card, never invented data. */
.cchk-empty {
  border: 2px dashed var(--cchk-line);
  border-radius: 16px;
  text-align: center;
  color: var(--cchk-muted);
  font-size: 0.925rem;
}
.cchk-empty-title {
  display: block;
  color: var(--cchk-ink);
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.cchk-empty p { margin: 0; }
/* Doughnut centre overlay — optional single image or stacked front/back.
   Back layer (eyeballs) sits under the front layer (face with eye holes).
   .cchk-googly on the figure enables cursor-follow via JS (translate). */
.cchk-canvas {
  position: relative;
  z-index: 2;
}
/* Doughnut centre overlay sits BELOW the canvas: the canvas is transparent
   in the hole, so the image shows through while the rings cover any
   overflow — corners can never poke past the chart. pointer-events none
   keeps tooltips/hover working on the canvas above. */
.cchk-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.cchk-center-inner {
  position: relative;
  width: var(--cchk-center-size, 46%);
  aspect-ratio: 1 / 1;
}
/* Circle mask clips the photo into the hole so it stays tidy. */
.cchk-center-inner.cchk-mask-circle {
  border-radius: 50%;
  overflow: hidden;
}
.cchk-center-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cchk-center-back {
  z-index: 1;
  will-change: transform;
}
.cchk-center-front {
  z-index: 2;
}
.cchk-googly .cchk-center-back {
  /* Smoothing is owned by JS (per-frame ease); no CSS transition. */
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .cchk-googly .cchk-center-back { transition: none; }
}
@media (max-width: 560px) {
  .cchk-figure.cchk-solid { border-radius: 16px; }
}
@media print {
  .cchk-figure { box-shadow: none; }
}