.vehicle-history-panel{
  border:1px solid var(--ink);
  background:var(--paper);
  margin:0 0 18px;
  padding:22px 26px 18px;
}
.vehicle-history-panel[hidden]{display:none}
.vehicle-history-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.vehicle-history-head small{display:block;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.14em;margin-bottom:5px}
.vehicle-history-head strong{display:block;font-size:19px;letter-spacing:-.025em}
.vehicle-history-head>b{font-size:12px;letter-spacing:.01em;text-align:right}
.vehicle-history-head>b.is-up{color:var(--green)}
.vehicle-history-head>b.is-down{color:var(--red)}
#vehicle-history-chart{display:block;width:100%;height:116px;overflow:visible}
#vehicle-history-chart .history-grid{stroke:var(--line);stroke-width:1}
#vehicle-history-chart .history-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#vehicle-history-chart .history-point{fill:var(--paper);stroke:var(--accent);stroke-width:3}
#vehicle-history-chart .history-point.is-current{fill:var(--accent);stroke:var(--ink)}
.vehicle-history-periods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:12px}
.vehicle-history-period{text-align:center;min-width:0}
.vehicle-history-period span,.vehicle-history-period strong,.vehicle-history-period small{display:block}
.vehicle-history-period span{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vehicle-history-period strong{font-size:16px;margin:4px 0 2px;white-space:nowrap}
.vehicle-history-period small{font-size:8px;color:var(--muted);line-height:1.35}
.vehicle-history-period.is-current strong{color:var(--accent)}
.vehicle-history-panel>p{font-size:8px;line-height:1.45;color:var(--muted);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:640px){
  .vehicle-history-panel{padding:18px 14px 15px}
  .vehicle-history-head{align-items:flex-start;flex-direction:column;gap:8px}
  .vehicle-history-head>b{text-align:left}
  #vehicle-history-chart{height:92px}
  .vehicle-history-periods{gap:5px}
  .vehicle-history-period strong{font-size:13px}
  .vehicle-history-period small{font-size:7px}
}