/**
 * Paws of Fury — the phone.
 *
 * Loaded last on every page, and every rule in it lives inside a max-width
 * query. That is deliberate and it is the whole design: nothing here can
 * apply on a desktop, so the desktop layout is not merely unchanged by
 * inspection, it is unchangeable by this file.
 *
 * What it fixes is one failure and its consequences. A single element wider
 * than the screen widens the layout viewport, and from then on every "100%"
 * on the page measures against that wider box -- which is why the site read
 * as zoomed in and cut off on a phone rather than just cramped. The guards
 * below stop anything doing that, and the rest is room.
 *
 * Page-specific work still belongs in the page's own stylesheet. This is the
 * floor every page stands on.
 */

@media (max-width: 760px) {

    /* ----- Nothing gets to be wider than the screen -------------------- */

    body {
        max-width: 100%;
        /* On body rather than html: html would take sticky positioning down
           with it, and the topline and the dashboard nav both rely on it. */
        overflow-x: hidden;
    }

    img, svg, video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }

    /* The usual culprits: a pasted link, a Discord id, an RSN with no spaces
       in it. One of these is all it takes. */
    p, li, dd, dt, td, th, summary,
    .muted, .hint, .error, .cal-detail-body, .discord-msg {
        overflow-wrap: anywhere;
    }

    /* Wide by nature. These scroll inside themselves rather than taking the
       page sideways with them. */
    pre, table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* ----- Room ------------------------------------------------------- */

    /* A dialog on a phone is the screen. Floating it in the middle with
       padding either side spends most of the width on nothing. */
    dialog {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    /* The dashboard and post editor chrome. It is one flex row that never
       wrapped, so on a phone it simply ran off the side. */
    .topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
    }

    .topbar .nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .topbar .nav a { white-space: nowrap; }

    .topbar-right { flex-wrap: wrap; gap: 8px; }
    .topbar .guild-select { max-width: 100%; }

    /* The search on the public pages. min-width: 200px is more than a narrow
       phone has to give once there is padding either side of it. */
    .search { min-width: 0; }

    /* ----- The account, on a phone ------------------------------------- */
    /* The Hub is the only thing on the left. Its menu already carries who you
       are, your profile, the Dashboard and signing in and out, so the name
       and the buttons beside it are the same things a second time -- and
       with a name of any length, wider than the phone.

       There was a burger here that tucked the whole group away, which put
       the Hub one press behind a button whose only job was to reveal it.

       Hidden rather than moved: each page finds these by id and shows or
       hides them as the session changes, and none of that needs to know. */
    .topline > .topline-left > :not(.hub) { display: none; }

    /* The menu is every page plus the account. On a short phone that is
       taller than the screen, so it scrolls inside itself. */
    .hub-menu {
        max-width: calc(100vw - 28px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------------------
   Size, on a phone only.

   Everything below is still inside a max-width query, so none of it can reach
   a desktop -- which remains the point of this file.
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {

    /* ----- The whole type scale, one number --------------------------- */
    /* The site sizes text in rem, so moving the root moves every heading,
       label and caption together and keeps the proportions the design
       already had. A rule per element would have been fifty rules and a
       different set of proportions at the end of it. */
    html { font-size: 93.75%; }  /* 16px -> 15px */

    /* ----- The way back ----------------------------------------------- */
    /* Top left, where it says it is. Stacking the top line centred it, which
       left "Paws of Fury" sitting under the middle of the wordmark reading
       as a caption rather than as the link out of the page. */
    .topline-left { justify-self: start; }

    /* And in the text colour. At --muted on a dark ground, at this size, it
       was there and could not be seen. */
    .back { color: var(--text); }

    /* ----- The clocks -------------------------------------------------- */
    /* Side by side. They are two items with a 26px gap and permission to
       wrap, so on a phone they wrapped -- and two stacked rows of clock sat
       between the wordmark and the calendar itself. */
    .clocks {
        flex-wrap: nowrap;
        gap: 14px;
    }

    /* And the room to be side by side in. 22px either side is a tenth of a
       narrow phone spent on nothing, and it was the tenth the second clock
       needed. */
    .topline { padding-left: 14px; padding-right: 14px; }

    /* The shop and donation links keep their place either side of the clock,
       but a phone has no room for three things across. The clock is the one
       people came for, so the links lose their padding first and wrap under
       it only if they still will not fit. */
    .topline-centre {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .toplink { padding: 5px 10px; font-size: 0.78rem; }


    .clock { gap: 6px; font-size: 0.74rem; }
    .clock b { font-size: 0.84rem; }
    .clock-zone { font-size: 0.64rem; letter-spacing: 0.02em; }
    .dial { width: 21px; height: 21px; }
}