/* Image · Audio — project styles layered over washi.css.
   Only patterns the framework doesn't already cover live here. */

.container { max-width: 1000px; }

/* Standalone hints (washi only styles .field .hint) */
.hint { font-size: var(--fs-sm); color: var(--muted); }

/* Tabs — built on washi's .segmented; map the app's .tab-content toggle */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Upload drop zone */
.upload-area {
    border: var(--bw-strong) dashed var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}
.upload-area:hover { border-color: var(--accent); background: var(--paper-2); }
.upload-area.dragover { border-color: var(--accent); background: var(--paper-3); }
.upload-placeholder { align-items: center; }
.upload-placeholder svg { color: var(--accent); }
.upload-placeholder p { font-size: var(--fs-md); color: var(--ink); }

#imagePreview { max-width: 100%; max-height: 400px; border-radius: var(--r); }

/* Progress + loading */
.progress-area { text-align: center; padding: var(--sp-6); }
.progress-area > * + * { margin-top: var(--sp-4); }

.spinner {
    width: 44px; height: 44px; margin: 0 auto;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-bar {
    width: 100%; max-width: 400px; height: 8px; margin: 0 auto;
    background: var(--paper-3);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.progress-fill {
    height: 100%; width: 0%;
    background: var(--accent);
    transition: width var(--t);
}

/* Result + spectrogram */
.result-area { align-items: center; text-align: center; }
.result-area audio { width: 100%; max-width: 500px; }

#spectrogramCanvas {
    width: 100%; height: 500px;
    border: var(--bw-strong) solid var(--ink);
    border-radius: var(--r);
    background: #000;
}

.controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--paper-2);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-lg);
}
.controls input[type="range"] { width: 100%; accent-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}