/* ==========================================================================
   Audio converter (and Video to MP3, which shares it)
   One file is the common case, so one file gets to be the subject of the page
   rather than a row in a list. And the result is something you can hear before
   you commit to saving it — for an audio tool that is the only real check.
   ========================================================================== */

/* ---------- the file, once there is one ---------- */

.ac-stage{
  display:flex;align-items:center;gap:14px;
  margin:0 20px 18px;padding:16px 18px;
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.ac-icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);color:var(--accent);
}
.ac-icon svg{width:22px;height:22px;}

.ac-info{flex:1;min-width:0;display:block;}
.ac-name{
  display:block;font-size:1rem;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ac-meta{
  display:block;margin-top:3px;
  font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);
}

/* ---------- the result ---------- */

.ac-result{
  margin:0 20px 18px;padding:18px;
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.ac-result-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;flex-wrap:wrap;
}
.ac-result-label{font-size:.95rem;color:var(--ink-1);font-weight:500;}
.ac-result-size{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);}

/* The player is the point of the block, so it gets the full width. Browsers
   style the control themselves; all this does is stop it being tiny. */
.ac-audio{
  display:block;width:100%;height:40px;margin-bottom:14px;
}

.ac-download{width:100%;padding:13px 20px;font-size:1rem;}
.ac-download svg{width:18px;height:18px;}

@media (min-width:620px){
  .ac-download{width:auto;min-width:240px;}
}