.latitude-account-chart {
  --chart-border: rgba(24, 61, 61, .14);
  --chart-ink: #173735;
  --chart-muted: #596f6b;
  --chart-background: #fffdf8;
  color: var(--chart-ink);
  background: var(--chart-background);
  border: 1px solid var(--chart-border);
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
}

.chart-header { margin-bottom: 16px; }
.chart-heading { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.chart-subtitle { margin: 4px 0 0; color: var(--chart-muted); font-size: 13px; }

.chart-body { position: relative; }
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 300px;
  border-radius: 10px;
  outline: none;
  touch-action: pan-y;
}
.chart-svg:focus-visible { outline: 3px solid rgba(45, 113, 101, .34); outline-offset: 4px; }
.gridline { stroke: rgba(24, 61, 61, .1); stroke-width: 1; }
.axis-label { fill: #5c716c; font-size: 11px; font-weight: 700; }
.account-layer { opacity: .92; transition: opacity .16s ease; }
.layer-savings { fill: #2d7165; stroke: #174b43; }
.layer-taxable { fill: #5c87a4; stroke: #345b74; }
.layer-traditional { fill: #eabf69; stroke: #946d23; }
.layer-roth { fill: #e46f51; stroke: #9c3420; }
.total-outline { stroke: #173735; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.milestone-line { stroke: rgba(24, 61, 61, .56); stroke-width: 1.5; stroke-dasharray: 5 5; }
.milestone-label { fill: #2c4743; font-size: 10px; font-weight: 800; }
.failure-line { stroke: #b3261e; stroke-width: 2.5; }
.focus-marker { fill: white; stroke: #173735; stroke-width: 2; opacity: 0; }
.chart-svg:focus .focus-marker,
.chart-svg:hover .focus-marker,
.chart-svg:focus-visible .focus-marker,
.chart-pointer-active .focus-marker { opacity: 1; }

.chart-details {
  min-height: 74px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(24, 61, 61, .12);
  border-radius: 11px;
  background: rgba(234, 238, 233, .55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  font-size: 12px;
}
.selected-age { color: #173735; font-size: 13px; }
.detail-row { color: var(--chart-muted); font-weight: 700; }

.chart-legend { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.legend-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(24, 61, 61, .16);
  border-radius: 999px;
  padding: 6px 11px;
  background: white;
  color: var(--chart-ink);
  font-size: 12px;
  font-weight: 750;
}
.legend-button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--account-color);
}
.legend-button:hover { border-color: rgba(45, 113, 101, .45); background: #f7faf7; }
.legend-button:focus-visible { outline: 3px solid rgba(45, 113, 101, .3); outline-offset: 2px; }
.legend-button[aria-pressed="true"] { background: #eef1ed; color: #66766f; }

.chart-summary {
  margin: 14px 0 0;
  color: #526760;
  font-size: 12px;
  line-height: 1.55;
}

.latitude-account-chart-empty {
  display: grid;
  place-items: center;
  min-height: 250px;
  background: #fffdf8;
}
.chart-empty-card {
  max-width: 520px;
  padding: 24px;
  border: 1px dashed rgba(24, 61, 61, .28);
  border-radius: 15px;
  color: #33504b;
  font-weight: 800;
  text-align: center;
}
.chart-empty-message { margin: 7px 0 0; color: #64786f; font-weight: 500; }

.latitude-account-chart.mute-savings .layer-savings,
.latitude-account-chart.mute-taxable .layer-taxable,
.latitude-account-chart.mute-traditional .layer-traditional,
.latitude-account-chart.mute-roth .layer-roth { opacity: .12; }

.latitude-account-chart.focus-savings:not(.mute-savings) .account-layer:not(.layer-savings),
.latitude-account-chart.focus-taxable:not(.mute-taxable) .account-layer:not(.layer-taxable),
.latitude-account-chart.focus-traditional:not(.mute-traditional) .account-layer:not(.layer-traditional),
.latitude-account-chart.focus-roth:not(.mute-roth) .account-layer:not(.layer-roth) { opacity: .3; }

@media (max-width: 640px) {
  .latitude-account-chart { padding: 16px; border-radius: 14px; }
  .chart-svg { min-height: 240px; }
  .chart-details { align-content: flex-start; }
  .detail-row { flex: 1 1 100%; }
}

@media print {
  .latitude-account-chart {
    --chart-background: white;
    border-color: #84948d;
    box-shadow: none;
    break-inside: avoid;
    padding: 0;
  }
  .chart-header, .chart-details, .chart-legend { display: none; }
  .chart-summary { color: #222; font-size: 10pt; }
  .chart-svg { min-height: 320px; }
  .account-layer, .total-outline, .milestone-line, .failure-line {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}