/* ==========================================================
   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); }
: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; }
}