/* GreenStat chart engine (chart.js). Uses the app tokens from styles.css; the fallbacks keep it usable alone.
   Heights are defined here, never derived from a previous render — the JS reads them, it does not write them. */

.gs-chart {
  --gs-halo: var(--surface, #fbfdfc);
  --gs-grid: var(--line, #d7e2dd);
  --gs-grid-strong: var(--line-strong, #c5d4ce);
  --gs-body-h: clamp(300px, 46vh, 480px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  color: var(--ink, #17302b);
  font-family: inherit;
}

.gs-chart [hidden] { display: none !important; }

.gs-chart--portrait {
  --gs-body-h: clamp(405px, 62vh, 648px);
  max-width: 600px;
  margin-inline: auto;
}

/* Toolbar: the visible period on the left, zoom on the right. */
.gs-chart__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.gs-chart__period {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft, #597069);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gs-chart__zoom { display: flex; flex: none; gap: 6px; }

.gs-chart__btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line, #d7e2dd);
  border-radius: 12px;
  background: var(--surface, #fbfdfc);
  color: var(--ink-soft, #597069);
  cursor: pointer;
  transition: background-color var(--motion-fast, 140ms) ease, color var(--motion-fast, 140ms) ease, border-color var(--motion-fast, 140ms) ease;
}
.gs-chart__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gs-chart__btn:hover:not(:disabled) { border-color: var(--line-strong, #c5d4ce); background: var(--bg-soft, #eaf1ee); color: var(--ink, #17302b); }
.gs-chart__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #2f8978) 42%, transparent); outline-offset: 2px; }
.gs-chart__btn:disabled { opacity: .38; cursor: default; }

/* Body: fixed y axis + horizontally scrolling plot. */
.gs-chart__body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: var(--gs-body-h);
}

/* The axis sits above the plot so a value label scrolled against it is covered, not overlapped. */
.gs-chart__yaxis { position: relative; z-index: 1; display: block; overflow: visible; background: var(--surface, #fbfdfc); }

.gs-chart__scroll {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong, #c5d4ce) transparent;
  cursor: grab;
  touch-action: pan-x pan-y;
  /* Labels cut by the scroll edge fade out instead of showing a sliced number («200» of «63 200»). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-user-select: none;
  user-select: none;
}
.gs-chart__scroll.is-dragging { cursor: grabbing; }
/* Dots are the tab stops; the scroller itself only takes focus programmatically or by click. */
.gs-chart__scroll:focus { outline: none; }
.gs-chart__scroll:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #2f8978) 42%, transparent); outline-offset: -2px; }
.gs-chart__scroll::-webkit-scrollbar { height: 8px; }
.gs-chart__scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--line-strong, #c5d4ce); }
.gs-chart__scroll::-webkit-scrollbar-track { background: transparent; }

.gs-chart__track { position: relative; height: 100%; }
.gs-chart__plot { position: absolute; top: 0; display: block; overflow: visible; }

.gs-chart__empty {
  position: absolute;
  inset: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: var(--ink-faint, #60756d);
  font-size: 14px;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

/* SVG parts */
.gs-chart text,
.gs-chart-static text { font-family: inherit; }

.gs-chart__grid { stroke: var(--gs-grid); stroke-width: 1; stroke-opacity: .75; shape-rendering: crispEdges; }
.gs-chart__grid--minor { stroke-opacity: .38; }
.gs-chart__grid--v { stroke-opacity: .55; }
.gs-chart__grid--strong { stroke: var(--gs-grid-strong); stroke-opacity: .9; }
.gs-chart__zero { stroke: var(--ink-faint, #60756d); stroke-opacity: .5; }

.gs-chart__tick,
.gs-chart__xlabel { fill: var(--ink-faint, #60756d); font-size: var(--fs-12, 12px); font-variant-numeric: tabular-nums; }
.gs-chart__tick--zero { fill: var(--ink-soft, #597069); }
.gs-chart__xcontext { fill: var(--ink-soft, #597069); font-size: var(--fs-12, 12px); font-weight: 600; }

.gs-chart__line { fill: none; stroke: var(--accent, #2f8978); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

.gs-chart__dot { fill: var(--accent, #2f8978); stroke: var(--gs-halo); stroke-width: 2; }
.gs-chart__dot--last { fill: var(--accent-strong, #236d63); }
.gs-chart__dot:focus { outline: none; }
.gs-chart__dot:focus-visible { stroke: var(--ink, #17302b); }

.gs-chart__value {
  fill: var(--ink, #17302b);
  font-size: var(--fs-12, 12px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--gs-halo);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.gs-chart__value--key { font-weight: 700; }

.gs-chart__ring { fill: none; stroke: var(--accent, #2f8978); stroke-width: 2; stroke-opacity: .45; pointer-events: none; }
.gs-chart__guide { stroke: var(--accent, #2f8978); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

/* Tooltip */
.gs-chart__tooltip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  max-width: 240px;
  padding: 8px 12px 9px;
  border: 1px solid var(--line, #d7e2dd);
  border-radius: 12px;
  background: var(--surface-raised, #ffffff);
  box-shadow: var(--shadow-soft, 0 10px 32px rgba(31, 70, 60, .08));
  color: var(--ink-soft, #597069);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.gs-chart__tip-value { color: var(--ink, #17302b); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gs-chart__tip-note { color: var(--ink-faint, #60756d); font-size: var(--fs-12, 12px); }

@media (max-width: 760px) {
  .gs-chart { --gs-body-h: clamp(260px, 42vh, 320px); }
  .gs-chart--portrait { --gs-body-h: clamp(351px, 56vh, 432px); }
}

@media (prefers-reduced-motion: reduce) {
  .gs-chart__btn { transition: none; }
}

/* Print / PDF (renderStaticChart): light, black text, independent of the screen theme. */
.gs-chart-static { display: block; width: 100%; height: auto; overflow: visible; color: #111; }
.gs-chart-static .gs-chart__grid { stroke: #e2e2e2; stroke-opacity: 1; }
.gs-chart-static .gs-chart__grid--minor { stroke: #f0f0f0; }
.gs-chart-static .gs-chart__grid--strong { stroke: #c8c8c8; }
.gs-chart-static .gs-chart__zero { stroke: #8a8a8a; }
.gs-chart-static .gs-chart__tick,
.gs-chart-static .gs-chart__xlabel { fill: #555; }
.gs-chart-static .gs-chart__xcontext,
.gs-chart-static .gs-chart__tick--zero { fill: #222; }
.gs-chart-static .gs-chart__line { stroke: #1f6f55; stroke-width: 2; }
.gs-chart-static .gs-chart__dot { fill: #1f6f55; stroke: #fff; }
.gs-chart-static .gs-chart__dot--last { fill: #14503d; }
.gs-chart-static .gs-chart__value { fill: #111; stroke: #fff; }
.gs-chart-static .gs-chart__empty-text { fill: #666; font-size: 13px; }