/*
 * Small screens.
 *
 * The breakpoint has to match the one main.js watches, because the row width
 * the equalizer prints and the font size that has to fit it are two halves of
 * the same decision: 31 characters per row for the default theme, 63 for the
 * themes that write the lyrics inside the bars.
 *
 * Nearly everything here needs !important, and several rules have to name the
 * child elements as well: the base stylesheet pins font-size and line-height on
 * the universal selector, so a rule on a container alone leaves every span
 * inside it at 12px.
 */
@media (max-width: 767px) {
    body {
        padding-top: 15px;
    }

    /* 15px is what the grid's negative row margins expect; anything else and
       every row hangs over the edge of the viewport. */
    .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* A 12px line box on wrapped prose puts the second line on top of the
       first, which is only survivable at desktop widths where nothing wraps. */
    p,
    .text-center,
    footer,
    footer p {
        line-height: 1.45 !important;
    }

    /* Two stacked blocks, 54 characters at the widest, so 33 is as large as the
       font can go. Kept well under that: at full width the logo is 19 lines
       tall and eats half the screen before the player is even visible. */
    #mobileHeader {
        width: max-content;
        max-width: 100%;
        margin: 0 auto 16px;
        overflow-x: auto;
        font-size: calc((100vw - 30px) / 44) !important;
        line-height: 1.05 !important;
    }

    /* .controls sits straight inside a .row rather than in a column, so its own
       rows subtract a second 15px gutter and hang over the right edge. */
    .controls {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Stacked, so the controls no longer need a column carved out for them. */
    .eqRow {
        min-height: 0;
    }

    #controlButtons {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 16px;
    }

    .playPauseControl,
    .stopControl {
        position: static;
        margin: 0;
        padding: 8px 16px;
    }

    .big_icon,
    #btnPause,
    #btnPlay {
        width: auto;
    }

    /*
     * The divisor is the row width in characters times the advance of the
     * monospace font, measured at 0.6em: 31 * 0.6 rounds to 19. The cap keeps
     * the bars from turning into a handful of enormous dots on a wide phone;
     * past it the block simply centres in what is left.
     */
    #equalizer,
    #equalizer span {
        font-size: min(calc((100vw - 30px) / 19), 17px) !important;
        line-height: 1.2 !important;
    }

    #equalizer {
        position: static !important;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        overflow-x: auto;
    }

    /* 63 characters a row rather than 31, so the lyrics still read. Reachable
       by resizing a desktop window, since the theme buttons are hidden here. */
    #equalizer[data-theme="karaoke"],
    #equalizer[data-theme="karaoke"] span,
    #equalizer[data-theme="shining"],
    #equalizer[data-theme="shining"] span {
        font-size: min(calc((100vw - 30px) / 38), 12px) !important;
    }
}