/* Analysis › Records (topics/records.mjs): the small picture at the top of
   each group of records. Green / red is markets, indigo (--chart-added) is
   money added, account colours come from the palette (as SVG attributes),
   greys are neutral. Tokens only; entry motion is JS (charts/common.mjs) and
   does nothing under reduced motion. */

.rec-viz {
  /* labels sit on the page (black), not on a grouped cell */
  --chart-halo: var(--bg);
  margin: 4px var(--margin) 14px;
}
.rec-cap {
  margin: 0 0 6px;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--label-2);
}
.rec-viz svg.viz { width: 100%; overflow: visible; }
.rec-viz .viz text {
  font: var(--t-caption1); letter-spacing: var(--tr-caption1);
  font-variant-numeric: tabular-nums;
  fill: var(--label-2);
}
.rec-viz .viz text.rec-lbl {
  paint-order: stroke;
  stroke: var(--chart-halo); stroke-width: 3px; stroke-linejoin: round;
}
.rec-viz .viz text.is-pos, .rec-viz .viz text.is-neg, .rec-viz .viz text.is-inv { fill: var(--dir); }
.rec-viz .viz text.rec-strong, .rec-viz .viz text.rec-name { fill: var(--label); }
.rec-viz .viz text.rec-axis { fill: var(--label-2); }

/* marks */
.rec-bar, .rec-sq, .rec-piece { fill: var(--dir, var(--label-3)); }
.rec-bar.is-dim { fill-opacity: 0.38; }
.rec-sq.rec-off { fill: var(--fill); }
.rec-up { transform-box: fill-box; transform-origin: 50% 100%; }
.rec-dn { transform-box: fill-box; transform-origin: 50% 0; }
.rec-right { transform-box: fill-box; transform-origin: 0 50%; }
.rec-left { transform-box: fill-box; transform-origin: 100% 50%; }
.rec-sq, .rec-mile, .rec-mile-next { transform-box: fill-box; transform-origin: 50% 50%; }
.rec-zero { stroke: var(--label-4); stroke-width: 1px; }
.rec-zero.is-dashed { stroke: var(--label-3); stroke-dasharray: 2 3; }
.rec-avg { stroke: var(--label-2); stroke-width: 1px; stroke-dasharray: 3 3; }
.rec-run { fill: none; stroke: var(--label); stroke-width: 1.5px; }
.rec-hit { fill: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* peak and dip */
.rec-line { fill: none; stroke: var(--label-2); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.rec-ddband { fill: var(--neg); fill-opacity: 0.14; }
.rec-peak { fill: var(--label); stroke: var(--chart-halo); stroke-width: 2px; }
.rec-trough { fill: var(--neg); stroke: var(--chart-halo); stroke-width: 2px; }

/* years: partial years faded */
.rec-yrow.is-partial .rec-piece { fill-opacity: 0.45; }

/* milestones */
.rec-axisline { stroke: var(--label-3); stroke-width: 1.5px; stroke-linecap: round; }
.rec-axisdash { stroke: var(--label-3); stroke-width: 1.5px; stroke-dasharray: 3 3; }
.rec-mile { fill: var(--label); stroke: var(--chart-halo); stroke-width: 2px; }
.rec-mile-next { fill: var(--chart-halo); stroke: var(--label-2); stroke-width: 1.5px; }

/* accounts: colours come from the palette as attributes */
.rec-chip:not([fill]), .rec-best:not([fill]) { fill: var(--label-3); }
.rec-range { stroke-width: 6px; stroke-linecap: round; stroke-opacity: 0.35; }
.rec-range:not([stroke]) { stroke: var(--label-3); }
.rec-worst { fill: var(--chart-halo); stroke-width: 1.5px; }
.rec-worst:not([stroke]) { stroke: var(--label-3); }
.rec-best { stroke: var(--chart-halo); stroke-width: 1.5px; }