/* ==========================================================
   Liquid Glass: an optional look borrowed from iOS 26 and macOS Tahoe.
   Off unless a visitor turns it on (Spotlight's "Turn on Liquid Glass", glass.js),
   which puts data-glass="on" on <html>. Every rule here starts with that, so with
   glass off this file changes nothing. It works alongside light and dark.

   Follows Apple's guidance (Human Interface Guidelines › Materials, and "Adopting
   Liquid Glass"), which splits a screen into two layers:

   - The content layer: the tiles. Apple says not to use Liquid Glass here, but a
     "standard material" instead: a frosted, see-through panel, like a Home Screen widget.
   - The functional layer: controls and navigation floating above the content. This is
     where Liquid Glass goes, used sparingly, in two strengths:
       regular  for anything with text (nav, Spotlight, the iMessage banner, captions):
                more blur, so the words stay readable whatever is behind them
       clear    only for small icon buttons over photos and maps, with a dark "dimming
                layer" so they stay visible over bright pictures

   Behind it all is a colourful wallpaper: glass needs something to show through.
   ========================================================== */

:root[data-glass] {
  --bg: #e4e9f5;                        /* under the wallpaper, if it ever fails to draw */
  --tile: rgba(255, 255, 255, .5);
  --card: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .55);
  --outline: rgba(0, 0, 0, .14);
  --muted: #55555e;                     /* a step darker: the tiles let colour through, so grey text needs more contrast */
  --glass: rgba(255, 255, 255, .5);
  --glass-active: rgba(255, 255, 255, .7);
  --shadow: rgba(30, 40, 80, .22);
  --ss-sidebar: rgba(255, 255, 255, .45);

  /* Standard material (tiles): a hairline of light along the top edge, nothing more */
  --mt-edge: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .3);
  --mt-drop: 0 8px 24px -10px rgba(30, 40, 80, .18);

  /* Liquid Glass (controls): a bright rim catching light top-left, a fainter one bottom-right */
  --lg-rim: inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(255, 255, 255, .45),
            inset 0 0 0 .5px rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .35);
  --lg-drop: 0 8px 24px -6px rgba(30, 40, 80, .2), 0 1px 3px rgba(30, 40, 80, .1);
  --lg-regular: blur(10px) saturate(180%) brightness(1.06);
  --lg-rim-fill: rgba(255, 255, 255, .22);     /* without the lens: the clear rim... */
  --lg-middle-fill: rgba(255, 255, 255, .62);  /* ...and the frosted middle, behind the labels */
  --lg-clear-dim: rgba(0, 0, 0, .38);   /* Apple suggests ~35% over bright content */
  --lg-clear: blur(4px) saturate(160%);

  /* The scroll edge effect: content fades and blurs as it passes under the nav */
  --edge-tint: rgba(236, 240, 252, .55);

  --wallpaper:
    radial-gradient(55% 45% at 8% 6%, #9ec3ff 0%, transparent 70%),
    radial-gradient(45% 40% at 92% 12%, #ffc2dc 0%, transparent 70%),
    radial-gradient(50% 45% at 78% 88%, #ffd29e 0%, transparent 70%),
    radial-gradient(45% 50% at 14% 86%, #a6ecd0 0%, transparent 70%),
    radial-gradient(35% 30% at 50% 50%, #d9cbff 0%, transparent 70%),
    linear-gradient(160deg, #e6ecfb, #f4ecf4);
}

:root[data-glass][data-theme="dark"] {
  --bg: #0b0e1c;
  --tile: rgba(26, 26, 34, .5);
  --card: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .12);
  --outline: rgba(255, 255, 255, .2);
  --muted: #a7a7b2;
  --glass: rgba(30, 30, 40, .55);
  --glass-active: rgba(255, 255, 255, .16);
  --shadow: rgba(0, 0, 0, .55);
  --ss-sidebar: rgba(255, 255, 255, .06);

  --mt-edge: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06);
  --mt-drop: 0 10px 30px -12px rgba(0, 0, 0, .55);

  --lg-rim: inset 1px 1px 0 rgba(255, 255, 255, .3), inset -1px -1px 0 rgba(255, 255, 255, .12),
            inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 0 14px rgba(255, 255, 255, .06);
  --lg-drop: 0 10px 30px -8px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .3);
  --lg-regular: blur(10px) saturate(170%) brightness(.85);
  --lg-rim-fill: rgba(30, 30, 40, .25);
  --lg-middle-fill: rgba(24, 24, 32, .62);

  --edge-tint: rgba(10, 12, 30, .55);

  --wallpaper:
    radial-gradient(55% 45% at 8% 6%, #213e9c 0%, transparent 70%),
    radial-gradient(45% 40% at 92% 14%, #6c2478 0%, transparent 70%),
    radial-gradient(50% 45% at 80% 90%, #8f3b1f 0%, transparent 70%),
    radial-gradient(45% 50% at 12% 88%, #0d6b52 0%, transparent 70%),
    radial-gradient(35% 30% at 50% 50%, #33236e 0%, transparent 70%),
    linear-gradient(160deg, #0b1030, #120a22);
}

/* ==========================================================
   The wallpaper: fixed, so the tiles slide over it as you scroll
   ========================================================== */
:root[data-glass] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--wallpaper);
  pointer-events: none;
}

/* The scroll edge effect. Apple puts one under every bar, so text scrolling up under the
   nav doesn't fight with the nav's own labels: a strip across the top of the window that
   fades what passes beneath it, melting away towards the bottom. A tint only, no blur:
   the nav's lens needs something sharp behind it to bend. */
:root[data-glass] body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100px;
  z-index: 9;                           /* under the nav and switch (10), over the page */
  background: linear-gradient(var(--edge-tint), transparent);
  pointer-events: none;
}

/* ==========================================================
   Content layer: tiles in a standard material.
   No blur, on purpose: blurring a smooth gradient looks the same as not blurring it,
   and blur on fifteen big tiles makes scrolling stutter on phones.
   ========================================================== */
:root[data-glass] .tile { box-shadow: var(--mt-drop); }
/* The edge sits on top of everything inside the tile, so photo and map tiles get it too */
:root[data-glass] .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: var(--mt-edge);
  pointer-events: none;
}
:root[data-glass] a.tile:hover { box-shadow: 0 20px 40px -18px var(--shadow), var(--mt-drop); }
/* The arrow circle's resting colour. :where() makes this rule count for no more than .arrow
   alone, so each tile's hover rule (dark circle, light arrow) still wins. At full strength
   it outranked them, and on hover the arrow turned white on a white circle. */
:where(:root[data-glass]) .arrow { background: var(--card); }

/* Office hours: the open slot's green text sits on a see-through green tint, so it needs a
   darker green to stay readable over the pale wallpaper */
:root[data-glass]:not([data-theme="dark"]) .tile--office { --ch-green-text: #136127; }

/* Spotify keeps its own colours, but lets the wallpaper through like every other tile */
:root[data-glass] .tile--spotify { --sp-player-bg: rgba(255, 255, 255, .35); }
:root[data-glass][data-theme="dark"] .tile--spotify { --sp-bg: rgba(14, 14, 16, .62); --sp-player-bg: rgba(0, 0, 0, .4); }

/* ==========================================================
   Functional layer: Liquid Glass, regular
   ========================================================== */
:root[data-glass] :is(.nav, body > .theme-toggle, .ra-bar, .ra-edit) {
  border-color: transparent;
  background: var(--glass);
  backdrop-filter: var(--lg-regular);
  -webkit-backdrop-filter: var(--lg-regular);
  box-shadow: var(--lg-rim), var(--lg-drop);
}
/* Chrome: the lens, bending what's behind at the edges. glass.js gives each control an SVG
   filter the size of the control (--lg-lens). Kept to the nav and switch: it's costly to draw. */
/* (Named twice to outrank the glass rule above, which names .nav and .theme-toggle too) */
:root[data-glass] [data-glass-lens][data-glass-lens] {
  backdrop-filter: var(--lg-lens) saturate(180%) brightness(1.06);   /* the lens does its own frosting, in the middle only */
}
:root[data-glass][data-theme="dark"] [data-glass-lens][data-glass-lens] {
  backdrop-filter: var(--lg-lens) saturate(170%) brightness(.85);
}
/* Safari and Firefox (no lens): the same shape as the lens, without the bending. What's behind
   stays sharp and vivid through the rim, and a frosted layer (::before) fills only the middle,
   behind the labels. (A frosted layer can't blur by itself here: a blur inside something that
   already blurs what's behind it doesn't work reliably, so the middle is a tint instead.) */
:root[data-glass] :is(.nav, body > .theme-toggle):not([data-glass-lens]) {
  background: var(--lg-rim-fill);
  backdrop-filter: blur(1.5px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(1.5px) saturate(200%) brightness(1.06);
}
:root[data-glass] :is(.nav, body > .theme-toggle):not([data-glass-lens])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                          /* over the glass, under the labels */
  border-radius: inherit;
  background: var(--lg-middle-fill);
  pointer-events: none;
}
/* The pill: fades out over its top and bottom thirds, and its rounded ends */
:root[data-glass] .nav:not([data-glass-lens])::before {
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent), linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent), linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-composite: intersect;
}
/* The round switch: fades out towards its edge */
:root[data-glass] body > .theme-toggle:not([data-glass-lens])::before {
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

/* The highlighted link is a brighter drop of glass inside the pill */
:root[data-glass] .nav-link.is-active { box-shadow: var(--lg-rim); }
/* Glass squashes slightly when pressed, like Apple's */
:root[data-glass] :is(.nav-link, .nav-search, .ra-edit) { transition: color .2s, background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
:root[data-glass] :is(.nav-link, .nav-search, .ra-edit):active { transform: scale(.94); }
/* Phones: the switch moves inside the nav pill. Apple: never glass on glass */
:root[data-glass] .nav .theme-toggle {
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Spotlight, like macOS Tahoe's */
:root[data-glass] .spotlight {
  --sl-bg: rgba(255, 255, 255, .58);
  --sl-line: rgba(0, 0, 0, .08);
}
:root[data-glass][data-theme="dark"] .spotlight {
  --sl-bg: rgba(30, 30, 38, .6);
  --sl-line: rgba(255, 255, 255, .1);
}
:root[data-glass] .sl-panel { box-shadow: var(--lg-rim), 0 24px 80px rgba(0, 0, 0, .28); }

/* The iMessage banner */
:root[data-glass] .im { --im-bg: rgba(255, 255, 255, .55); box-shadow: var(--lg-rim), var(--lg-drop); }
:root[data-glass][data-theme="dark"] .im { --im-bg: rgba(36, 36, 44, .6); }

/* Controls with words on them, floating over a tile's photo or map */
:root[data-glass] :is(.ph-slide figcaption, .ph-info, .fm-card, .fm-compass, .fm-zoom, .nw-app, .siri-button) {
  box-shadow: var(--lg-rim), var(--lg-drop);
}
:root[data-glass] :is(.ph-slide figcaption, .ph-info) { backdrop-filter: var(--lg-regular); -webkit-backdrop-filter: var(--lg-regular); }
/* Find My, and its copy on the 404 page */
:root[data-glass] :is(.tile--findmy, .tile--lost) { --fm-glass: rgba(255, 255, 255, .6); --fm-button: rgba(255, 255, 255, .62); }
:root[data-glass][data-theme="dark"] :is(.tile--findmy, .tile--lost) { --fm-glass: rgba(30, 38, 50, .58); --fm-button: rgba(60, 74, 96, .6); }
:root[data-glass] .nw-app { background: rgba(255, 255, 255, .6); }
/* Projects: the strip along the bottom of each App Store story card, over bright artwork.
   More opaque than the nav, so its two lines of text stay readable on any colour. */
:root[data-glass] .pj-strip { background: rgba(255, 255, 255, .72); }
:root[data-glass][data-theme="dark"] .pj-strip { background: rgba(28, 28, 34, .8); }

/* Mail's sidebar floats as a pane of glass inside the window, like Mail on macOS Tahoe.
   Its corners are "concentric" with the tile's: the tile's radius minus the gap between them. */
:root[data-glass] .ml-sidebar {
  margin: 8px 0 8px 8px;
  border-right: 0;
  border-radius: calc(var(--radius) - 8px);
  backdrop-filter: var(--lg-regular);
  -webkit-backdrop-filter: var(--lg-regular);
  box-shadow: var(--lg-rim), var(--lg-drop);
}

/* The same floating sidebar on the About page (Notes) and the Details panel on the
   Newsletter page (Messages). The windows themselves stay solid: they're for reading. */
:root[data-glass] :is(.notes-folders, .ms-info) {
  margin: 8px;
  border: 0;
  border-radius: 12px;                  /* the window's 20px corner, less the 8px gap */
  backdrop-filter: var(--lg-regular);
  -webkit-backdrop-filter: var(--lg-regular);
  box-shadow: var(--lg-rim), var(--lg-drop);
}
:root[data-glass] .notes-folders { --notes-sidebar: var(--glass); }
:root[data-glass] .ms-info { --ms-chrome: var(--glass); }
@media (min-width: 981px) {
  :root[data-glass] .notes-folders { width: 204px; }   /* 220px column, less the gap each side */
}

/* Pop-up sheets full of text: the Books page's book card. Apple uses its thickest glass for
   these, close to solid with a heavy blur, so the summary reads as easily as on a solid page
   while a hint of the page still shows through. (It used to take --card, which glass makes
   nearly see-through.) */
:root[data-glass] .bk-card {
  background: rgba(250, 250, 252, .9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--lg-rim), 0 30px 80px -20px rgba(0, 0, 0, .35);
}
:root[data-glass][data-theme="dark"] .bk-card {
  background: rgba(30, 30, 36, .9);
  box-shadow: var(--lg-rim), 0 30px 80px -20px rgba(0, 0, 0, .6);
}

/* The app switcher's dock, like the Dock on macOS Tahoe */
:root[data-glass] .sw-dock {
  background: var(--glass);
  backdrop-filter: var(--lg-regular);
  -webkit-backdrop-filter: var(--lg-regular);
  box-shadow: var(--lg-rim), var(--lg-drop);
}

/* ==========================================================
   Functional layer: Liquid Glass, clear (icon buttons over photos)
   ========================================================== */
:root[data-glass] :is(.ph-info-button, .ph-dots) {
  background: var(--lg-clear-dim);
  backdrop-filter: var(--lg-clear);
  -webkit-backdrop-filter: var(--lg-clear);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(255, 255, 255, .2), 0 4px 12px rgba(0, 0, 0, .2);
  color: #fff;
}
:root[data-glass] .ph-info-button[aria-expanded="true"] { background: #fff; color: #111; }

/* ==========================================================
   Accessibility
   ========================================================== */

/* "Reduce transparency" (an iPhone and Mac setting) asks for solid surfaces: keep the
   wallpaper, but make everything on it opaque, and drop the blur and the lens */
@media (prefers-reduced-transparency: reduce) {
  :root[data-glass] { --tile: #f4f5f9; --card: #ffffff; --glass: #f4f5f9; --glass-active: #e4e5ec; --muted: #6b6b73; --ss-sidebar: #efeff2; --edge-tint: transparent; }
  :root[data-glass][data-theme="dark"] { --tile: #1c1c22; --card: #26262d; --glass: #1c1c22; --glass-active: #34343c; --muted: #9d9da6; --ss-sidebar: #232327; }
  :root[data-glass] .spotlight { --sl-bg: var(--sl-solid); }
  :root[data-glass] .im { --im-bg: var(--tile); }
  :root[data-glass] :is(.notes-folders, .ms-info, .ml-sidebar, .sw-dock) { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-glass] .bk-card { background: #fafafc; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-glass][data-theme="dark"] .bk-card { background: #1e1e24; }
  :root[data-glass] .tile--spotify,
  :root[data-glass][data-theme="dark"] .tile--spotify { --sp-bg: var(--tile); --sp-player-bg: var(--card); }
  :root[data-glass] body::after { display: none; }
  :root[data-glass] :is(.nav, body > .theme-toggle)::before { display: none; }
  :root[data-glass] :is(.nav, body > .theme-toggle):not([data-glass-lens]) { background: var(--glass); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-glass] [data-glass-lens][data-glass-lens],
  :root[data-glass][data-theme="dark"] [data-glass-lens][data-glass-lens] { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* "Increase contrast": solid edges, and more opaque surfaces */
@media (prefers-contrast: more) {
  :root[data-glass] { --lg-rim: inset 0 0 0 1px rgba(0, 0, 0, .45); --mt-edge: inset 0 0 0 1px rgba(0, 0, 0, .3); --tile: rgba(255, 255, 255, .85); --glass: rgba(255, 255, 255, .88); }
  :root[data-glass][data-theme="dark"] { --lg-rim: inset 0 0 0 1px rgba(255, 255, 255, .5); --mt-edge: inset 0 0 0 1px rgba(255, 255, 255, .35); --tile: rgba(20, 20, 26, .88); --glass: rgba(20, 20, 26, .9); }
}

/* "Reduce motion": no squash when pressed */
@media (prefers-reduced-motion: reduce) {
  :root[data-glass] :is(.nav-link, .nav-search, .ra-edit):active { transform: none; }
}