.usage-trend{box-sizing:border-box;max-width:100%;min-width:0;margin:0 0 24px;padding:20px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;color:#172033}.usage-trend h2{margin-top:0}.pu-warning{padding:10px 14px;background:#fff7d6;border:1px solid #e8ce6b;border-radius:8px;color:#654b0d}.pu-controls{display:flex;flex-wrap:wrap;gap:12px}.pu-controls label{display:grid;gap:5px;min-width:130px;font-weight:600}.pu-controls select{font:inherit;border:1px solid #94a3b8;border-radius:6px;padding:8px;background:#fff;color:#172033}.pu-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-top:18px}.pu-summary strong{font-size:1.25rem}.pu-note{color:#475569;font-size:.9rem;overflow-wrap:anywhere}.pu-legend{display:flex;flex-wrap:wrap;gap:14px;color:#1d4ed8;font-size:.88rem}.pu-cert-label{color:#a23770}.pu-missing-label{color:#64748b}.pu-scroll{max-width:100%;overflow-x:auto;margin:12px 0;overscroll-behavior-x:contain}.pu-chart{display:block;width:100%;min-width:540px;max-height:300px}.pu-chart text{font:12px system-ui;fill:#475569}.pu-axis{stroke:#94a3b8;stroke-width:1}.pu-practice{fill:#2563eb}.pu-certification{fill:#a23770}.pu-missing{fill:#e2e8f0;stroke:#64748b;stroke-dasharray:3 3}.pu-partial{fill:none;stroke:#334155;stroke-dasharray:3 3}.usage-trend table{border-collapse:collapse;width:100%;font-size:.9rem;white-space:nowrap}.usage-trend caption{text-align:left;padding-bottom:8px;color:#475569}.usage-trend th,.usage-trend td{padding:9px 12px;text-align:left;border-bottom:1px solid #e2e8f0}.usage-trend thead{background:#f1f5f9}.pu-state{padding:14px;background:#f1f5f9;border-radius:8px}.pu-state button{margin-left:12px;padding:7px 12px;cursor:pointer}.usage-trend :focus-visible{outline:3px solid #2563eb;outline-offset:3px}@media(max-width:480px){.usage-trend{padding:12px}.pu-controls{gap:8px}.pu-controls label{min-width:0;flex:1 1 120px}.pu-controls select{width:100%;max-width:100%}.pu-summary strong{font-size:1.1rem}}

.pu-extra-controls { flex: 1 1 100%; min-width: 0; } .pu-extra-controls > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }