/* Charts (SVG, from js/core/charts.js) and the CSS-grid heatmap and calendar (js/core/grids.js). */

.chart-figure { position: relative; width: 100%; margin: 0; border-radius: var(--radius-control); }
.chart-figure:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent); }
.chart-holder { min-height: 120px; }
.chart { display: block; overflow: visible; }
.chart text { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-slot .chart-cursor { opacity: 0; }
.chart-slot.is-active .chart-cursor { opacity: 1; }
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--raised);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip-label { margin-bottom: 4px; color: var(--muted); }
.chart-empty { padding: 32px 0; text-align: center; }

/* First-mount draw-in (600 ms): bars grow from the zero line, the line is wiped in from the left. Transform only. */
.is-drawing .chart-bar { transform-box: fill-box; transform-origin: bottom; animation: grow-y var(--duration-slower) var(--ease-out) backwards; }
.is-drawing .chart-bar.from-top { transform-origin: top; }
.is-drawing .chart-bar.from-left { transform-origin: left; animation-name: grow-x; }
.is-drawing .chart-bar.from-right { transform-origin: right; animation-name: grow-x; }
.is-drawing .draw-wipe { transform-box: fill-box; transform-origin: left; animation: grow-x var(--duration-slower) var(--ease-out) backwards; }

/* Weekday × two-hour heatmap: five opacity steps per colour; empty = surface; thin cells hatched and dimmed. */
.hm-scroll { position: relative; overflow-x: auto; }
.hm-grid { display: grid; min-width: 640px; gap: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.hm-row { display: grid; grid-template-columns: 40px repeat(12, minmax(0, 1fr)); gap: 4px; }
.hm-head { color: var(--muted); text-align: center; }
.hm-day { padding-right: 4px; text-align: left; align-self: center; }
.hm-cell {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-badge);
  color: var(--fg);
}
.hm-cell.is-thin {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 6px);
  color: var(--muted);
  opacity: 0.6;
}
.hm-empty { background: var(--surface); }
/* First mount: a diagonal fade sweep, delays from SJ.motion.revealDelay (≤ 400 ms) so it ends within 600 ms. */
.hm-reveal { animation: fade-in var(--duration-base) var(--ease-out) backwards; animation-delay: var(--delay, 0ms); }
.hm-p0 { background: rgb(47 208 123 / 0.1); }
.hm-p1 { background: rgb(47 208 123 / 0.2); }
.hm-p2 { background: rgb(47 208 123 / 0.35); }
.hm-p3 { background: rgb(47 208 123 / 0.5); }
.hm-p4 { background: rgb(47 208 123 / 0.7); }
.hm-l0 { background: rgb(240 82 91 / 0.1); }
.hm-l1 { background: rgb(240 82 91 / 0.2); }
.hm-l2 { background: rgb(240 82 91 / 0.35); }
.hm-l3 { background: rgb(240 82 91 / 0.5); }
.hm-l4 { background: rgb(240 82 91 / 0.7); }
.hm-n0 { background: rgb(154 163 174 / 0.1); }
.hm-n1 { background: rgb(154 163 174 / 0.2); }
.hm-n2 { background: rgb(154 163 174 / 0.35); }
.hm-n3 { background: rgb(154 163 174 / 0.5); }
.hm-n4 { background: rgb(154 163 174 / 0.7); }

/* Calendar month grid (from 768 px) and week list (phones). Tint by |net P&L| in five steps, border /25. */
.cal-desktop { display: none; }
.cal-grid { display: flex; flex-direction: column; gap: 4px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekday { padding: 0 8px; color: var(--muted); }
.cal-slot { min-width: 0; }
.cal-cell {
  display: flex;
  width: 100%;
  height: 104px;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out);
}
a.cal-cell:hover,
button.cal-cell:hover { border-color: var(--line-strong); }
.cal-cell[aria-current="date"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-pad { border-color: rgb(34 38 45 / 0.5); background: none; color: var(--muted); opacity: 0.4; }
.cal-cell-top { display: flex; align-items: center; justify-content: space-between; }
.cal-today { padding: 0 4px; border-radius: var(--radius-badge); background: var(--accent); color: var(--on-accent); }
.cal-truncate { overflow: hidden; text-overflow: ellipsis; }
.cal-cell-foot { margin-top: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-profit { border-color: rgb(47 208 123 / 0.25); }
.cal-loss { border-color: rgb(240 82 91 / 0.25); }
.cal-breakeven { border-color: rgb(154 163 174 / 0.25); background: rgb(154 163 174 / 0.1); }
.cal-profit-0 { background: rgb(47 208 123 / 0.08); }
.cal-profit-1 { background: rgb(47 208 123 / 0.15); }
.cal-profit-2 { background: rgb(47 208 123 / 0.25); }
.cal-profit-3 { background: rgb(47 208 123 / 0.35); }
.cal-profit-4 { background: rgb(47 208 123 / 0.5); }
.cal-loss-0 { background: rgb(240 82 91 / 0.08); }
.cal-loss-1 { background: rgb(240 82 91 / 0.15); }
.cal-loss-2 { background: rgb(240 82 91 / 0.25); }
.cal-loss-3 { background: rgb(240 82 91 / 0.35); }
.cal-loss-4 { background: rgb(240 82 91 / 0.5); }
.cal-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.cal-totals li { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; line-height: 18px; }
.cal-weeks { display: flex; flex-direction: column; gap: 16px; }
.cal-week-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; color: var(--muted); }
.cal-week-head .pnl { text-transform: none; }
.cal-none { padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius-control); color: var(--muted); }
.cal-day-list { display: flex; flex-direction: column; gap: 4px; }
.cal-day {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  text-align: left;
}
.cal-day-name { width: 80px; color: var(--fg); }
.cal-day-side { display: flex; align-items: baseline; gap: 12px; margin-left: auto; }
@media (min-width: 768px) {
  .cal-desktop { display: block; }
  .cal-weeks { display: none; }
}