/*
 * Mobile layout fixes, phase 2. Loaded AFTER design/css/mobile.css so these win.
 *
 * The problem this solves: on a phone many pages (profiles, the friends-only
 * block page, message and forum pages) rendered with their content jammed into
 * a narrow left strip and the rest of the screen empty background -- what looks
 * like a blank / "white" page. Cause: the legacy nested LAYOUT tables size to
 * their widest content (an ad slot, a member image, a long token), so the shell
 * grows to ~1050px even on a 390px screen; overflow-x:hidden then clips it and
 * only the left ~390px shows.
 *
 * Fix: force the layout tables to table-layout:fixed + width:100%, so width:100%
 * actually binds and a wide cell wraps/clips instead of dragging the whole page
 * wide. Data tables (.forumline) are excluded and keep their own scroll box.
 */
@media screen and (max-width: 820px) {

    /* The shell + every layout table inside the body cell obey the viewport,
       never their content. table-layout:fixed is the key: without it a table
       with one 728px ad or a long word ignores width:100% and grows. */
    #outer,
    #top,
    #main table,
    #main table table,
    /* The shell nests an UNNAMED wrapper table between #outer and the #main
       body cell. It stayed table-layout:auto and grew to its content (~762px),
       dragging #main and the right edge -- delete buttons, status pills -- off
       a 360px screen. Catch every table that CONTAINS #main so the whole
       wrapper chain is pinned to the viewport. */
    table:has(#main) {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The body cell itself must not exceed the viewport. */
    #main {
        max-width: 100vw !important;
    }

    /* The top utility strip (LIVE CHAT | BOOKMARK US | Users | Issues | Admin |
       LOGOUT + the new-message badge and language picker). It is a single table
       row that never wraps, so on a phone it runs off the right edge and the
       last links (Admin, Logout) are unreachable. Break the row so the cells
       flow and wrap, centre them, and size the links up for a fingertip. */
    #topnav,
    #topnav tbody,
    #topnav tr {
        display: block !important;
        width: 100% !important;
    }
    #topnav td {
        display: inline-block !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        padding: 3px 2px !important;
    }
    #topnav {
        text-align: center !important;
        margin: 0 auto !important;
    }
    #topnav td,
    #topnav a {
        font-size: 10.5pt !important;   /* 7pt is unreadable on a phone */
    }
    #topnav a {
        padding: 4px 3px !important;    /* a real tap target */
    }

    /* The forum list / topic list DO fit at full width (a forum name + blurb),
       so let them obey the fit rule above rather than growing to max-content.
       The count columns squish but the page never strands content in a strip.
       (Genuinely columnar data still scrolls via the base layer's .forumline.) */
    #main table.forum-1,
    #main table.forum-2 {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* With the tables pinned to 100%, their cells fill the phone width; wide
       content inside them must wrap or scale rather than push out. */
    #main td,
    #main th {
        max-width: 100% !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    #main img,
    #main embed,
    #main iframe,
    #main object,
    #main video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Ad slots (the right banner is show-ads place=4) frequently carry a fixed
       728/468px creative; cap it so it can't set the page width. */
    #main [id*="ad"] img,
    #main [class*="ad"] img,
    #main a > img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- Tab bars (profile TabbedMenu + account menu) --------------------
     * These menus are a single non-wrapping table row of .item / .item2 tabs.
     * The class sits on the <td> in the profile TabbedMenu, but on a <div>
     * INSIDE a classless <td> in the account menu (MAIN / MY PAGE / SETTINGS /
     * MESSAGES / ...). table-layout:fixed squished all of them into 360px so the
     * labels OVERLAPPED (profile) or STACKED one letter per line (account).
     * Take the whole menu out of table layout -- keyed on any table that
     * CONTAINS an .item -- so the tabs flow and WRAP as separate tappable pills.
     */
    #main table:has(.item),
    #main table:has(.item) > tbody,
    #main table:has(.item) > tbody > tr {
        display: block !important;
        width: 100% !important;
        text-align: center;
    }
    #main table:has(.item) td {
        display: inline-block !important;
        width: auto !important;
        vertical-align: middle;
    }
    /* The tab itself (a .item td, or a .item div inside a td) becomes a pill.
       white-space:nowrap keeps each label on ONE line (no letter-stacking). */
    #main .item,
    #main .item2 {
        display: inline-block !important;
        width: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        margin: 3px !important;
        padding: 8px 12px !important;
        border-radius: 6px;
    }
    /* The fixed 100px spacer cell is pointless once the tabs wrap. */
    #main td.item3 > div[style*="100px"],
    #main td.item3 > div[style*="width:100px"],
    #main td.item3 > div[style*="width: 100px"] { display: none !important; }

    /* The search box that sits under the profile tabs. */
    #main td.item3 input[type="text"],
    #main .border13 input[type="text"] { width: 100% !important; box-sizing: border-box; }

    /* ---- Issue Tracker (custom /issues pages) ----------------------------
     * Built with max-width:760px flex containers; keep the flex rows wrapping
     * and the avatars/pills from forcing overflow. */
    a[href*="/issues/"] { min-width: 0; }
}

/* A very narrow phone: tighten the two-column profile so the panels stack
   comfortably rather than sitting at 45% / 55%. */
@media screen and (max-width: 620px) {
    #main td[style*="width:45%"],
    #main td[style*="width: 45%"],
    #main td[style*="width:55%"],
    #main td[style*="width: 55%"],
    #main td[style*="width:76%"],
    #main td[style*="width: 76%"],
    #main td[style*="width:23%"],
    #main td[style*="width: 23%"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}