/* ── chart unit: the swap machine's body with a wider LCD, a 3-position timeframe dial and a canvas ── */
.chart-unit { width: min(580px, calc(100vw - 24px)); }
.chart-tf {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; margin-bottom: 12px;
  background: var(--well); border: 2px solid var(--ink); border-radius: 3px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25);
}
.chart-tf::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 2px;
  background: var(--glass); border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 #fff;
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.chart-tf:has([data-tf="3600"].on)::before { transform: translateX(100%); }
.chart-tf:has([data-tf="86400"].on)::before { transform: translateX(200%); }
.chart-tf button {
  position: relative; z-index: 1; height: 28px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #5d605a;
}
.chart-tf button.on { color: var(--ink); }
.chart-tf button.on::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--lit); box-shadow: 0 0 6px var(--lit);
}
.chart-big { min-height: 38px; }
.chart-big .swap-out { flex: none; }
.chart-chg { margin-left: auto; font-family: var(--pixel); font-size: 12px; letter-spacing: 0.06em; }
.chart-chg.up { color: var(--lit); text-shadow: 0 0 8px rgba(62, 207, 122, 0.45); }
.chart-chg.down { color: #e8703a; }
.chart-canvas { display: block; width: 100%; height: 220px; margin-top: 6px; cursor: crosshair; }
#chart-when { font-size: 10.5px; }
#chart .swap-fee { margin-bottom: 4px; }
@media (max-width: 480px) { .chart-canvas { height: 180px; } }