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

/* The WhatsApp voice note page (opus-to-mp3.html): the encoding bar under the Save button,
   and the guide to getting a note out of WhatsApp, one device at a time. Without
   JavaScript all three devices show, one under the other, each with its own heading. */
/* The converter lines up with the drop box above it and the check's card below it. */
#convert { width:min(100%,700px); }
/* A WhatsApp name like PTT-20261015-WA0003.opus has few break points; wrap anywhere. */
#convert-file { margin:4px 0 0; overflow-wrap:anywhere; }
/* The heading takes focus when a note opens, so a screen reader starts there; the ring
   shows only for a keyboard visitor, as on the try's own heading (landing.css). */
#convert-title:focus { outline:none; }
#convert-title:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.convert-progress { margin-top:14px; }
.note-guide { max-width:760px; }
.device-switch { margin-bottom:12px; }
/* Room between devices only when more than one shows; the switch shows just one. */
.device-steps:not([hidden]) ~ .device-steps { margin-top:44px; }
.device-title { margin:0 0 6px; font-size:21px; line-height:1.2; font-weight:600; letter-spacing:-.012em; }
@media (max-width:700px) { .device-title { font-size:20px; } }