@import url('/bpm-finder.css');

/* ---------------------------------------------------------------- tool card
   bpm-finder.css already provides .upload-card / .drop-zone / .file-input /
   .primary-button / .secondary-button / .status / .selected-file, so this file
   only adds what is specific to a converter that returns a downloadable file. */

/* ------------------------------------------------------- first-screen budget
   Upload, Convert and Download have to be reachable without scrolling. On this
   page they are not alone in the hero: a 15-link nav, a two-line h1 and a
   subtitle come first, and the tool card itself is tall (drop zone, file line,
   two selects, buttons, progress, four readings, piano roll).

   Measured before this block (tests/probe-mp3-to-midi-layout.cjs), convert
   button bottom vs the fold: 1360x900 +2.6px, 1366x768 +134.6px, 390x844 +94.8px.

   Every rule below is page-scoped on purpose. bpm-finder.css is shared with
   bpm-finder, key-finder, chord-finder, pitch-shifter and the instrument tuners,
   so it must not be edited to make this one page fit. */
.hero { padding-top: .5rem; }
.finder .subtitle { margin-bottom: 1rem; }
.upload-card { padding: clamp(1rem, 3vw, 1.1rem); }
.selected-file { margin-top: .5rem; }
.actions { margin-top: .5rem; }

/* The shared h1 scale is clamp(2.3rem, 8vw, 5.2rem). At 8vw this title wraps to
   two lines on a desktop and to two lines on a phone, costing 166px of the first
   screen. Capping it to one line is the single biggest saving available and is
   what puts the tool above the fold on a phone. The h1 text itself is untouched. */
.finder h1 { font-size: clamp(1.9rem, 6.5vw, 4rem); }

/* The drop zone is content-sized, so min-height does nothing here; the padding
   and the margins inside it are what set its height. */
.drop-zone { min-height: 8rem; padding: 1.1rem; }
.upload-icon { width: 2.7rem; height: 2.7rem; margin-bottom: .45rem; }
.drop-copy { margin: .2rem 0 .55rem; }

.opt-row { display: grid; gap: .6rem; margin-top: .5rem; text-align: left; }
@media (min-width: 560px) { .opt-row { grid-template-columns: 1fr 1fr; } }
.opt-row label { display: grid; gap: .35rem; }
.opt-row .opt-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.opt-row select {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .7rem;
  background: #0b1118; color: var(--text); font: inherit; font-weight: 600;
}

/* progress */
.bar { height: .5rem; margin: 1rem 0 0; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--lime)); transition: width 160ms ease; }

/* the one hint that appears after a conversion, above the numbers */
.notice { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid rgba(255,157,147,.45);
  border-radius: .8rem; background: rgba(255,157,147,.08); color: var(--text);
  font-size: .9rem; text-align: left; }
.notice strong { color: var(--danger); }
.notice[hidden] { display: none; }

/* result numbers */
.mp-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin-top: .9rem; }
@media (min-width: 620px) { .mp-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mp-cell { padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .8rem;
  background: rgba(255,255,255,.025); text-align: left; }
.mp-cell b { display: block; color: var(--muted); font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
.mp-cell span { display: block; color: var(--lime); font-size: 1.35rem; font-weight: 850;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; }
.mp-cell small { display: block; margin-top: .2rem; color: var(--muted); font-size: .74rem; }

/* piano roll */
.roll-wrap { margin-top: .9rem; border: 1px solid var(--line); border-radius: .8rem;
  background: #0b1118; overflow: hidden; }
canvas#roll { display: block; width: 100%; height: 150px; }

/* ------------------------------------------------------- scope, under tool
   Sits immediately below the upload card, inside the first screen. */
.scope { margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(200,255,69,.28);
  border-radius: 1.1rem; background: rgba(200,255,69,.045); text-align: left; }
.scope h2 { margin: 0 0 .55rem; color: var(--lime); font-size: .74rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; }
.scope ul { margin: 0; padding-left: 1.05rem; }
.scope li { margin: .4rem 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.scope li strong { color: var(--text); }
.scope li.scope-privacy { color: var(--text); }
.scope li.scope-privacy strong { color: var(--cyan); }

/* long link rows inside prose panels */
.panel p + p { margin-top: .7rem; }