.pg-svg { display: block; width: 100%; height: auto; }
.pg-svg text, .pg-stack text { font-size: 11px; fill: var(--muted, #6b7280); }
.pg-svg .pg-strong { fill: var(--ink, #1f2328); font-weight: 600; }
.pg-svg .pg-value { fill: var(--ink, #1f2328); }
.pg-grid { stroke: var(--line, #e2ddd3); stroke-width: 1; }
.pg-axis { stroke: var(--muted, #6b7280); stroke-width: 1; }
.pg-threshold { stroke: var(--muted, #6b7280); stroke-width: 1; stroke-dasharray: 5 4; }

.pg-bar { fill: var(--accent, #2f5d8a); opacity: 0.5; }
.pg-bar.pg-today { opacity: 1; }

.pg-line { fill: none; stroke-width: 2; }
.pg-line.pg-pitch, .pg-pt.pg-pitch { stroke: var(--accent, #2f5d8a); }
.pg-line.pg-timing, .pg-pt.pg-timing { stroke: var(--warn, #b26a00); }
.pg-pt { stroke-width: 2; fill: var(--card, #fff); }

.pg-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.pg-latest { margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.pg-legend { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.pg-key::before { content: ''; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.4rem; vertical-align: -0.1rem; border-radius: 50%; border: 2px solid; }
.pg-key.pg-square::before { border-radius: 0; }
.pg-key.pg-pitch::before { border-color: var(--accent, #2f5d8a); }
.pg-key.pg-timing::before { border-color: var(--warn, #b26a00); }
.pg-key.pg-clean::before { background: var(--ok, #2e7d32); border-color: var(--ok, #2e7d32); border-radius: 0; }
.pg-key.pg-later::before { background: var(--accent, #2f5d8a); border-color: var(--accent, #2f5d8a); border-radius: 0; }
.pg-key.pg-open::before { background: var(--line, #e2ddd3); border-color: var(--line, #e2ddd3); border-radius: 0; }

.pg-facts { display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
.pg-facts dt { color: var(--muted, #6b7280); }
.pg-facts dd { margin: 0; }

.pg-units, .pg-songs, .pg-tempo-list { list-style: none; margin: 0; padding: 0; }
.pg-units { columns: 2; column-gap: 2rem; list-style: decimal; padding-left: 1.5rem; }
.pg-unit { break-inside: avoid; padding: 0.2rem 0; }
.pg-unit > span:first-child { margin-right: 0.5rem; }
.pg-unit.pg-current > span:first-child { font-weight: 600; }
.pg-unit.pg-locked { color: var(--muted, #6b7280); }
.pg-detail { display: block; font-size: 0.9rem; }

.pg-tag { align-self: flex-start; flex-shrink: 0; line-height: 1.4; font-size: 0.8rem; padding: 0.05rem 0.5rem; border: 1px solid var(--line, #e2ddd3); border-radius: 999px; color: var(--muted, #6b7280); white-space: nowrap; }
.pg-passed .pg-tag { color: var(--ok, #2e7d32); border-color: var(--ok, #2e7d32); }
.pg-current .pg-tag, .pg-open.pg-song .pg-tag { color: var(--accent, #2f5d8a); border-color: var(--accent, #2f5d8a); }

.pg-stack { display: block; width: 100%; max-width: 600px; height: 22px; margin-bottom: 0.5rem; }
.pg-clean { fill: var(--ok, #2e7d32); }
.pg-later { fill: var(--accent, #2f5d8a); }
rect.pg-open { fill: var(--line, #e2ddd3); }

.pg-tempo-row { display: grid; grid-template-columns: 16rem 300px 1fr; gap: 1rem; align-items: center; padding: 0.3rem 0; }
.pg-tempo-bar { width: 300px; height: 14px; }

.pg-level { margin-bottom: 1rem; }
.pg-reason { margin-bottom: 0.4rem; }
.pg-songs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem 1.5rem; }
.pg-song { display: flex; justify-content: space-between; gap: 0.5rem; }
.pg-song.pg-locked a { color: var(--muted, #6b7280); }

#pg-drill-table { max-width: 30rem; }