.universal-charts,
.universal-split,
.universal-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.universal-intro,
.universal-card {
  display: grid;
  min-width: 0;
  gap: .85rem;
}

.universal-card[data-mode="split"] {
  grid-column: 1 / -1;
}

.universal-intro > *,
.universal-card > *,
.universal-values section h4,
.universal-split h4 {
  margin: 0;
}

.universal-controls {
  align-items: end;
}

.universal-controls > * {
  min-width: 0;
}

.universal-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .45rem;
}

.universal-check input {
  width: auto;
  min-height: 0;
}

.universal-edit,
.universal-values {
  border: 1px solid #c9d8d4;
  border-radius: .65rem;
  padding: .7rem .8rem;
}

.universal-edit > summary,
.universal-values > summary {
  cursor: pointer;
  font-weight: 650;
}

.universal-edit[open] > summary,
.universal-values[open] > summary {
  margin-bottom: .75rem;
}

.universal-edit > div + div {
  margin-top: .7rem;
}

.universal-edit label,
.universal-controls label {
  min-width: 0;
}

.universal-edit select,
.universal-controls select {
  width: 100%;
  min-width: 0;
}

.universal-series-list {
  display: grid;
  gap: .45rem;
}

.universal-series-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  min-width: 0;
}

.universal-series-row label {
  flex: 1 1 11rem;
}

.universal-legend {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: .25rem .8rem;
  list-style: none;
  font-size: .9rem;
}

.universal-legend li {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.universal-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--series-color, #125943);
}

.universal-values h4 .universal-dot {
  margin-right: .35rem;
}

.universal-card [data-series-color="0"] { --series-color: #15644d; }
.universal-card [data-series-color="1"] { --series-color: #2651a3; }
.universal-card [data-series-color="2"] { --series-color: #a84818; }
.universal-card [data-series-color="3"] { --series-color: #8d2b67; }
.universal-card [data-series-color="4"] { --series-color: #7b6214; }
.universal-card [data-series-color="5"] { --series-color: #6951ab; }

.universal-plot {
  margin: 0;
  min-width: 0;
}

.universal-plot figcaption {
  color: #3a5852;
  font-size: .82rem;
}

.universal-plot svg {
  display: block;
  width: 100%;
  min-height: 6rem;
  height: auto;
}

.universal-plot svg text {
  fill: #263d36;
  font-size: 14px;
}

.universal-plot polyline {
  fill: none;
  stroke: var(--series-color, #125943);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.universal-plot circle {
  fill: var(--series-color, #125943);
}

.universal-grid {
  fill: none;
  stroke: #c8d8d4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.universal-notice {
  padding: .55rem .65rem;
  border: 1px solid #c59429;
  border-radius: .5rem;
  color: #5f3c00;
  background: #fffae8;
  font-size: .87rem;
}

.universal-values > section + section {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid #dfe8e5;
}

.universal-values p {
  margin: .3rem 0;
  font-size: .85rem;
}

.universal-values table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.universal-values th,
.universal-values td {
  padding: .2rem .3rem;
  border-bottom: 1px solid #e6edeb;
  font-size: .86rem;
}

@media (max-width: 1070px) {
  .universal-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 580px) {
  .universal-controls,
  .universal-split {
    grid-template-columns: minmax(0, 1fr);
  }
}