/* PHONES AND TOUCH -- what a thumb needs on controls the desktop drew small:
   a target of 32px and type of 11px. Loaded last on every page, so a rule
   here wins a tie with the page's own. */
@media (max-width: 600px), (pointer: coarse) {
    /* The name switch (Riot / Alias / Name, Player / Alias) and small toggles. */
    .rbSwitch button, .poolHeadSwitch button, body .chatTabs .chatNames button, body .chatNamesIn button, body .inboxBoxes button, body .chatTabName, .champ-toggle, .availCtl, .autoTzBtn, .switchBtn, .pw-btn, .draftSave, .teamLeaveBtn, .sideOpt {
        min-height: 30px; font-size: 0.72rem; padding-left: 6px; padding-right: 6px;
    }
    /* Icon buttons. */
    body .chatBell, body .chatTabDrop, body .lafterX, body .lafterXDel, .org-leave-btn, .eraPermalink, .dlMore, .joinDockTab, body .lafterInfo, .secToggle {
        min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    }
    body .inboxSearch, .live-search-input { min-height: 36px; }
    .teamAvailBtn, .account-value, .rmLink, .tourney-header-link, .schedTeam { min-height: 32px; display: inline-flex; align-items: center; }
    .orgTab, .boardTab { min-height: 34px; display: inline-flex; align-items: center; }
    footer { font-size: 0.7rem; }
    footer a, .account-section a, .download-section a { display: inline-block; padding: 8px 4px; }
    /* Type under 11px, up to it. */
    .themeSwitch .themeSwitch-label, .themeSwitch--settings .themeSwitch-label, .themeSwitch--floating .themeSwitch-label,
    .pref-hint, .champ-toggle, .seasonTable th, .seasonMeta, .draftPull, .seasonLock, .bkRoundName, .bkRoundBo, .bkRoundAt, .bkMeta, .orgBracketName span,
    .formGroupNote, .hourTick, .devBanner, .accountInfo, .accountTip, .schedBarTab, .logo-org-check, .eraGroupName, .live-url-hint, .team-mirth-l, .orgBracketName span, .divisionEyebrow, .tierNote, .orgCard h3, .seasonWhen small,
    .seasonTable td, .teamAvailBtn, .teamRegion, .teamLive, .rosterSeat, .rbDot, .rbLane, .team-player-line, .team-player-seat, .team-player-lane, .team-dot, .team-mirth-none, body .chatRowLast, .drawerBody .draftNote, .faTag, .poolMore, .agentTeam, .rivalName { font-size: 0.7rem; }
    #inboxDot, .inboxDot, .schedBadge { font-size: 0.6rem; }
    /* Rows of tabs scroll sideways instead of pushing the page. */
    .boardTabs { max-width: 100%; overflow-x: auto; justify-content: flex-start; padding: 0 8px; scrollbar-width: none; }
    .boardTabs::-webkit-scrollbar { display: none; }
    /* The account pages: nothing wider than the phone. */
    /* Preferences: the title above the lanes, the five lanes in one row, a note across the champion grid. */
    .pref-header { flex-direction: column; gap: 0.5rem; }
    .lanes-grid { gap: 0.3rem; justify-content: space-between; width: 100%; }
    .lane-item { flex: 1 1 0; min-width: 0; padding: 0.3rem 0.1rem; }
    .lane-item .lane-icon img { max-width: 100%; }
    .champ-grid > p { grid-column: 1 / -1; }
    .hueTrack { --w: min(200px, calc(100vw - 3.5rem)); }
    .settings-row--appearance { grid-template-columns: 1fr; justify-items: start; }
    .settings-row--appearance .themeSwitch--settings { justify-self: start; }
    /* A tip opens under the i, within the phone, and takes no room while shut. */
    .accountTip { left: auto; right: 0; max-width: min(280px, calc(100vw - 2rem)); }
    .accountInfo:not(:hover):not(:focus-within) .accountTip { visibility: hidden; width: 0; overflow: hidden; }
    /* An org row: the address under the name, not squeezed beside it. */
    .org-row { flex-wrap: wrap; row-gap: 2px; }
    .org-sub { margin-left: 0; flex-basis: 100%; }
    /* The floating theme pill lives in Settings on a phone; the corner buttons get room under the footer. */
    .themeSwitch--floating { display: none; }
    html body > footer { padding-bottom: 84px; }
    /* The open drawer is the whole screen and its tabs sit inside its right edge: the pane keeps clear of them. */
    .draftDrawerLeft.isOpen .drawerBody { padding-right: calc(1.1rem + 32px); }
    /* A notice banner under the bar, not over the logo. */
    body .inboxBanners { top: 72px; right: 16px; width: calc(100vw - 32px); }
    body:has(nav.navOpen) .inboxBanners { display: none; }
    /* The open inbox is the whole screen and its handle sits inside its left edge: the panel keeps clear of it. */
    body .lafterInbox.isOpen .inboxPanel { padding-left: 30px; }
    /* The phone menu's section rows. */
    nav.navOpen .tools-btn, nav.navOpen .user-btn { min-height: 34px; font-size: 0.7rem; }
    /* Availability: the question on its own line, the zone picker under it. */
    .availTop { flex-wrap: wrap; }
    .availTop select { flex: 1 1 100%; min-height: 36px; }
    .availHour { font-size: 0.7rem; }
    .drawerBody .laneName, .drawerBody .lanePriority { font-size: 0.7rem; }
    .availDay, .availNote, .availWho button, body .chatRowWhen, body .chatRowN, body .chatWhoSub, body .chatDay, body .chatSys, .availTop, .availShort, .availPerson, .drawerBody .draftLabel { font-size: 0.7rem; }
}