/* ============================================================================
   LIQUID GLASS IN MOTION (fix round 8, 14 Oct 2026). The four places Alen picked for build 15 are drawn at rest by
   css/app.css (LIQUID GLASS AT REST): the capsule, the tab bar, the date card, the fallbacks, with every rule a cold load
   needs. This stylesheet holds what only moves or only a tap shows: each glass part's 240 ms ease of its --lg-c, a tab
   switch's hand-off and a crossing's rules for the date card and the scroll edge, and Notifications as platters.
   index.html links it as media="print", so it never holds the first paint (its own render-blocking link cost WebKit on a
   phone +4.5 ms to Home's first contentful paint, recheck of 14 Oct), and js/app.js turns it to all once it has loaded and
   the first contentful paint is drawn; js/router.js never waits a screen on it. Nothing here changes how a resting screen looks, so it
   lands with no flash. Its link stands where the whole file stood, after app.css, kit.css and intro.css and before the
   views' stylesheets, so every rule keeps its place in the cascade: Plexus Week's pinned rules (css/views/plexus.css)
   still come later and win while the control is pinned.
   ========================================================================== */

/* ---------------------------------------------------------------------------------------------- 1. the capsule's crossing.
   Each part eases its own --lg-c (registered in app.css, not inherited) when #chrome[data-lg-bare] comes or goes, so the
   capsule, its scroll edge and the controls' circles cross over the bare paper as one in 240 ms and a crossing restyles
   those few parts, never the chrome's whole tree. The back chevron keeps its own press and tone transitions */
@media (max-width: 500px) {
  body[data-layout] #mx-mobile-top.mx-mt::before, body[data-layout] #mx-mobile-top.mx-mt::after,
  body[data-layout] #mx-mobile-top :is(.mx-cb-seat, .mx-mt-caps), body[data-layout] #mx-mobile-top .mx-mt-caps::before,
  body[data-layout] #mx-mobile-top .mx-mt-back::before, body[data-layout] #mx-mobile-top .mx-mt-back::after { transition: --lg-c 240ms var(--ease-fade); }
  body[data-layout] #mx-mobile-top .mx-mt-back { transition: transform 120ms var(--ease), color var(--t-quick) var(--ease), --lg-c 240ms var(--ease-fade); }
}
@media (min-width: 501px) {
  body[data-layout].mx-wfloat #mx-desktop-chrome::before, body[data-layout].mx-wfloat #mx-desktop-chrome .mx-cb-seat,
  body[data-layout].mx-wfloat #mx-desktop-chrome :is(.mx-wb-gc, .mx-wb-gcap):not(.mx-wb-me)::before { transition: --lg-c 240ms var(--ease-fade); }
}

/* ---------------------------------------------------------------------------------------------- 3. the date card in a
   tab switch's hand-off (js/router.js, underMount to endReveal: the new root carries [data-mx-above] while it fades in over
   the veil): as while its first photo decodes (app.css, [data-mx-kb-wait]), the card is drawn without its blur under the
   62 percent tint, and once the root has landed the blur comes on at once and the tint clears over 200 ms. Home draws its
   top anew as the hand-off ends, so there the new card simply lands at rest */
body[data-layout] :where([data-mx-above]) .mx-hx-when:not(.mx-hx-when--ph)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-layout] :where([data-mx-above]) .mx-hx-when:not(.mx-hx-when--ph)::after { opacity: var(--when-o, 1); transition: none; }

/* ---------------------------------------------------------------------------------------------- 4. Notifications as
   platters (the bell's popover on iPad and Mac; the phone keeps its Updates in the Inbox). Instead of one sheet with ruled
   rows, each notification is its own glass platter: the panel itself has no glass, the head is a slim glass capsule, the
   rows stack 8 px apart, an unread one carries a gold dot with a soft glow */
body[data-layout] .mx-pop.mx-glass { overflow: visible; box-shadow: none; border-radius: 0; }
body[data-layout] .mx-pop.mx-glass::before { display: none; }
body[data-layout] .mx-pop .mx-pop-head { position: relative; z-index: 0; border-bottom: 0; border-radius: 999px; margin-bottom: 8px; padding: 6px 8px 6px 18px; min-height: 52px; box-shadow: var(--lg-float); }
/* the list still scrolls (10 alerts and the messages row reach about 1,000 px): it runs to about 32 px above the screen's foot,
   under the 64 px bar, the head (60) and the foot (52). The scroller's side padding gives the platters' float room, so the
   shadows are not cut at its sides, and the negative side margins keep the platters where they were. Its foot ends 8 px under
   the last platter and above the settings platter, so no row runs under the foot (fix round 5, critic 12 Oct: with a -26 px
   foot margin the last row sat cut mid-line under the settings platter on a Mac, glass on glass). No mask on the scroller: a
   mask is a backdrop root and would blind the platters' blur */
body[data-layout] .mx-pop .mx-pop-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden auto; overscroll-behavior: contain;
  max-height: max(240px, calc(100vh - 206px)); max-height: max(240px, calc(100dvh - 206px));
  padding: 2px 22px 8px; margin: -2px -22px 0; scroll-padding-block: 2px 8px; }
body[data-layout] .mx-pop .mx-pop-row { flex: none; position: relative; z-index: 0; border-bottom: 0; border-radius: 22px; padding: 14px 16px; box-shadow: var(--lg-float); }
/* the Notification settings link at the foot (js/chrome.js, notify-settings) rides on a slim capsule of its own, as the head,
   never on the bare page. Its rule line is written inline by chrome.js, so the one !important here takes it away */
body[data-layout] .mx-pop .mx-pop-foot { position: relative; z-index: 0; align-items: center; min-height: 44px; margin-top: 8px; border-top: 0 !important; border-radius: 999px; box-shadow: var(--lg-float); }
/* each platter blurs at the house's chip radius (--glass-blur-chip, 16 px, as the date card and the controls on a photo): six
   or more small glasses each draw their own blur on every frame the page moves under them, and at the bar's 24 px they
   took the software compositor 1.6 ms a frame past the base's one sheet while the panel opened over Home's drifting photo
   (fix round 6, Chromium at 1024: 10.7 ms a frame against 9.1, 9.8 at 16 px). Under the platter's 88 percent tint the two
   radii read the same */
body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-color: var(--glass-light-strong); background-image: var(--lg-sheen);
  -webkit-backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-sat));
  box-shadow: var(--lg-edge); transition: filter 120ms var(--ease); }
@media (hover: hover) { body[data-layout] .mx-pop .mx-pop-row:hover { background: none; } body[data-layout] .mx-pop .mx-pop-row:hover::before { filter: brightness(1.03); } }
/* the open and the close. app.css fades the panel's children by their opacity (.mx-pop-in > *, .mx-pop-out > *), and a child
   below opacity 1 is a backdrop root: while the panel opened and closed, the head, the list and the foot saw nothing behind
   them, so no platter blurred and the page's words showed crisp through every one of them (critic, 12 Oct). Here the panel
   still drops into place as before, and the fade is --pop-o, a registered number (app.css, with its two keyframes) eased on
   the panel and read by each platter's glass and its words, never by the list or a platter itself, the way the date card
   fades by --when-o: the blur works on every frame of it. The glass leads (whole by half way) and the words follow, so the
   page's words never show crisp through a platter that is mostly clear; the close takes the words first and the glass after
   them. An engine without @property shows the platters at once */
body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { opacity: clamp(0, var(--pop-o, 1) * 2, 1); }
body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot) > *, body[data-layout] .mx-pop .mx-pop-list > :not(.mx-pop-row) { opacity: var(--pop-o, 1); }
@media (prefers-reduced-motion: no-preference) {
  body[data-layout] .mx-pop.mx-glass:is(.mx-pop-in, .mx-pop-out) > * { animation: none; }
  body[data-layout] .mx-pop.mx-glass.mx-pop-in { animation: mx-drop-t var(--t-settle) var(--ease-settle) backwards, lg-pop-in var(--t-reveal) var(--ease-fade) backwards; animation-delay: var(--pop-t, 0ms); }
  body[data-layout] .mx-pop.mx-glass.mx-pop-out { animation: lg-pop-out var(--t-exit) var(--ease-exit) forwards; }
}
/* the platter lets the page through, so the date takes the ink of the body copy, not the muted grey (4.4 to 1 at its worst) */
body[data-layout] .mx-pop .mx-pop-d { color: #4f463d; }
body[data-layout] .mx-pop .mx-pop-dot:not(.is-read) { box-shadow: 0 0 0 3px rgba(201, 169, 98, .22), 0 0 10px rgba(201, 169, 98, .55); }
/* the platters' fallbacks: no backdrop-filter, Reduce Transparency, Increase Contrast turn them solid (the rest: app.css) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { background: var(--glass-solid-light); }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { background: var(--glass-solid-light); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.mx-rt body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { background: var(--glass-solid-light); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-contrast: more) {
  body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { background: var(--glass-solid-light); box-shadow: inset 0 0 0 1px rgba(25, 21, 18, .55); }
}
html.mx-hc body[data-layout] .mx-pop :is(.mx-pop-head, .mx-pop-row, .mx-pop-foot)::before { background: var(--glass-solid-light); box-shadow: inset 0 0 0 1px rgba(25, 21, 18, .55); }

/* ---------------------------------------------------------------------------------------------- a crossing
   (html[data-mx-nav]): the bars go solid as before (WebKit drops a backdrop-filter during the Back slide), the date card
   too, and the scroll edge steps aside */
html[data-mx-nav] body[data-layout] #mx-mobile-top.mx-mt::after { display: none; }
html[data-mx-nav] body[data-layout] .mx-hx-when:not(.mx-hx-when--ph)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-mx-nav] body[data-layout] .mx-hx-when:not(.mx-hx-when--ph)::after { opacity: var(--when-o, 1); transition: none; }