/* GreenMinter app-level rules for the charts family (templates/ui/macros/charts.html): gauge, radial
   rings, bar chart, donut, line / area chart and the altitude meter. Lumen has no construct for
   these shapes, so they are `gm-ch-*` / `gm-alt-*` classes over GreenMint's animated-chart recipes
   (STYLE_SPEC 5.29, 6.3). Every colour is a --gm-* token read at the element, so a chart follows
   dark / light and any tone scope it sits in (a gauge inside .gm-accent-scope turns purple).
   Motion: each part has one keyframe that plays once on load (motion.js can replay it), and the
   final state is the base style, so a chart is complete with no animation at all. */

/* Showcase furniture shared with the animations family: a centred stage for a chart inside a card
   (the caps sub-label is showcase.css's `.gm-sc-label`). */
.gm-ch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gm-ch-stage--row {
  flex-direction: row;
}

.gm-ch__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gm-text-muted);
}

/* ---------- keyframes: every one ends on the element's own base style ---------- */
@keyframes gm-ch-sweep {
  from { stroke-dashoffset: 100; opacity: 0; }
  3% { opacity: 1; }
  to { stroke-dashoffset: var(--off); }
}
@keyframes gm-ch-needle {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--rot)); }
}
@keyframes gm-ch-ring {
  from { stroke-dasharray: 0 100; opacity: 0; }
  4% { opacity: 1; }
  to { stroke-dasharray: var(--v) var(--g); }
}
@keyframes gm-ch-slice {
  from { stroke-dasharray: 0 100; }
  to { stroke-dasharray: var(--v) var(--g); }
}
@keyframes gm-ch-grow-y {
  from { height: 0; }
  to { height: var(--p); }
}
@keyframes gm-ch-grow-x {
  from { width: 0; }
  to { width: var(--p); }
}
@keyframes gm-ch-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes gm-ch-fade {
  from { opacity: 0; }
}
@keyframes gm-ch-pop {
  from { transform: scale(0); }
}

/* ---------- legend (radial, donut, multi-series line) ---------- */
.gm-ch-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gm-ch-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gm-text-muted);
}
.gm-ch-legend__row i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.gm-ch-legend__row b {
  margin-left: auto;
  padding-left: 4px;
  font-weight: 700;
  color: var(--gm-text);
}
.gm-ch-legend__row em {
  font-style: normal;
  font-weight: 500;
  color: var(--gm-text-subtle);
}
.gm-ch-legend--line {
  margin-top: 12px;
  align-items: flex-start;
}

/* ---------- gauge ---------- */
.gm-ch-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gm-ch-gauge__svg {
  display: block;
  overflow: visible;
}
.gm-ch-gauge__track {
  stroke: var(--gm-surface-3);
}
.gm-ch-gauge__fill {
  stroke: var(--gm-primary-control);
  animation: gm-ch-sweep 1.1s var(--gm-ease) both;
}
.gm-ch-gauge--glow .gm-ch-gauge__fill {
  filter: drop-shadow(0 0 4px var(--gm-primary-glow)) drop-shadow(0 0 10px var(--gm-primary-glow));
}
.gm-ch-band {
  opacity: 0.85;
}
.gm-ch-band--down { stroke: var(--gm-down); }
.gm-ch-band--warn { stroke: var(--gm-warning); }
.gm-ch-band--up { stroke: var(--gm-up); }
.gm-ch-gauge__needle {
  stroke: var(--gm-text);
  transform-box: view-box;
  transform: rotate(var(--rot));
  animation: gm-ch-needle 1.1s var(--gm-ease) both;
}
.gm-ch-gauge__hub {
  fill: var(--gm-text);
}
.gm-ch-gauge__value {
  margin-top: -24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gm-text);
}
.gm-ch-gauge__value small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-text-muted);
}

/* ---------- radial rings ---------- */
.gm-ch-radial {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gm-ch-radial--single {
  flex-direction: column;
  gap: 8px;
}
.gm-ch-radial__chart {
  position: relative;
  flex-shrink: 0;
}
.gm-ch-radial__svg {
  display: block;
  transform: rotate(-90deg);
}
.gm-ch-radial__track {
  stroke: var(--gm-surface-3);
}
.gm-ch-radial__bar {
  stroke: var(--c);
  animation: gm-ch-ring 1.1s var(--gm-ease) both;
  animation-delay: calc(var(--i) * 90ms);
}
.gm-ch-radial__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.gm-ch-radial__center b {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--gm-text);
}

/* ---------- bar chart ---------- */
.gm-ch-bars {
  display: flex;
  gap: 12px;
}
.gm-ch-bars--v {
  align-items: flex-end;
}
.gm-ch-bars__col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gm-ch-bars__value {
  line-height: 1.5;
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-text);
}
.gm-ch-bars__track {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 40px;
  display: flex;
  align-items: flex-end;
}
.gm-ch-bars__fill {
  width: 100%;
  height: var(--p);
  border-radius: 8px 8px 0 0;
  background: var(--c);
  animation: gm-ch-grow-y 0.9s var(--gm-ease) both;
  animation-delay: calc(var(--i) * 60ms);
}
.gm-ch-bars__label {
  line-height: 1.5;
  font-size: 11px;
  color: var(--gm-text-subtle);
  text-align: center;
}
.gm-ch-bars--h {
  flex-direction: column;
  gap: 12px;
}
.gm-ch-bars__hrow {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 12px;
}
.gm-ch-bars__hlabel {
  overflow: hidden;
  font-size: 12px;
  color: var(--gm-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gm-ch-bars__htrack {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--gm-surface-3);
}
.gm-ch-bars__hfill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  border-radius: 9999px;
  background: var(--c);
  animation: gm-ch-grow-x 0.9s var(--gm-ease) both;
  animation-delay: calc(var(--i) * 60ms);
}
.gm-ch-bars__hvalue {
  min-width: 52px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--gm-text);
}

/* ---------- donut ---------- */
.gm-ch-donut {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gm-ch-donut__chart {
  position: relative;
  flex-shrink: 0;
}
.gm-ch-donut__svg {
  display: block;
  transform: rotate(-90deg);
}
.gm-ch-donut__slice {
  stroke: var(--c);
  animation: gm-ch-slice 1.1s var(--gm-ease) both;
  animation-delay: calc(var(--i) * 90ms);
}
.gm-ch-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: var(--gm-text-muted);
}
.gm-ch-donut__center b {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--gm-text);
}
.gm-ch-donut__center small {
  font-size: 11px;
  color: var(--gm-text-subtle);
}

/* ---------- line / area chart ---------- */
.gm-ch-line {
  position: relative;
  width: 100%;
}
.gm-ch-line svg {
  display: block;
  overflow: visible; /* an end label wider than the viewBox margin spills into the card padding */
  width: 100%;
  height: auto;
}
.gm-ch-axis {
  fill: var(--gm-text-subtle);
  font-family: var(--gm-font-sans, var(--lm-font-sans, "Inter", system-ui, sans-serif));
  font-size: 10px;
}
.gm-ch-grid {
  stroke: var(--gm-chart-grid);
}
.gm-ch-line__bar {
  fill: var(--gm-primary);
  opacity: 0.07;
  animation: gm-ch-fade 0.9s ease 0.2s both;
}
.gm-ch-line__area {
  animation: gm-ch-fade 0.9s ease 0.4s both;
}
.gm-ch-line__path {
  stroke-dashoffset: 0;
  animation: gm-ch-draw 1.4s var(--gm-ease) both;
  animation-delay: calc(var(--i, 0) * 150ms);
}
.gm-ch-line__path--glow {
  filter: drop-shadow(0 0 6px var(--gm-primary));
}
.gm-ch-line__peak {
  stroke: var(--gm-bg);
  transform-box: fill-box;
  transform-origin: center;
  animation: gm-ch-pop 0.4s var(--gm-ease) 1.2s both;
}

/* ---------- altitude meter price levels ---------- */
.gm-alt {
  position: relative;
  --gm-alt-rail: 78px; /* vertical: distance from the left edge to the rail */
}
.gm-alt__readout {
  flex-shrink: 0;
  padding: 1px 7px;
  border: 1px solid var(--gm-primary-soft-border);
  border-radius: 8px;
  background: var(--gm-primary-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gm-primary-ink);
}
.gm-alt__dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.gm-alt__marker--alert .gm-alt__dot { background: var(--gm-text-muted); }
.gm-alt__marker--support .gm-alt__dot { background: var(--gm-info); }
.gm-alt__marker--resistance .gm-alt__dot { background: var(--gm-accent); }
.gm-alt__marker--entry .gm-alt__dot { background: var(--gm-primary-control); }
.gm-alt__marker--target .gm-alt__dot { background: var(--gm-up); }
.gm-alt__marker--stop .gm-alt__dot { background: var(--gm-down); }
.gm-alt__marker-label {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--gm-text-muted);
}
.gm-alt__marker-label b {
  font-weight: 700;
  color: var(--gm-text);
}
.gm-alt__marker--major .gm-alt__marker-label {
  font-weight: 600;
  color: var(--gm-text);
}
.gm-alt__level {
  position: absolute;
  pointer-events: none;
  --gm-alt-level-color: var(--gm-border-strong);
}
.gm-alt__marker--entry .gm-alt__level { --gm-alt-level-color: var(--gm-primary-soft-border); }
.gm-alt__marker--target .gm-alt__level,
.gm-alt__marker--support .gm-alt__level { --gm-alt-level-color: var(--gm-success-soft-border); }
.gm-alt__marker--stop .gm-alt__level { --gm-alt-level-color: var(--gm-danger-soft-border); }
.gm-alt__marker--resistance .gm-alt__level { --gm-alt-level-color: var(--gm-accent-soft-border); }
.gm-alt__tick-label {
  position: absolute;
  font-size: 11px;
  white-space: nowrap;
  color: var(--gm-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* vertical: marker labels LEFT, rail, price scale RIGHT */
.gm-alt--vertical {
  width: 188px;
}
.gm-alt--vertical .gm-alt__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gm-alt-rail);
  width: 1px;
  background: var(--gm-border-strong);
}
.gm-alt--vertical .gm-alt__tick {
  position: absolute;
  left: var(--gm-alt-rail);
  width: 4px;
  height: 1px;
  background: var(--gm-border-strong);
}
.gm-alt--vertical .gm-alt__tick--major {
  width: 9px;
  background: var(--gm-text-subtle);
}
.gm-alt--vertical .gm-alt__tick-label {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.gm-alt--vertical .gm-alt__marker {
  position: absolute;
  left: 0;
  z-index: 2;
  width: var(--gm-alt-rail);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transform: translateY(50%);
}
.gm-alt--vertical .gm-alt__dot {
  margin-right: -4px;
}
.gm-alt--vertical .gm-alt__level {
  top: 50%;
  left: var(--gm-alt-rail);
  width: calc(188px - var(--gm-alt-rail));
  height: 0;
  border-top: 1px dashed var(--gm-alt-level-color);
}
.gm-alt__current {
  position: absolute;
  z-index: 3;
  left: calc(var(--gm-alt-rail) - 9px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(50%);
}
.gm-alt__current-line {
  flex-shrink: 0;
  width: 18px;
  height: 2px;
  border-radius: 9999px;
  background: var(--gm-primary-control);
}

/* horizontal: a perspective drum rolling past a fixed centre readout */
.gm-alt--horizontal {
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 32px;
}
.gm-alt__stage {
  position: relative;
  height: 54px;
  overflow: hidden;
  perspective: 420px;
  perspective-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.gm-alt__drum {
  height: 100%;
  transform: rotateX(26deg);
  transform-origin: 50% 100%;
}
.gm-alt__scroll {
  display: flex;
  height: 100%;
}
.gm-alt__scroll--run {
  animation-name: gm-alt-roll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes gm-alt-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.gm-alt__strip {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}
.gm-alt--horizontal .gm-alt__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: var(--gm-border-strong);
}
.gm-alt--horizontal .gm-alt__tick--major {
  height: 12px;
  background: var(--gm-text-subtle);
}
.gm-alt--horizontal .gm-alt__tick-label {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.gm-alt--horizontal .gm-alt__marker {
  position: absolute;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
}
.gm-alt--horizontal .gm-alt__level {
  top: -44px;
  bottom: -2px;
  left: 50%;
  width: 0;
  border-left: 1px dashed var(--gm-alt-level-color);
}
.gm-alt__needle {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}
.gm-alt__needle-line {
  width: 2px;
  height: 34px;
  border-radius: 9999px;
  background: var(--gm-primary-control);
  box-shadow: 0 0 10px var(--gm-primary-glow);
}

@media (prefers-reduced-motion: reduce) {
  .gm-ch *,
  .gm-ch *::before,
  .gm-ch *::after {
    animation: none !important;
  }
}

/* Demo grids for the showcase partials of this family: auto-fit like GreenMint's demo-grid, so a
   row of two or three cards fills the width. */
.gm-demo-grid {
  display: grid;
  gap: 16px;
}
.gm-demo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.gm-demo-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.gm-demo-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

/* A section's first row: the caps sub-label with a replay button at the far end. */
/* The label's top sits 16px under the note, as GreenMint's (R3 theme 1): the 32px replay button
   takes only 16px of the row (8px negative margin each side), so it overhangs the gaps and the
   row is as tall as the label. */
.gm-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gm-demo-bar .gm-sc-label {
  margin: 0;
}
.gm-demo-bar .lm-btn {
  margin-block: -8px;
}