/* ==========================================================================
   RESPONSIVE  -  small-screen corrections for the account area and the
                  login / register / reset pages
   --------------------------------------------------------------------------
   Loaded from header.php after style.css and after the active skin, so it
   applies whichever theme is running. It is deliberately only layout: no
   colour, no type, nothing a skin would want to own.

   Everything here fixes something that actually broke on a phone. The
   comment against each block says what.
   ========================================================================== */

/* --------------------------------------------------------------- overflow
   One element wider than the viewport makes the whole page scroll sideways,
   and on a form that reads as "the site is broken". These are the usual
   culprits. */
img, video, iframe, embed, object, table, pre {
    max-width: 100%;
}

img { height: auto; }

/* Order refs, e-mail addresses and pasted URLs are single unbreakable words
   long enough to widen a card past the screen. */
.card-body, .form-container, .table td, .alert, .footer-widget p {
    overflow-wrap: break-word;
}

/* ------------------------------------------------------------- reCAPTCHA
   The checkbox widget is a fixed 302px iframe. Inside a card with 1.5rem of
   padding it no longer fits a 320-360px phone, and it pushed login, register
   and the reset form sideways. Scaling keeps it usable - Google supports it,
   and the origin keeps it flush left rather than drifting. */
.g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 400px) {
    .g-recaptcha > div {
        transform: scale(.87);
        transform-origin: 0 0;
    }
    .g-recaptcha { height: 68px; }
}

@media (max-width: 340px) {
    .g-recaptcha > div {
        transform: scale(.78);
    }
    .g-recaptcha { height: 61px; }
}

/* ------------------------------------------------------------ auth cards
   p-5 is 3rem a side: on a 360px phone that left ~250px of usable width for
   a 302px captcha and full-width inputs. The markup now asks for p-4 p-md-5;
   this catches any card that still says p-5 on its own. */
@media (max-width: 575.98px) {
    .register-card .card-body.p-5,
    .profile-card .card-body.p-5,
    .form-card .card-body.p-5 {
        padding: 1.5rem !important;
    }
}

/* --------------------------------------------------------- account navbar
   dash_nav.php puts the welcome line and the logout button in one d-flex.
   Collapsed on a phone that row stayed horizontal, so a long name plus two
   credit counts squeezed Logout down to a sliver. Below the expand point it
   becomes a stacked block. */
@media (max-width: 991.98px) {
    .dash-nav .dash-nav-user {
        flex-wrap: wrap;
        align-items: flex-start !important;
        gap: .6rem;
        width: 100%;
        padding-top: .75rem;
        margin-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .dash-nav .dash-nav-user .navbar-text {
        margin-right: 0 !important;
        white-space: normal;
        line-height: 1.5;
    }
}

/* ------------------------------------------------------------- step rail
   submit_pr.php's three-step indicator is a flex row. At 360px each step got
   about 100px, so "3. Write your release" wrapped to four lines and the rail
   was taller than the form it labels. */
@media (max-width: 767.98px) {
    .step-rail {
        flex-wrap: wrap;
        gap: 6px;
    }

    .step-rail div {
        flex: 1 1 100%;
        padding: 7px 10px;
        font-size: .8rem;
    }
}

/* ------------------------------------------------------- form action rows
   The submit funnel pairs a text link with a primary button in a
   justify-content-between row. On a phone the two collided and the button
   lost its padding. Wrapping puts the button on its own line and makes it
   full width, which is also the easier tap target. */
@media (max-width: 575.98px) {
    .form-container .d-flex.justify-content-between,
    .form-card .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .form-container .d-flex.justify-content-between > *,
    .form-card .d-flex.justify-content-between > * {
        min-width: 0;
    }

    .form-container .d-flex.justify-content-between > .btn,
    .form-container .d-flex.justify-content-between > form,
    .form-container .d-flex.justify-content-between > form > .btn,
    .form-card .d-flex.justify-content-between > .btn {
        width: 100%;
    }

    /* px-5 on a full-width button is wasted horizontal space. */
    .form-container .btn-lg.px-5,
    .form-card .btn-lg.px-5 {
        width: 100%;
        padding-inline: 1rem !important;
    }
}

/* ------------------------------------------------------------- pagination
   The dashboard paginates ten releases a page; an account with 200 of them
   renders 20 numbered links in a single non-wrapping row. */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    row-gap: 6px;
}

/* ------------------------------------------------------------ data tables
   The dashboard table has six columns and an action group. It stays in a
   .table-responsive and scrolls, but it should not collapse its columns to
   the point of one word per line first. */
@media (max-width: 767.98px) {
    .table-responsive > .table {
        min-width: 640px;
    }

    /* Two-line hint so a horizontal scroll does not look like clipping. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------- account header
   dashboard.php's title row is col-md-8 / col-md-4 text-md-end. Stacked on a
   phone the credit chips and the New Submission button ran together. */
@media (max-width: 767.98px) {
    .account-head {
        gap: .5rem;
    }

    .account-head .credit-chip {
        margin-right: .35rem;
    }

    .account-head .btn {
        width: 100%;
        margin-top: .5rem;
    }
}

/* ---------------------------------------------------------- editor / CKE
   CKEditor sets its own widths; without this the toolbar can force the card
   wider than the screen on the edit and compose forms. */
.ck.ck-editor {
    max-width: 100%;
}

.ck.ck-toolbar {
    flex-wrap: wrap !important;
}

/* -------------------------------------------------------- tap targets
   Anything below ~44px is hard to hit accurately. The account area is full
   of btn-sm action icons in table rows. */
@media (max-width: 767.98px) {
    .btn-sm {
        padding: .35rem .6rem;
        line-height: 1.4;
    }

    .btn-group > .btn-sm {
        padding-inline: .55rem;
    }
}

/* -------------------------------------------------------------- iOS zoom
   Safari zooms the page in when a focused input's font-size is under 16px,
   and never zooms back out. Every form in the account area was affected. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    textarea {
        font-size: 16px;
    }
}