/* spectrum.css: styles for the Sound explorer page. Tokens come from styles/base.css. */

.card-title { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.3; }
.legend { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); max-width: 80ch; }
.empty { margin: 0; color: var(--muted); }
sub { line-height: 0; } /* keeps f0 from spreading the lines it sits in */

/* Controls (the status card is styled in styles/base.css) */
.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.or { color: var(--muted); font-size: 0.875rem; }
.button.primary[data-running="true"] { background: var(--surface); color: var(--bad); border-color: var(--bad); }
#fileInput:focus-visible + .button, .button.secondary:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Spectrum */
#spectrumCanvas { display: block; width: 100%; height: 300px; }

/* Notes and partials */
.results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note {
    width: 100%; font: inherit; color: var(--text); background: var(--surface); text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "label name freq" "label name cents" "strength strength strength";
    align-items: center; gap: 0 12px;
}
.note:hover { border-color: var(--accent); }
.note[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); background: var(--surface-2); }
.note-label { grid-area: label; font-size: 1.375rem; font-weight: 700; min-width: 3.5ch; }
.note-name { grid-area: name; color: var(--muted); }
.note-freq { grid-area: freq; font-weight: 600; text-align: right; }
.note-cents { grid-area: cents; font-size: 0.875rem; color: var(--muted); text-align: right; }
.note-strength { grid-area: strength; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.note[aria-pressed="true"] .note-strength { background: var(--border); }
.note-strength-fill { display: block; height: 100%; background: var(--accent); }
.note[data-faint="true"] :is(.note-label, .note-freq) { color: var(--muted); font-weight: 600; }
.note[data-faint="true"] .note-strength-fill { background: var(--muted); }
.faint-tag {
    display: inline-block; vertical-align: middle; margin-left: 8px; padding: 0 6px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
}

.table-wrap { overflow-x: auto; }
.partials { width: 100%; border-collapse: collapse; }
.partials th {
    text-align: left; font-size: 0.8125rem; color: var(--muted); font-weight: 600;
    padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.partials td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.partials .num { text-align: right; }
.partials .col-n { width: 64px; }
.partials .narrow-only { display: none; }
.partials tr[data-weak="true"] td { color: var(--muted); }
.weak-tag { font-size: 0.75rem; }
.source-note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); }
.source-note[data-precise="false"] { color: var(--warn); }
.empty-row td { color: var(--muted); text-align: center; padding: 24px 8px; white-space: normal; }
.partials-card[data-empty="true"] .legend { display: none; }

/* Explainer */
.explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.explain h3 { margin: 0 0 6px; font-size: 1rem; }
.explain p { margin: 0; color: var(--muted); }
.explain a { color: var(--accent); }

@media (max-width: 860px) {
    .results { grid-template-columns: minmax(0, 1fr); }
    .explain-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
    .card { padding: 16px; }
    .button.primary, .button.secondary { flex: 1 1 100%; }
    .or { display: none; }
    #spectrumCanvas { height: 220px; }
    .partials th, .partials td { padding: 8px 4px; }
    .partials td { font-size: 0.875rem; }
    .partials .wide-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .partials .narrow-only { display: inline; }
    .partials th { white-space: normal; vertical-align: bottom; }
    .partials .col-n { width: auto; }
    .weak-tag { display: none; } /* the grey row says it; the column stays narrow */
}