/* Performance Summary output: page layout, the measure tree drawing and the weekly line chart. */
.perf-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); }
.perf-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Three tiles to a row in a narrow window (mockup 32 pin 18). */
@container main (width < 56rem) { .perf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perf-tiles-note { grid-column: span 2; }
.perf-breakdown .perf-label { min-width: 12.5rem; max-width: 20rem; }

/* Measure tree: tiles placed on a fixed canvas, scrolled sideways when the page is narrower. */
.perf-tree-scroll { overflow-x: auto; }
.perf-tree { position: relative; margin: 0 auto; }
/* The canvas (CANVAS in out-performance.js) is wider than its card in a 1280 px window; drawn a little smaller there
   it fits, and narrower still it scrolls in its own area. */
@container main (56rem <= width < 64rem) { .perf-tree { zoom: 0.9; } }
.perf-tree-links { position: absolute; inset: 0; }
.perf-tree-links path { stroke: var(--muted-foreground); fill: none; stroke-width: 1.2; opacity: 0.6; }
.perf-tree-links circle { fill: var(--background); stroke: var(--border); }
.perf-tree-links text { font-size: var(--text-label); font-weight: 700; fill: var(--muted-foreground); }
.perf-tree-slot { position: absolute; }
.perf-tree-box { height: 100%; padding: 0.5rem 0.75rem; }
.perf-tree-box .tile-label { color: var(--foreground); font-weight: 600; }
.perf-tree-box .tile-value { margin: 0; }
.perf-tree-top { background: var(--selected); border-color: color-mix(in oklab, var(--chart-current) 35%, transparent); }
.perf-tree-box .tile-sub dl > div, .perf-tree-pair > div { display: flex; justify-content: space-between; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.perf-tree-box .tile-sub dd:not(.up, .down) { color: var(--foreground); }
.perf-tree-bar { position: relative; display: block; height: 0.3125rem; margin-top: 0.25rem; border-radius: var(--radius-sm); background: var(--muted); }
.perf-tree-bar::after { content: ""; position: absolute; left: 50%; top: -0.125rem; height: 0.5625rem; border-left: 1px solid var(--muted-foreground); }
.perf-tree-bar > span { position: absolute; top: 0; height: 100%; border-radius: var(--radius-sm); width: calc(100% * var(--fraction)); }
.perf-tree-bar > [data-sign="positive"] { left: 50%; background: var(--chart-positive); }
.perf-tree-bar > [data-sign="negative"] { right: 50%; background: var(--chart-negative); }
.perf-tree-sums { background: var(--muted); }
.perf-tree-pair { border-top: 1px solid var(--border); padding-block: 0.25rem; font-size: var(--text-label); }
.perf-tree-pair > div:last-child { font-weight: 600; }
.perf-tree-footnote { margin-top: 0.5rem; color: var(--muted-foreground); font-size: var(--text-label); }

/* Weekly trend: the guide and the dots of a week show while its column is hovered or has keyboard focus. */
.perf-line { fill: none; stroke-width: 2; }
.perf-line-point { fill: var(--series); stroke: var(--series); stroke-width: 2; }
.perf-line-point[data-hollow] { fill: var(--background); }
.perf-line-guide line { stroke: var(--muted-foreground); stroke-dasharray: 3 3; }
.perf-line-guide circle { fill: var(--background); stroke-width: 2.5; }
.perf-line-mark:not(:hover, :focus-visible) .perf-line-guide { visibility: hidden; }
/* The tree as a table (MOD-04, mockup 32 state 6): each level below the top box is indented, so parents and their pairs
   read as in the tree. */
.perf-tree-table :is(.perf-tree-level-1, .perf-tree-level-2, .perf-tree-level-3) { padding-inline-start: calc(var(--table-cell-padding) + var(--level) * 1.25rem); }
.perf-tree-table .perf-tree-level-1 { --level: 1; }
.perf-tree-table .perf-tree-level-2 { --level: 2; }
.perf-tree-table .perf-tree-level-3 { --level: 3; }