/* Candor liquid glass for the web. Pair with liquid-glass.js, which adds the refraction.
 *
 * The material, bottom to top:
 *   1. lens      the backdrop, bent inside a band along the edge (liquid-glass.js)
 *   2. frost     optional blur and saturation under the lens     (--lg-blur, --lg-saturate)
 *   3. wash      optional tint                                    (--lg-wash)
 *   4. light     a soft spotlight that follows the pointer        (::after)
 *   5. contour   one hairline of reflected light around the edge  (::before)
 *   6. content
 * Clear glass is 1 + 4 + 5. Cards, buttons, tabs and glyphs add a subtle 4px frost; a
 * wash and heavier frost are added only where a surface has to carry text over something
 * busy. Always tint through --lg-wash, never `background`.
 * Layout (display, size, padding, position) belongs to the site; the material does not.
 *
 * Values come from the macOS app's source or were fitted to captures of the app;
 * references/source-map.md says which is which.
 */

@property --lg-hot { syntax: '<number>'; inherits: true; initial-value: 0; }

:where(.nav-glass) { isolation: isolate; box-sizing: border-box; border: 0; color: #fff; }
:where(.nav-glass:not(dialog)) { position: relative; }   /* a <dialog> keeps the browser's own positioning */
:where(.nav-glass) > :where(*) { position: relative; z-index: 3; }

.nav-glass {
  /* Optics (read by liquid-glass.js; plain px numbers, no calc) */
  --lg-depth: 25px;        /* how far in from the edge the backdrop bends (the app's refraction height) */
  --lg-pull: 1.25;         /* how far the very edge reaches in, as a multiple of the depth; 0 turns the lens off */
  --lg-curve: 2.7;         /* how quickly that reach dies away toward the centre */
  /* Optional material */
  --lg-blur: 0px;
  --lg-saturate: 1;
  --lg-wash: transparent;
  /* Light. The app's contour is a ring 0.6pt wide. A browser can only draw whole device
     pixels, so the ring is drawn --lg-px wide (set per pixel density below) and its light
     is scaled by --lg-gain to carry exactly what a 0.6px ring would. */
  --lg-line: .6;           /* the contour's true width, in px */
  --lg-px: 1;              /* the width it is drawn at, in px */
  --lg-gain: calc(var(--lg-line) / var(--lg-px));
  --lg-angle: to bottom right;   /* the script sets the app's exact angle for each element's proportions */
  --lg-contour: linear-gradient(var(--lg-angle), rgba(255,255,255,calc(.2 * var(--lg-gain))) 5.2%, rgba(255,255,255,calc(.15 * var(--lg-gain))) 32.1%, rgba(255,255,255,calc(.14 * var(--lg-gain))) 66.1%, rgba(255,255,255,calc(.18 * var(--lg-gain))) 94.8%);
  --lg-spot: 150px;
  --lg-x: 50%; --lg-y: 50%; --lg-hot: 0;

  background: var(--lg-wash);
  /* Before the script runs, and without it: the frost alone. */
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

@media (min-resolution: 2dppx) { .nav-glass { --lg-px: .5; } }       /* one device pixel on a Retina display */
@media (min-resolution: 3dppx) { .nav-glass { --lg-px: .6667; } }    /* two device pixels on a phone */
@media (min-resolution: 2dppx) and (max-resolution: 2.99dppx) { .nav-glass--button, .nav-glass--icon { --lg-px: 1; } }   /* 0.8px is nearer two device pixels than one */

/* Contour: a hairline ring whose light varies along the diagonal and never falls to
   zero, so it reads as one continuous glass edge, not corner glints and not a border. */
.nav-glass::before {
  content: ''; position: absolute; inset: 0; z-index: 2; box-sizing: border-box; border-radius: inherit; pointer-events: none;
  /* Drawn as a transparent border, because browsers snap border widths to whole device
     pixels; the gradient shows only in the border's band. */
  border: calc(var(--lg-px) * 1px) solid transparent;
  background: var(--lg-contour) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Pointer light: broad enough that crossing a surface lights a region, not a dot. */
.nav-glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .2s cubic-bezier(.333,0,.667,1);
  background: radial-gradient(var(--lg-spot) circle at var(--lg-x) var(--lg-y), rgba(255,255,255,.075), rgba(255,255,255,.06) 15%, rgba(255,255,255,.038) 34%, rgba(255,255,255,.018) 56%, rgba(255,255,255,.005) 78%, transparent 100%);
}
@media (hover: hover) { .nav-glass:hover::after { opacity: 1; } }

/* Mirror mode (liquid-glass.js, data-lg-backdrop): a refracted copy of a known backdrop,
   with the wash laid over it, standing in for the lens where the browser has none. */
.nav-glass__mirror { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.nav-glass__mirror > span { position: absolute; inset: 0; }
.nav-glass__mirror::after { content: ''; position: absolute; inset: 0; background: var(--lg-wash); }

/* A surface that holds other glass (the notch, the dialog, the pill) keeps its lens and
   wash on this layer behind its content, added by the script. A backdrop filter on the
   surface itself would cut its children off from the page, and glass or blur inside it
   would come out as a flat, opaque patch. */
.nav-glass__lens { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--lg-wash); }
.nav-glass[data-lg-layer] { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Info card ----------
   The cinematic overview column: untinted glass. The lens, the contour, the pointer
   light, and (a choice for the website, not the app) a subtle blur of what is behind it,
   so the body reads as glass and text sits a little more quietly on it. */
.nav-glass--card { --lg-blur: 4px; border-radius: 28px; padding: 28px; color: rgba(255,255,255,.9); }
:where(a.nav-glass--card) { display: block; text-decoration: none; }   /* a whole card that is a link */
.nav-glass--card :is(h2, h3, h4) { color: #fff; }

/* ---------- Button ----------
   The cinematic start button: a faint wash, a contour lit from the upper left and the
   lower right and almost dark between, a tighter body light, a rim highlight under the
   pointer, a slight give on hover and a firmer one on press. Inside, a subtle blur of
   what is behind it (a choice for the website). */
.nav-glass--button, .nav-glass--icon {
  --lg-wash: rgba(255,255,255,.08);
  --lg-blur: 4px;
  --lg-depth: 14px;
  --lg-spot: 100px;
  --lg-line: .8;           /* the start button's contour is 0.8pt wide */
  --lg-contour:
    radial-gradient(64px circle at var(--lg-x) var(--lg-y), rgba(255,255,255,calc(var(--lg-hot) / var(--lg-px))), rgba(255,255,255,calc(var(--lg-hot) * .42 / var(--lg-px))) 38%, transparent 100%),
    linear-gradient(to bottom right, rgba(255,255,255,calc(.16 * var(--lg-gain))), rgba(255,255,255,calc(.015 * var(--lg-gain))) 48%, rgba(255,255,255,calc(.2 * var(--lg-gain))));
  --lg-give: .982;         /* 0.8px of a 44px control; use 1 - 0.8 / height for other heights */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: --lg-hot .24s cubic-bezier(.42,0,.58,1), transform .24s cubic-bezier(.42,0,.58,1);
}
.nav-glass--button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 32px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
}
.nav-glass--button::after, .nav-glass--icon::after {
  transition: opacity .24s cubic-bezier(.42,0,.58,1);
  background: radial-gradient(var(--lg-spot) circle at var(--lg-x) var(--lg-y), rgba(255,255,255,.075), rgba(255,255,255,.068) 14%, rgba(255,255,255,.047) 32%, rgba(255,255,255,.023) 54%, rgba(255,255,255,.005) 78%, transparent 100%);
}
@media (hover: hover) {
  .nav-glass--button:hover, .nav-glass--icon:hover { --lg-hot: .12; transform: scale(var(--lg-give)); }
  .nav-glass--button:hover:active, .nav-glass--icon:hover:active { --lg-hot: .18; }
}
.nav-glass--button:active, .nav-glass--icon:active { transform: scale(.95); transition-duration: .12s; }
.nav-glass--button:disabled, .nav-glass--icon:disabled { color: rgba(255,255,255,.45); pointer-events: none; }
.nav-glass:focus-visible, .nav-glass :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The start button's arrow: the label slides aside and the arrow eases in. Add
   .nav-glass--arrow and the script wraps the label and appends the arrow. */
.nav-glass__label { display: inline-flex; align-items: center; transition: transform .25s cubic-bezier(.333,0,.667,1); }
.nav-glass__arrow { position: absolute; left: 100%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(8px); transition: opacity .25s cubic-bezier(.333,0,.667,1), transform .25s cubic-bezier(.333,0,.667,1); }
@media (hover: hover) {
  .nav-glass--arrow:hover .nav-glass__label { transform: translateX(-14px); }
  .nav-glass--arrow:hover .nav-glass__arrow { opacity: 1; transform: none; }
}

/* ---------- Icon button ----------
   A glass disc holding a plain white line icon. The icon is ink, not glass. */
.nav-glass--icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; --lg-give: .982; }
.nav-glass--icon > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Glass glyph ----------
   An icon made of the glass itself (the hero waveform and pointer, the padlock). The
   backdrop bends and softens through its outline; the body is an even trace of white
   (never a gradient); and what makes it read is its edge: the contour, a line of light
   brightest at the upper left and never flat, with a broad faint ring of the same light
   inside it that gives the glass thickness. It has to be seen at a glance beside white
   type, on flat black as well as over imagery, so its edge is stronger than a card's.
   Markup: <span class="nav-glass lg--glyph"><svg class="nav-glass-glyph">…filled shapes…</svg></span> */
.nav-glass--glyph {
  --lg-depth: 10px; --lg-blur: 4px;
  --lg-glyph-tint: .08;    /* the body: white at this strength, flat */
  --lg-glyph-edge: .7;     /* the contour at its brightest (upper left); it falls to 70% of this */
  --lg-glyph-line: 1;      /* the contour's width, px */
  --lg-glyph-rim: .12;     /* the inner ring's strength; it is four contour-widths wide */
  display: inline-block; -webkit-mask: center / 100% 100% no-repeat; mask: center / 100% 100% no-repeat;
}
.nav-glass--glyph::before, .nav-glass--glyph::after { display: none; }
svg.nav-glass-glyph { display: block; width: 100%; height: 100%; }
/* The shapes carry no paint of their own; each layer's paint is inherited from its <use>. */
svg.nav-glass-glyph { fill: rgba(255,255,255,var(--lg-glyph-tint, .08)); }
.nav-glass-glyph__edge { fill: none; stroke-width: var(--lg-glyph-hairline, 0); stroke-opacity: var(--lg-glyph-edge, .7); }
.nav-glass-glyph__rim { fill: none; stroke-width: calc(var(--lg-glyph-hairline, 0) * 4); stroke-opacity: var(--lg-glyph-rim, .12); }

/* ---------- Navigation pill ----------
   The one surface that travels over content, so it alone is tinted and frosted. */
.nav-glass--pill { --lg-wash: rgba(12,12,14,.72); --lg-blur: 22px; --lg-saturate: 1.8; --lg-depth: 18px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Rows inside an expanded pill: quiet text links, not glass. */
.nav-glass-pill-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 12px; color: rgba(255,255,255,.72); font-size: 16px; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
@media (hover: hover) { .nav-glass-pill-link:hover { color: #fff; background: rgba(255,255,255,.08); } }
.nav-glass-pill-link > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Segmented tabs ----------
   A glass track; the selected option is a lighter capsule that travels between tabs,
   leaving at once and landing softly. The script creates and places the capsule. */
.nav-glass--tabs { --lg-wash: rgba(255,255,255,.06); --lg-blur: 4px; --lg-depth: 14px; display: inline-flex; padding: 4px; border-radius: 28px; }
.nav-glass--tabs > button { height: 40px; padding: 0 24px; border: 0; border-radius: 24px; background: none; font: inherit; font-size: 16px; color: rgba(255,255,255,.62); cursor: pointer; transition: color .3s cubic-bezier(.2,.8,.2,1); }
.nav-glass--tabs > button[aria-pressed=true] { color: #fff; }
@media (hover: hover) { .nav-glass--tabs > button:hover { color: #fff; } }
.nav-glass-tabs__thumb { position: absolute; z-index: 2; top: 4px; left: 0; height: calc(100% - 8px); width: var(--lg-thumb-w, 0px); transform: translateX(var(--lg-thumb-x, 0px)); border-radius: 24px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; }
.nav-glass--tabs[data-lg-ready] .nav-glass-tabs__thumb { transition: transform .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1); }

/* ---------- Dialog ----------
   A modal holds text over a whole page, so it is tinted and frosted like the pill. */
.nav-glass--dialog { --lg-wash: rgba(22,22,25,.72); --lg-blur: 30px; --lg-saturate: 1.6; border-radius: 28px; padding: 32px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.nav-glass--dialog::backdrop { background: rgba(0,0,0,.6); }

/* ---------- Glass grid lines ----------
   Not a surface: a list whose dividing lines are the contour's light. The list is a
   field of light, its cells are the page's colour, and the light shows only in the
   1px gaps: brighter from the upper left and lower right, fading out at both ends,
   and a little stronger near the pointer. Cells must stay opaque. */
.nav-glass-grid {
  --lg-page: #000; --lg-x: 50%; --lg-y: 50%; --lg-hot: 0;
  list-style: none; margin: 0; padding: 1px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background:
    linear-gradient(90deg, var(--lg-page) 0, transparent 18%, transparent 82%, var(--lg-page) 100%),
    radial-gradient(220px circle at var(--lg-x) var(--lg-y), rgba(255,255,255,calc(.42 * var(--lg-hot))), transparent 72%),
    radial-gradient(58% 150% at 30% 0%, rgba(255,255,255,.24), transparent 72%),
    radial-gradient(58% 150% at 72% 100%, rgba(255,255,255,.2), transparent 72%),
    linear-gradient(rgba(255,255,255,.085), rgba(255,255,255,.085));
  transition: --lg-hot .4s ease;
}
.nav-glass-grid > * { position: relative; padding: 28px 20px 32px; background: var(--lg-page); text-align: center; }
.nav-glass-grid > * > svg { display: block; width: 24px; height: 24px; margin: 0 auto 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: opacity .2s; }
.nav-glass-grid > *::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.05)); opacity: 0; transition: opacity .45s cubic-bezier(.6,.6,0,1); }
@media (hover: hover) { .nav-glass-grid > *:hover::after, .nav-glass-grid > *:hover > svg { opacity: 1; } }

/* ---------- Notch ----------
   The app's notch at 1.25x, matched to captures of the real one on the desktop
   (references/source-map.md). The glass itself is clear: it adds no tint. The body is
   nothing but black laid over it, solid through the 48px camera row and thinning to 55% at
   the middle and 10% at the foot, so the lower part is see-through and what is behind it
   shows, bent at the rim. No blur for now (the app's notch has about 3pt; the website's
   has none, by the owner's choice). No contour; a light on the lower edge only.
   The element is the notch's body; the two shoulders that flare into the bezel are solid
   black (they lie in the camera row) and hang outside it. */
.nav-glass--notch {
  --lg-wash: linear-gradient(180deg, #000 0, #000 48px, rgba(0,0,0,.55) calc(50% + 24px), rgba(0,0,0,.1) 100%);
  --lg-blur: 0px; --lg-depth: 37px;
  display: flow-root; padding: 0 15px; border-radius: 0 0 28px 28px; font-size: 15px; line-height: 20px; letter-spacing: -.005em;
}
.nav-glass--notch::before { background: linear-gradient(transparent 45%, rgba(255,255,255,.3) 100%) border-box; }
.nav-glass--notch::after {
  inset: 0 -18px auto; height: 18px; opacity: 1; border-radius: 0; transition: none;
  background:
    radial-gradient(circle at 0 100%, transparent 17.6px, #000 18.4px) left top / 18px 18px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 17.6px, #000 18.4px) right top / 18px 18px no-repeat;
}
/* Inside the notch nothing is glass. The card is a dark face; the tools and actions carry
   only a trace of fill and a hairline, so they sit on the shell without blocking it (the
   app's are stronger: black 60% discs and a white 14% primary), and a subtle blur of what
   is behind them, so their labels stay readable over a busy wallpaper. */
.nav-glass--notch :where(p) { margin: 0; }
.nav-glass-notch-card__head { height: 40px; display: flex; align-items: center; gap: 10px; font-size: 17.5px; line-height: 22.5px; font-weight: 500; letter-spacing: -.01em; }
.nav-glass-notch-card__head > :where(img, svg) { width: 17.5px; height: 17.5px; }
.nav-glass-notch-card { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; padding: 9px 14px 14px; }
.nav-glass-notch-tool { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background .2s, transform .09s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .nav-glass-notch-tool:hover { background: rgba(255,255,255,.12); } }
.nav-glass-notch-tool:active { background: rgba(255,255,255,.16); transform: scale(.95); }
.nav-glass-notch-tool[aria-pressed=true] { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
/* The asker's words: a solid bubble, flush right, hugging its text. */
.nav-glass-notch-bubble { align-self: flex-end; width: fit-content; max-width: 78%; margin: 0 0 0 auto; padding: 5px 15px; border-radius: 15px; background: #303030; color: #e8e8e8; text-align: right; text-wrap: balance; }
/* Actions: an outlined capsule; the primary one adds a trace of fill, never a solid one. */
.nav-glass-notch-button { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 15px; border-radius: 15px; border: 1px solid rgba(255,255,255,.15); background: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s, transform .09s cubic-bezier(.2,.8,.2,1); }
.nav-glass-notch-button--primary { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
@media (hover: hover) {
  .nav-glass-notch-button:hover { background: rgba(255,255,255,.08); }
  .nav-glass-notch-button--primary:hover { background: rgba(255,255,255,.14); }
}
.nav-glass-notch-button:active { transform: scale(.95); }
.nav-glass-notch-button > kbd { font: inherit; font-weight: 400; color: rgba(255,255,255,.5); }
.nav-glass-notch-button--primary > kbd { color: rgba(255,255,255,.62); }
/* Source chips under an answer. */
.nav-glass-notch-chip { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 7.5px 0 5px; border-radius: 12.5px; background: rgba(255,255,255,.12); color: #dedede; }
.nav-glass-notch-chip > svg, .nav-glass-notch-chip > img { width: 15px; height: 15px; }
.nav-glass-notch-tool:focus-visible, .nav-glass-notch-button:focus-visible, .nav-glass--tabs > button:focus-visible, .nav-glass-pill-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-glass-notch-tool > svg { width: 17.5px; height: 17.5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-glass, .nav-glass::after, .nav-glass__label, .nav-glass__arrow, .nav-glass-tabs__thumb, .nav-glass--tabs > button, .nav-glass-grid, .nav-glass-notch-button, .nav-glass-notch-tool { transition: none !important; }
  .nav-glass-notch-button:active, .nav-glass-notch-tool:active { transform: none; }
  .nav-glass--button:hover, .nav-glass--button:active, .nav-glass--icon:hover, .nav-glass--icon:active { transform: none; }
}
/* Reduce Transparency: the app's opaque body (#303030) under its wash. */
@media (prefers-reduced-transparency: reduce) {
  .nav-glass { background: #373737; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-glass-notch-tool, .nav-glass-notch-button { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-glass--pill, .nav-glass--notch, .nav-glass--dialog { background: #0b0b0d; }
  .nav-glass--glyph { background: none; }
}
@media (prefers-contrast: more) {
  .nav-glass { --lg-px: 1; --lg-contour: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)); }
  .nav-glass--notch, .nav-glass--notch > .nav-glass__lens { background: #0b0b0d; }
}