/* Julie — the glass material.
 *
 * James, 2026-09-07: "look up the developer schematics Apple provided for
 * apps trying to match the glossy glass look of iOS 26, and apply some of
 * those glass effects to our buttons and pills, so as you move objects behind
 * them it creates this glass look."
 *
 * WHAT APPLE'S MATERIAL ACTUALLY DOES, and what a browser can and cannot copy.
 *
 * Liquid Glass does three things at once: it BLURS what is behind it, it
 * REFRACTS that content the way a curved lens bends light, and it carries a
 * SPECULAR HIGHLIGHT along its lit edge that tracks device motion.
 *
 * A browser can do one and a half of those.
 *
 *   - Blur and saturation: `backdrop-filter`, exactly.
 *   - Specular edge: an inset top highlight, convincingly.
 *   - Refraction: NOT AT ALL. Refraction means displacing pixels, and not one
 *     of backdrop-filter's functions moves a pixel from where it was. There
 *     is no CSS primitive for it. Anything claiming otherwise is doing an SVG
 *     displacement map, which costs a filter pass per frame on every scroll
 *     and is not worth it on a phone.
 *
 * So this is a faithful two-thirds, and the two-thirds that carries the look.
 *
 * THE SPECULAR LINE IS THE WHOLE EFFECT. `inset 0 1.5px 0` white along the
 * top edge is what reads as thickness -- the sense that you are looking at a
 * lit piece of glass rather than a translucent rectangle. Take it below about
 * 30% and the panel flattens instantly. Everything else here is supporting.
 *
 * Tuned for a dark ground. Apple's published value is .85 white, which is
 * calibrated against a light interface; against #050a14 that reads as a drawn
 * white line rather than a lit edge, so the dark tokens sit lower and the
 * light-theme block below restores it.
 *
 * Source: Apple HIG, Liquid Glass; and the CSS reduction at
 * https://theplusaddons.com/blog/liquid-glass-ui/
 */

:root{
  /* The pane itself */
  --glass-tint:      rgba(255,255,255,.075);
  --glass-blur:      blur(14px) saturate(165%);
  --glass-edge:      rgba(255,255,255,.16);
  /* The specular bevel, top and bottom */
  --glass-spec:      rgba(255,255,255,.5);
  --glass-spec-low:  rgba(255,255,255,.07);
  /* The shadow that lifts it off the page */
  --glass-lift:      0 10px 30px rgba(2,6,23,.34);
  --glass-radius:    16px;
  /* THE REFLECTION (2026-10-08, polish pass; James: "more reflective, more
     shine"). Real glass shows a soft glow where the light hits its top and a
     faint diagonal reflection across it; a flat tint shows neither and reads
     as a grey film. Two gradients over the tint, white only, so they take
     whatever colour is behind the pane. Kept low: past about 12% at the top
     it stops reading as light and starts reading as a white smear. */
  --glass-sheen:
    radial-gradient(130% 75% at 30% -25%, rgba(255,255,255,.17), rgba(255,255,255,0) 58%),
    linear-gradient(125deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 38%,
                            rgba(255,255,255,0) 72%, rgba(255,255,255,.05) 100%);
  /* THE LIT RIM (2026-10-08, James on the new tab bar: "I love the glass
     look", then "the cards ... need to look like that"). Drawn with
     inset shadows on the cards (julie-module-glass.css). Brightest where the light falls (top-left), a faint
     answer at the bottom-right, the same as iOS's loupe and the tab bar. */
  --glass-rim-hi: rgba(255,255,255,.42);
  --glass-rim-lo: rgba(255,255,255,.12);
  --glass-lip: inset 0 -9px 12px -10px rgba(255,255,255,.22);
}

/* The material. Applied by adding `jglass` to anything that floats. */
.jglass{
  background:var(--glass-sheen, linear-gradient(transparent, transparent)), var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--glass-radius);
  box-shadow:
    inset 0 1.5px 0 var(--glass-spec),
    inset 0 -1px 0 var(--glass-spec-low),
    var(--glass-lift);
}

/* A quieter grade for small controls. A 34px button carrying the full pane
   treatment reads as a chiclet; it wants the bevel and almost nothing else. */
.jglass-sm{
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

/* Pressed: glass under a finger gets thinner and loses its lit edge, because
   the thing that was catching the light has moved. */
.jglass:active, .jglass-sm:active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04);
}

/* ── The two fallbacks, both required ─────────────────────────────────────
   Backdrop-filter is the whole material, so where it is unsupported the tint
   alone leaves nearly-transparent chrome over live content -- unreadable
   rather than merely plainer. Paint something solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .jglass, .jglass-sm{
    background:rgba(16,23,40,.93);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), var(--glass-lift);
  }
}
/* And the accessibility setting, which asks for the same thing for a
   different reason. This is not optional decoration: somebody has told the
   system that translucency makes the interface hard to use. */
@media (prefers-reduced-transparency: reduce){
  .jglass, .jglass-sm{
    background:#141B2E;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(2,6,23,.42);
  }
}

/* ── Light theme ───────────────────────────────────────────────────────────
   Here Apple's published .85 specular is right: against a light ground a
   dimmer bevel disappears. The tint inverts to a white pane over pale
   content, which is what the material looks like on an iPhone in daylight. */
:root[data-theme="light"], .light{
  --glass-tint:     rgba(255,255,255,.55);
  --glass-edge:     rgba(255,255,255,.72);
  --glass-spec:     rgba(255,255,255,.85);
  --glass-spec-low: rgba(255,255,255,.30);
  --glass-lift:     0 8px 26px rgba(15,23,42,.14);
  --glass-sheen:
    radial-gradient(140% 70% at 50% -20%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 45%);
  --glass-rim-hi: rgba(255,255,255,.95);
  --glass-rim-lo: rgba(15,23,42,.10);
  --glass-lip: inset 0 -9px 12px -10px rgba(255,255,255,.7);
}

/* THE TWO FALLBACKS NEED THE SAME INVERSION, and they did not have it.
   The tokens above cover `.jglass`, because it reads them. The two blocks
   further up do NOT read them -- they name #141B2E and rgba(16,23,40,.93)
   directly, on purpose, because the whole point of a fallback is to stop
   depending on the thing that is missing. So on Light they painted a navy
   slab, and the light theme's own `--ink` (#0B0B0F) was still being applied
   to the text on it: near-black on near-black.

   This is the more serious half of the two, not the more obscure. A person
   who has turned on Reduce Transparency has told the system that translucency
   is making the interface hard to use, and is therefore likelier than average
   to be the same person who wants a light theme for legibility. Both settings
   at once is the combination we should handle best, and it was the one
   combination nobody had looked at.

   `.jglass-sm` is separate from `.jglass` because it never reads the tokens
   at all -- it carries its own literals for the quiet grade, so a white film
   at 5.5% over a white page is simply not there. */
:root[data-theme="light"] .jglass-sm{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.04);
}
/* Pressed has to DARKEN on a light ground. The dark rule lightens, which on
   white is no change a finger can see. */
:root[data-theme="light"] .jglass:active,
:root[data-theme="light"] .jglass-sm:active{
  background:rgba(15,23,42,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(15,23,42,.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-theme="light"] .jglass,
  :root[data-theme="light"] .jglass-sm{
    background:rgba(255,255,255,.96);
    border-color:rgba(15,23,42,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--glass-lift);
  }
}
@media (prefers-reduced-transparency: reduce){
  :root[data-theme="light"] .jglass,
  :root[data-theme="light"] .jglass-sm{
    background:#FFFFFF;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:rgba(15,23,42,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(15,23,42,.12);
  }
}