@import url('./funnels.css');

/* The Suno check (suno-muffled.html). Everything comes from funnels.css except what this
   page alone has: the progress bar under the drop zone, the result card at the drop
   zone's width, and the frequency scale laid over the spectrogram. */
.suno-progress { width:min(100%,380px); }
.suno-progress progress { display:block; width:100%; height:4px; accent-color:var(--accent); }
.suno-result { width:min(100%,700px); }
.suno-result h2 { overflow-wrap:anywhere; text-wrap:pretty; }
#suno-verdict:focus { outline:none; }
#suno-verdict:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.suno-result p { margin:8px 0 0; }
.suno-result .quick-head p { margin:0; }
.suno-result .suno-reading { color:var(--snow); font-size:15px; }
.suno-member { margin-top:10px; }
.suno-member .more-link { margin-top:4px; color:var(--accent-glow); font-size:15px; }
.workflow-steps .more-link { margin-top:10px; }

/* The scale: every song is decoded at 48 kHz, so the picture always runs from 0 at the
   bottom to 24 kHz at the top, and the labels can sit at fixed heights. */
.suno-picture { position:relative; margin-top:14px; }
.suno-picture .tool-canvas { margin-top:0; }
.suno-scale { position:absolute; inset:0; pointer-events:none; }
.suno-scale span { position:absolute; left:8px; padding:1px 6px; border-radius:6px; background:#07080acc; color:var(--snow-2); font-size:12px; line-height:1.4; font-variant-numeric:tabular-nums; }
.suno-scale .at-24 { top:6px; }
.suno-scale .at-16 { top:calc(100% / 3); transform:translateY(-50%); }
.suno-scale .at-8 { top:calc(200% / 3); transform:translateY(-50%); }