/* LUFS / True-Peak meter — styles on top of key-bpm.css (hero, drop zone, stat cards, FAQ). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lm-error { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #E07A6B55; border-radius: var(--radius); color: #E8A59A; background: #E07A6B14; font-size: 0.95rem; }
.lm-notice { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.lm-busy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.lm-busy p { margin: 0 0 14px; color: var(--ink-soft); }
.lm-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.lm-bar i { display: block; height: 100%; width: 4%; background: var(--ink); transition: width 0.2s linear; }

.lm-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--ink-soft); }
.lm-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #5BD6A0; }
.lm-chip--warn i { background: #E8C15A; } .lm-chip--bad i { background: #E07A6B; }
.lm-tpch { margin: 8px 0 0; text-align: center; font-size: 0.8rem; color: var(--ink-soft); min-height: 1em; }
.lm-dual { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; min-height: 44px; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; }

.lm-player { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.lm-play { width: auto; height: 44px; border-radius: 999px; padding: 0 22px; font: inherit; font-weight: 600; }
.lm-select { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; padding: 0 16px; }

.lm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0 0; }
.lm-h { font-size: 1rem; margin: 0 0 14px; letter-spacing: 0; }
#lmGraph { display: block; width: 100%; height: 170px; }

.lm-plats { list-style: none; margin: 0; padding: 0; }
.lm-plat { display: grid; grid-template-columns: 1.5fr 0.8fr 1.4fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.lm-plat:first-child { border-top: 0; }
.lm-plat__who { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lm-plat__target { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lm-plat__change { font-variant-numeric: tabular-nums; }
.lm-plat__change small { display: block; color: #E8C15A; font-size: 0.78rem; margin-top: 2px; }
.lm-plat--down .lm-plat__change { color: var(--ink); } .lm-plat--even .lm-plat__change { color: var(--ink-soft); }
.lm-tag { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-soft); }
.lm-tag--official { color: var(--ink); border-color: var(--ink-soft); }
.lm-fine { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 560px) { .lm-plat { grid-template-columns: 1fr 1fr; } .lm-plat__change { grid-column: 1 / -1; } }

.lm-more summary { cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; display: flex; align-items: center; }
.lm-more summary::-webkit-details-marker { display: none; }
.lm-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 16px 0 0; }
.lm-dl div { min-width: 0; } .lm-dl dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.lm-dl dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.lm-cta { margin: 18px 0 0; text-align: center; color: var(--ink-soft); }
.lm-cta a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lm-play:focus-visible, .lm-select:focus-visible, .lm-more summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.lm-plat__note { grid-column: 1 / -1; margin: -4px 0 0; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }