/* Moodle's own pages in the new look (o1029-moodlepages): the account pages reached from the menus (profile, preferences,
   notification preferences, messages, agreements), fixed for phones without editing Moodle. Loaded by
   hook_callbacks::newui_head() after common.css, new look only. */

/* "You are logged in as <name> (Log out)": an inline link that wraps spans both lines, so its box crossed the name's on a
   phone (the name sat at the end of line 1, "Log" after it, "out)" on line 2). Each link is its own box; a long name wraps inside it. */
html[data-theme] #page-footer .logininfo a{display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* Notification preferences scrolled sideways 39px on an iPhone: the Email column head holds core/hover_tooltip, whose tip
   ("Requires configuration") is absolute, nowrap and centred on the column; hidden (visibility:hidden) it still counts towards
   the page's width, and near the right edge it reached 432px of a 393px screen. While hidden it takes no room at all; it shows
   as Moodle draws it on hover or keyboard focus. Same cause anywhere Moodle uses core/hover_tooltip. */
html[data-theme] .hover-tooltip-container:not(:hover):not(:focus-within) .hover-tooltip{display:none}

/* /user/forum.php scrolled sideways 89px on an iPhone (WebKit): a select whose option text is longer than the box paints
   past its edge and counts towards the page width. Clip it to its own box; the open list still shows the full text. */
html[data-theme] select.form-select{overflow:hidden}

/* Touch: Moodle's small controls keep their look, and an invisible ::before makes each tap area at least 44 x 44, centred on it
   (owner 2026-10-29, as shell.css; under-13 crawl stack-test-4b21: Side panel 38, bell 36 wide, footer links 19-24 high, Back to top 19,
   38px buttons, block drawer 40, notification rows 39, file manager buttons 31). :where() keeps any position Moodle already gives. Form fields,
   switches and <input> buttons cannot carry a ::before: they stay as Moodle draws them. */
@media (pointer:coarse){
  :where(html[data-theme]) :where(a.btn, button.btn, .navbar-toggler, .popover-region-toggle, #page-footer a, th a,
    .content-item-container [tabindex], .fp-toolbar a, .fp-viewbar a, #page-admin-tool-policy-viewall .text-end > a, .float-end > a[href="#top"]){ position: relative; }
  html[data-theme] :is(a.btn, button.btn, .navbar-toggler, .popover-region.collapsed .popover-region-toggle, #page-footer a, th a,
    .content-item-container [tabindex], .fp-toolbar a, .fp-viewbar a, #page-admin-tool-policy-viewall .text-end > a, .float-end > a[href="#top"])::before{
    content: ""; display: block; position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; border: 0; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* The file manager's toolbar clipped the areas (overflow:hidden only to hold its floats): flow-root holds them the same way. */
  html[data-theme] .filemanager-toolbar{ overflow: visible; display: flow-root; }
}

/* /message/output/popup/notifications.php: Moodle paints the list with fixed light colours (unread rows #f4f4f4, rules #ddd/#e3e3e3, an
   open item's time #666, hover #3867e8) while the text follows the theme, so in Dark an unread row was near-white text on #f4f4f4 (1.1:1). The theme's own colours
   instead: unread rows tinted with the accent, the rules and the hover from the tokens. */
html[data-theme] :is(.content-item-container, .notification-area .content-area .header){border-bottom-color:var(--ac-border-default)}
html[data-theme] .notification-area, html[data-theme] .notification-area .control-area{border-color:var(--ac-border-default)}
html[data-theme] .notification-area .content-area .header .timestamp{color:var(--ac-text-muted)}
html[data-theme] .content-item-container.unread{background-color:var(--ac-accent-subtle)}
html[data-theme] .content-item-container:hover,html[data-theme] .content-item-container.unread:hover{background-color:var(--ac-accent-solid);color:var(--ac-text-on-accent)}
html[data-theme] .content-item-container:hover .content-item-footer .timestamp{color:inherit}