@page {
  size: letter;
  margin: 0.45in;
}

:root {
  background: #fff;
}

body:has(#dashboard:not([hidden]) #overview:not([hidden])) {
  color-scheme: light;
  --page: #fff;
  --surface: #fff;
  --ink: #1f1a24;
  --ink-2: #49424f;
  --muted: #625a69;
  --hair: #ded9e3;
  --axis: #b5aebf;
  --wash: #f1eef4;
  --ghost: #dcd8e3;
  --c-sales: #5b48d9;
  --c-blue: #2a78d6;
  --c-orange: #c45125;
  --c-aqua: #147852;
  --c-grey: #77717e;
  --c-cocoa: #7b5646;
  --up: #006300;
  --down: #b42318;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

body > .bar {
  padding: 0 0 8px;
}

.bar .account,
#overview .presets,
#overview .sales-actions,
#overview .brushbox,
#overview .tgl,
#tip {
  display: none;
}

main,
#overview {
  max-width: none;
  padding: 0;
}

#overview .controls {
  display: block;
  padding: 0;
}

#overview h1 {
  color: var(--ink);
}

#overview #print-details {
  display: block;
  margin: 12px 0 4px;
}

.hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 16px 0;
  break-inside: avoid;
}

.hero-fig {
  font-size: 52px;
}

.tiles {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  break-inside: avoid;
}

.tile {
  padding: 8px;
}

.tile svg {
  max-width: 100%;
}

.grid {
  display: block;
  margin-top: 12px;
}

.card {
  display: block;
  padding: 12px;
  margin-bottom: 12px;
  break-inside: avoid;
}

.card:has(.tw) {
  break-inside: auto;
  overflow: visible;
}

.card-h {
  break-after: avoid;
}

.chart svg {
  width: 100%;
  height: auto;
}

.tw,
.mini {
  overflow: visible;
  max-height: none;
}

thead th {
  position: static;
}

tr {
  break-inside: avoid;
}

.mini th:nth-child(3),
.mini td:nth-child(3) {
  display: table-cell;
}

.stats {
  margin: 8px -12px -12px;
}