/*
 * Mobile layer for MyBoomerPlace.  v2, 2026-08-25.
 *
 * v1 did not work, and it is worth saying why: it set `table { width: 100% }`
 * across the board. On this site the main navigation is an ELEVEN CELL row, so
 * that told eleven links to share 390px -- about 35px each. The member grid on
 * /browse/ is fourteen cells, the forum list is five. A single rule cannot
 * serve all of those, because they are not the same kind of table.
 *
 * This site uses tables for two different jobs:
 *
 *   LAYOUT   - a cell holding another table. These are the page's columns and
 *              they have to STACK on a phone.
 *   CONTENT  - a cell holding text or links. These should FLOW and wrap.
 *
 * `:has()` tells them apart, which is the whole trick here. Data tables that
 * genuinely need their columns -- the forum list -- keep them and scroll inside
 * their own box, because the PAGE must never scroll sideways.
 *
 * Everything is inside a media query: the desktop rendering is untouched, and
 * the port is measured against legacy page by page.
 */

@media screen and (max-width: 820px) {

    /*
     * overflow-x:hidden IS here now, deliberately, after Allen asked twice for
     * the sideways scroll to stop existing.
     *
     * It is a backstop, not the fix. The actual causes were found and fixed:
     * twelve gallery thumbnails in one row at width:33%, an 11-cell nav strip,
     * an 11-cell main menu, and a 482-character unbroken token. This only
     * catches the next one, on a twenty-year-old nested-table layout where
     * there will be a next one.
     *
     * It does not blind the tooling: tools/overflow.php measures the markup,
     * not the rendered scrollbar, so overflow is still detectable.
     */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /*
     * The 775px shell and its inner frames go fluid.
     *
     * width:100%, not width:auto. On a TABLE auto means shrink-to-fit, so the
     * shell ends up as wide as its content and the screen shows a band of
     * background down the right-hand side -- the gap visible in the phone
     * screenshots. 100% makes it fill the viewport instead.
     *
     * This is safe only because it names the shell. v1 set table{width:100%}
     * on every table and squeezed the 11-cell nav to ~35px per link.
     */
    #outer,
    #top,
    #bottom3,
    #outer2,
    #topleft,
    .wrap1, .wrap2, .wrap3, .wrap4, .wrap5 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---- LAYOUT cells: stack ------------------------------------------ */
    /*
     * A cell containing a table is a column of the page, wherever it sits.
     *
     * Scoping this to #outer/#top/#outer2 only caught the outermost frame. The
     * home page builds its columns in a table NESTED inside those, so the
     * right-hand rail -- Random Polls beside New Blogs -- stayed side by side
     * on a phone at about 180px each. The .forumline exception below keeps data
     * tables tabular.
     */
    td:has(> table),
    td:has(> div > table) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* A fixed-width rail is a column too. */
    td[style*="width:220px"],
    td[style*="width: 220px"],
    td[width="220"] {
        display: block !important;
        width: 100% !important;
    }

    /* The 2% spacer cell between columns is pointless once they stack. */
    td[style*="width:2%"] {
        display: none !important;
    }

    /* ---- CONTENT cells: flow ------------------------------------------ */
    /* The nav strip is an 11-cell row of plain cells directly inside #outer.
       Left as table cells they get 35px each; as inline-block they wrap onto
       as many lines as they need. */
    #outer > tbody > tr > td:not(:has(table)),
    #top > tbody > tr > td:not(:has(table)) {
        display: inline-block !important;
        width: auto !important;
        white-space: nowrap;
        padding: 6px 8px !important;
    }

    /* ---- DATA tables: keep the columns, scroll the box ----------------- */
    .forumline {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Its own cells must NOT be caught by the layout rule above. */
    .forumline td,
    .forumline th,
    .forumline td:has(> table) {
        display: table-cell !important;
        width: auto !important;
        white-space: normal;
    }

    /* ---- main menu: a real phone menu -----------------------------------
     *
     * The main menu is an 11-cell table row. Left alone the cells come out
     * around 35px wide, which is unreadable, and the row still will not fit.
     * Below 820px it collapses behind a MENU button and stacks.
     */
    #navtoggle {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border: 0;
        font: inherit;
        font-size: 15px;
        font-weight: bold;
        text-align: left;
        color: #fff;
        background: #54A4DE;          /* #outer2's own blue, so it reads as the nav */
        cursor: pointer;
    }

    #navtoggle::after {
        content: " \25BC";            /* a caret, no icon font to depend on */
        float: right;
    }

    #outer2.nav-open #navtoggle::after {
        content: " \25B2";
    }

    #mainnav {
        display: none;
    }

    #outer2.nav-open #mainnav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #outer2.nav-open #mainnav > tbody,
    #outer2.nav-open #mainnav > tbody > tr {
        display: block !important;
        width: 100% !important;
    }

    #outer2.nav-open #mainnav td.menu,
    #outer2.nav-open #mainnav > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 11px 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* The cells carry the link colour on the anchor, not the cell. */
    #outer2.nav-open #mainnav td a {
        display: block;
        width: 100%;
    }

    /* ---- header nav: a real bar -----------------------------------------
     *
     * LIVE CHAT | BOOKMARK US | LOGOUT is an 11-cell table row sitting ten
     * levels inside #outer. Left as a table it scrunches to ~35px per cell and
     * pushes the page sideways; simply unstacking it left a ragged line of tiny
     * text. Laid out as a flex row it becomes an evenly spaced bar with tap
     * targets, which is what it is on a phone.
     */
    #topnav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #topnav > tbody {
        display: block !important;
        width: 100% !important;
    }

    #topnav > tbody > tr {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        width: 100% !important;
    }

    /* The separator cells hold a bare "|", which is chrome for a single line
       and noise once the links become buttons. A cell with no link is one. */
    #topnav > tbody > tr > td:not(:has(a)) {
        display: none !important;
    }

    #topnav > tbody > tr > td {
        display: block !important;
        width: auto !important;
        flex: 1 1 auto;
        padding: 0 !important;
        text-align: center !important;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }

    #topnav > tbody > tr > td:last-child {
        border-right: 0;
    }

    #topnav td a {
        display: block;
        padding: 12px 10px;          /* a real tap target, not 7pt text */
        font-size: 12px;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* ---- forms ----------------------------------------------------------
     *
     * Legacy forms are label/field table rows: a right-aligned label cell at
     * 35% beside an input carrying size="40" (about 320px of intrinsic width).
     * On a 390px phone the pair cannot fit, so the label wraps to nothing and
     * the field runs off the edge.
     *
     * Controls go full width everywhere; the signup form, which is the worst of
     * them at 15 inputs and 6 selects, also stacks its label above its field.
     */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="file"],
    select,
    textarea {
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;             /* iOS zooms the page in below 16px */
    }

    #ajax_signup_form table,
    #ajax_signup_form tbody,
    #ajax_signup_form tr {
        display: block !important;
        width: 100% !important;
    }

    #ajax_signup_form td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 3px 0 !important;
        white-space: normal !important;
    }

    #ajax_signup_form input[type="text"],
    #ajax_signup_form input[type="password"],
    #ajax_signup_form select,
    #ajax_signup_form textarea {
        width: 100% !important;
    }

    /* ---- long tokens ---------------------------------------------------
     *
     * A single unbroken string sets a floor no phone can meet, and no width
     * attribute reveals it: /newsindex/ carries a 482-character token, and
     * member text is full of pasted URLs. Let them break instead of pushing the
     * whole page sideways.
     *
     * Scoped to text-bearing elements, not *, so table layout is unaffected.
     */
    td, div, span, p, a, li, blockquote {
        overflow-wrap: anywhere;
    }

    /* ---- media --------------------------------------------------------- */
    img {
        max-width: 100%;
        height: auto;
    }

    img[width] {
        max-width: 100% !important;
    }

    /* ---- type and targets ---------------------------------------------- */
    body, td, th, p, div, span, li {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    a {
        font-size: 15px !important;
    }

    /* 16px or iOS zooms the page in when a field is focused. */
    input[type="text"], input[type="password"], input[type="email"],
    textarea, select {
        font-size: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    input[type="submit"], input[type="button"], button {
        min-height: 40px;
        font-size: 15px !important;
    }

    /* A pasted url must not widen the page on its own. */
    td, div, p, li {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Small tablet / landscape phone: keep the fluid shell, ease the type back. */
@media screen and (min-width: 560px) and (max-width: 820px) {
    body, td, th, p, div, span, li, a {
        font-size: 14px !important;
    }
}