/* Touch and page changes: how a tap and a page change feel on phones and tablets (and in the mobile app). Every page,
   AI Chat and the signed-out pages included: linked right after portal-components.css (templates/_portal_shell.html
   portal_navbar_styles, templates/_portal_head.html for signed-out pages). JS: static/js/portal-touch.js. Tokens only.
     - No browser tap flash (the translucent blue or grey box Safari and Chrome draw over a tapped link or button).
       A touch press shows the pressed wash instead (.is-touch-pressed), and every stylesheet keeps its hover looks behind
       @media (hover: hover), so a tapped control never keeps a hover color after the finger lifts.
     - Controls answer taps at once and a quick second tap never zooms the page (pinch zoom stays), and a long press
       on a control doesn't select its label or open the system callout.
     - On touch screens a page change cross-fades (cross-document view transitions), with the top bar and the phone
       dock held in place, and a thin bar under the top bar shows a slow page is on its way. Desktops (a mouse or a
       trackpad) look and behave as before. */

:root { -webkit-tap-highlight-color: transparent; }

/* manipulation = pan and pinch only: no double-tap zoom, so a tap is a click straight away. Zero specificity, so a
   control that takes the touch itself (touch-action: none on a drag grip or a drawing canvas) keeps its own value. */
:where(a[href], button, summary, label, select, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"],
       [role="menuitemcheckbox"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"], [role="link"],
       [data-href], input[type="checkbox"], input[type="radio"], input[type="range"], input[type="button"],
       input[type="submit"], input[type="reset"]) { touch-action: manipulation; }

/* Not [role="button"] or [role="option"]: rows with text people may want to copy (AI Chat's plan steps) use them. */
@media (pointer: coarse) {
    :where(button, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"],
           [role="switch"], input[type="button"], input[type="submit"]) {
        -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    }
}

/* The pressed wash (portal-touch.js adds it to the pressed control for a touch or pen press): a tint layered over the
   control's own fill color that follows its rounded corners, so every button, row, tile and tab presses the same way
   whatever its colors. A background layer, so the control's rings and shadows (an open menu's ring, a card's lift)
   stay. The wash stops inside the border (an outlined control keeps its outline); the second, empty layer keeps the
   control's own fill color reaching its edge (a background color is clipped like the bottom layer). Inline text links
   dim instead. !important: the press outranks the control's own background image, so a control whose fill is a pattern
   opts out (data-no-press). */
.is-touch-pressed {
    background-image: linear-gradient(var(--clr-press), var(--clr-press)), linear-gradient(transparent, transparent) !important;
    background-clip: padding-box, border-box !important;
}
.is-touch-pressed-text { opacity: 0.6 !important; }

/* =========================================================================================
   PAGE CHANGES
   ========================================================================================= */
/* Touch screens only (phones, tablets, the app): a desktop's page changes stay as they were. */
@media (hover: none), (pointer: coarse) {
    @view-transition { navigation: auto; }
}
/* The bars stay put and change in place (a new app name, a new tab), like an app's own bars; the page cross-fades. */
.portal-topbar { view-transition-name: portal-topbar; }
.app-dock { view-transition-name: portal-dock; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }
::view-transition-old(portal-topbar), ::view-transition-old(portal-dock) { display: none; }
::view-transition-new(portal-topbar), ::view-transition-new(portal-dock) { animation: none; }

/* The navigation bar: shown when the next page takes longer than a moment (portal-touch.js), it creeps toward the
   end and goes with the page. It sits on the top bar's bottom edge, clear of the status bar. */
.portal-nav-progress { position: fixed; left: 0; right: 0; top: calc(var(--topbar-h) - 2px); height: 3px; z-index: var(--z-tip); pointer-events: none;
    background: var(--clr-primary); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
html.is-navigating .portal-nav-progress { opacity: 1; transform: scaleX(0.9); transition: transform var(--dur-crawl) var(--ease-out), opacity var(--dur) var(--ease); }
/* A page without the top bar (sign-in, password links): the bar runs along the top of the screen instead. */
body:not(:has(.portal-topbar)) .portal-nav-progress { top: env(safe-area-inset-top, 0px); }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.is-navigating .portal-nav-progress { transform: scaleX(0.6); transition: none; }
}