/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — chrome-surface material · P7 (R289/§282 · J7)

   Scope (HIG "Materials", fetched 2026-08-17): glass lives on CHROME ONLY — the file-tools pill,
   the toolbar search field, the 3-dot button, menus/popovers. "Don't use Liquid Glass in the
   content layer" — list rows never get it. Regular variant (legibility), never clear.

   TIERS (fallback-first; each higher tier is ADDITIVE so a failed layer can't take the base down):
     Tier 0  no backdrop-filter          → near-solid tint (color-mix on the estate tokens)
     Tier 1  @supports backdrop-filter   → blur+saturate frost — THE base engine for every browser
             (architecture from dpawlikowski/liquid-glass, MIT: frost on the element, refraction
              as a separate layer)
     Tier 2  @supports backdrop-filter:url() → SVG displacement refraction on a ::before layer
             (Chromium today; filter #lg-refract is injected by vault-overflow.js — the shuding/
              liquid-glass MIT radial lens map, feTurbulence fallback engine). FINE POINTERS ONLY:
             backdrop-filter re-filters every pixel beneath it every frame, and coarse-pointer
             devices are exactly the phones where that janks — glass stays STATIC there.
     Solid   prefers-reduced-transparency OR prefers-reduced-motion → no filters, opaque tint.

   CSP: style-src 'self' — no inline style attributes anywhere; dynamic menu position rides the
   --lgm-x/--lgm-y custom properties via el.style.setProperty (the vault's setVar idiom).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- Tier 0: base tint (renders everywhere, including engines with no backdrop-filter) ---- */
.lg-glass {
  position: relative;
  isolation: isolate;                     /* keeps the ::before refraction layer inside this element */
  border: 1px solid color-mix(in oklch, var(--ink), transparent 86%);
  background: color-mix(in oklch, var(--paper), transparent 10%);
  box-shadow: inset 0 1px 0 color-mix(in oklch, #fff, transparent 78%),
              inset 0 0 0 .5px color-mix(in oklch, #fff, transparent 92%),
              0 10px 30px -18px color-mix(in oklch, var(--ink), transparent 55%);
}
.lg-pill { border-radius: 999px; }

/* ---- Tier 1: the glass engine — blur+saturate frost (base for all engines that filter) ---- */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lg-glass {
    background: color-mix(in oklch, var(--paper), transparent 52%);
    -webkit-backdrop-filter: blur(14px) saturate(1.7);
    backdrop-filter: blur(14px) saturate(1.7);
  }
}

/* ---- Tier 2: refraction — additive layer, Chromium's backdrop-filter:url(), fine pointer only.
        A separate layer on purpose: if the engine parses url() but renders nothing (the classic
        @supports lie), only this pseudo fails — the Tier-1 frost beneath it survives. ---- */
@supports (backdrop-filter: url("#lg-refract")) {
  @media (pointer: fine) and (prefers-reduced-motion: no-preference) and (prefers-reduced-transparency: no-preference) {
    .lg-glass::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      border-radius: inherit; pointer-events: none;
      backdrop-filter: url("#lg-refract");
    }
  }
}

/* ---- Solid: reduced transparency / reduced motion — an honest opaque surface, stated LAST so it
        wins over both tiers regardless of engine support. ---- */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .lg-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .lg-glass::before { content: none; }
}

/* the injected filter-defs svg occupies no space and never catches a pointer */
.lg-svg-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   3-DOT OVERFLOW MENU (APG menu-button; built by vault-overflow.js)
   Wide: a fixed panel below/right-aligned to the button (position vars set via setProperty, the
   vault-menu idiom). ≤640px: a bottom sheet (views/convlist.js 3-dot precedent). Top layer via
   [popover] where the API exists; .is-open drives visibility on every path (vault.js idiom).
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.lg-menu {
  position: fixed; inset: auto; margin: 0; padding: 6px;
  left: var(--lgm-x, 0px); top: var(--lgm-y, 0px);
  min-inline-size: 236px; max-inline-size: min(320px, calc(100vw - 16px));
  max-block-size: calc(100dvh - var(--lgm-y, 0px) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 14px; color: var(--ink); z-index: 300;   /* no-popover fallback layer (vault precedent) */
}
.lg-menu:not(.is-open) { display: none; }
.lg-menu__grp { padding: 1px; }
.lg-menu__sep { block-size: 1px; margin: 5px 8px; background: color-mix(in oklch, var(--ink), transparent 88%); border: 0; }
.lg-menu__item {
  display: flex; align-items: center; gap: 10px; inline-size: 100%;
  padding: 8px 10px; border-radius: 9px; border: 0; background: transparent;
  font: 500 .85rem/1.3 var(--font); color: var(--ink); text-align: start; cursor: pointer;
}
.lg-menu__item .ico { inline-size: 15px; block-size: 15px; opacity: .85; flex: none; }
.lg-menu__item:hover, .lg-menu__item:focus-visible { background: color-mix(in oklch, var(--accent), transparent 85%); }
.lg-menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lg-menu__item[aria-disabled="true"] { opacity: .45; cursor: default; }
.lg-menu__item[aria-disabled="true"]:hover { background: transparent; }
.lg-menu__item--danger { color: oklch(0.6 0.2 25); }   /* the estate's .btn.danger hue (library.css:348) */
.lg-menu__item--danger:hover, .lg-menu__item--danger:focus-visible { background: color-mix(in oklch, oklch(0.6 0.2 25), transparent 88%); }
/* menuitemradio check indicator (Sort By submenu-in-place) */
.lg-menu__ind { inline-size: 6px; block-size: 6px; border-radius: 50%; background: transparent; flex: none; }
.lg-menu__item[aria-checked="true"] .lg-menu__ind { background: var(--accent); }
/* submenu-in-place disclosure chevron */
.lg-menu__chev { margin-inline-start: auto; inline-size: 14px; block-size: 14px; opacity: .7; transition: transform .18s; }
.lg-menu__item[aria-expanded="true"] .lg-menu__chev { transform: rotate(180deg); }
.lg-menu__sub { padding-inline-start: 16px; }
.lg-menu__sub[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lg-menu__chev { transition: none; } }
/* menu items are text-bearing menu targets — the vault context menu's coarse envelope (44px,
   r267-vault-menu-reach precedent), not the 36px button token */
@media (pointer: coarse) { .lg-menu__item { min-block-size: 44px; } }

/* narrow: bottom sheet — reachable by thumb, never clipped by the header (convlist precedent) */
@media (max-width: 640px) {
  .lg-menu {
    left: 8px; right: 8px; top: auto;
    inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
    min-inline-size: 0; max-inline-size: none;
    max-block-size: min(70dvh, 480px);
    border-radius: 16px;
  }
}