/* Chart Components */
.chart-container {
  gap: 5.014%;
  /* Golden Ratio: Gap = Width / 1.618 */
  justify-content: center;
  /* Center the cluster */
}

.chart-bar {
  flex: 0 0 8.113%;
  /* Width based on Golden Ratio logic */
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.2));
  border-radius: clamp(2px, 0.3vw, 4px);
  transition: height 1s ease-out;
  transform-origin: bottom;
}

/* Spectrum: Red to Green (8 steps) */
.chart-bar:nth-child(1) {
  background: linear-gradient(to top, transparent, var(--sq-danger));
}

.chart-bar:nth-child(2) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 14%));
}

.chart-bar:nth-child(3) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 28%));
}

.chart-bar:nth-child(4) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 42%));
}

.chart-bar:nth-child(5) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 56%));
}

.chart-bar:nth-child(6) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 70%));
}

.chart-bar:nth-child(7) {
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sq-danger), var(--sq-green) 84%));
}

.chart-bar:nth-child(8) {
  background: linear-gradient(to top, transparent, var(--sq-green));
}

.chart-bar.active {
  /* Background handled by nth-child(8) */
  filter: drop-shadow(0 0 10px rgba(0, 255, 157, 0.5));
}

/* Fixed container utility */
/* Fixed container utility */
/* Fixed container utility */
.chart-container-fixed {
  min-height: 180px;
  width: 100%;
}

/* Height Utilities for Charts */
.h-0p {
  height: 0%;
}

.h-1p {
  height: 1%;
}

.h-2p {
  height: 2%;
}

.h-3p {
  height: 3%;
}

.h-4p {
  height: 4%;
}

.h-5p {
  height: 5%;
}

.h-6p {
  height: 6%;
}

.h-7p {
  height: 7%;
}

.h-8p {
  height: 8%;
}

.h-9p {
  height: 9%;
}

.h-10p {
  height: 10%;
}

.h-11p {
  height: 11%;
}

.h-12p {
  height: 12%;
}

.h-13p {
  height: 13%;
}

.h-14p {
  height: 14%;
}

.h-15p {
  height: 15%;
}

.h-16p {
  height: 16%;
}

.h-17p {
  height: 17%;
}

.h-18p {
  height: 18%;
}

.h-19p {
  height: 19%;
}

.h-20p {
  height: 20%;
}

.h-21p {
  height: 21%;
}

.h-22p {
  height: 22%;
}

.h-23p {
  height: 23%;
}

.h-24p {
  height: 24%;
}

.h-25p {
  height: 25%;
}

.h-26p {
  height: 26%;
}

.h-27p {
  height: 27%;
}

.h-28p {
  height: 28%;
}

.h-29p {
  height: 29%;
}

.h-30p {
  height: 30%;
}

.h-31p {
  height: 31%;
}

.h-32p {
  height: 32%;
}

.h-33p {
  height: 33%;
}

.h-34p {
  height: 34%;
}

.h-35p {
  height: 35%;
}

.h-36p {
  height: 36%;
}

.h-37p {
  height: 37%;
}

.h-38p {
  height: 38%;
}

.h-39p {
  height: 39%;
}

.h-40p {
  height: 40%;
}

.h-41p {
  height: 41%;
}

.h-42p {
  height: 42%;
}

.h-43p {
  height: 43%;
}

.h-44p {
  height: 44%;
}

.h-45p {
  height: 45%;
}

.h-46p {
  height: 46%;
}

.h-47p {
  height: 47%;
}

.h-48p {
  height: 48%;
}

.h-49p {
  height: 49%;
}

.h-50p {
  height: 50%;
}

.h-51p {
  height: 51%;
}

.h-52p {
  height: 52%;
}

.h-53p {
  height: 53%;
}

.h-54p {
  height: 54%;
}

.h-55p {
  height: 55%;
}

.h-56p {
  height: 56%;
}

.h-57p {
  height: 57%;
}

.h-58p {
  height: 58%;
}

.h-59p {
  height: 59%;
}

.h-60p {
  height: 60%;
}

.h-61p {
  height: 61%;
}

.h-62p {
  height: 62%;
}

.h-63p {
  height: 63%;
}

.h-64p {
  height: 64%;
}

.h-65p {
  height: 65%;
}

.h-66p {
  height: 66%;
}

.h-67p {
  height: 67%;
}

.h-68p {
  height: 68%;
}

.h-69p {
  height: 69%;
}

.h-70p {
  height: 70%;
}

.h-71p {
  height: 71%;
}

.h-72p {
  height: 72%;
}

.h-73p {
  height: 73%;
}

.h-74p {
  height: 74%;
}

.h-75p {
  height: 75%;
}

.h-76p {
  height: 76%;
}

.h-77p {
  height: 77%;
}

.h-78p {
  height: 78%;
}

.h-79p {
  height: 79%;
}

.h-80p {
  height: 80%;
}

.h-81p {
  height: 81%;
}

.h-82p {
  height: 82%;
}

.h-83p {
  height: 83%;
}

.h-84p {
  height: 84%;
}

.h-85p {
  height: 85%;
}

.h-86p {
  height: 86%;
}

.h-87p {
  height: 87%;
}

.h-88p {
  height: 88%;
}

.h-89p {
  height: 89%;
}

.h-90p {
  height: 90%;
}

.h-91p {
  height: 91%;
}

.h-92p {
  height: 92%;
}

.h-93p {
  height: 93%;
}

.h-94p {
  height: 94%;
}

.h-95p {
  height: 95%;
}

.h-96p {
  height: 96%;
}

.h-97p {
  height: 97%;
}

.h-98p {
  height: 98%;
}

.h-99p {
  height: 99%;
}

.h-100p {
  height: 100%;
}