/* liquid-glass.css — one shared Liquid Glass look for sheets.works controls (menus, capsules,
   buttons, toggles, sheets). Glass goes on chrome only, never on body text or charts.
   Fallbacks: solid surface when backdrop-filter is missing or the reader asks for less
   transparency. Refraction (SVG displacement) is opt-in and Chromium-only; see liquid-glass.js. */

:root{
  --lg-tint: rgba(255,255,255,.22);
  --lg-tint-strong: rgba(255,255,255,.55);
  --lg-edge: rgba(255,255,255,.7);
  --lg-shade: rgba(0,0,0,.10);
  --lg-ink: #111;
  --lg-sub: rgba(0,0,0,.55);
  --lg-solid: rgba(250,250,250,.96);
  --lg-blur: 16px;
  --lg-radius: 999px;
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
.lg-dark{
  --lg-tint: rgba(30,30,32,.32);
  --lg-tint-strong: rgba(30,30,32,.62);
  --lg-edge: rgba(255,255,255,.28);
  --lg-shade: rgba(0,0,0,.35);
  --lg-ink: #fff;
  --lg-sub: rgba(255,255,255,.65);
  --lg-solid: rgba(28,28,30,.96);
}

.lg{
  position: relative;
  isolation: isolate;
  color: var(--lg-ink);
  font-family: var(--lg-font);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(185%) brightness(1.06);
  backdrop-filter: blur(var(--lg-blur)) saturate(185%) brightness(1.06);
  border-radius: var(--lg-radius);
  box-shadow:
    inset 0 1px 0 var(--lg-edge),              /* top specular rim */
    inset 0 -1px 0 rgba(255,255,255,.18),       /* bottom inner rim */
    inset 0 0 0 .5px rgba(255,255,255,.35),     /* hairline */
    0 1px 2px var(--lg-shade),
    0 10px 30px var(--lg-shade);
  -webkit-tap-highlight-color: transparent;
}
/* light sweep across the upper half, the "liquid" sheen */
.lg::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  opacity:.75;
}
.lg-dark .lg::before,.lg.lg-dark::before{opacity:.35}

/* refraction, only switched on by liquid-glass.js in Chromium */
.lg-refract{
  -webkit-backdrop-filter: url(#lg-refract) blur(calc(var(--lg-blur) * .6)) saturate(185%);
  backdrop-filter: url(#lg-refract) blur(calc(var(--lg-blur) * .6)) saturate(185%);
}

/* components */
.lg-capsule{display:flex;align-items:center;gap:6px;height:48px;padding:0 6px 0 16px}
.lg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 16px;border:0;cursor:pointer;
  font:600 15px/1 var(--lg-font);color:var(--lg-ink);background:transparent;border-radius:999px;
  transition:transform .18s cubic-bezier(.3,.7,.4,1.4), background-color .2s;
}
.lg-btn:active{transform:scale(.94)}
.lg-btn.lg{background:var(--lg-tint)}
.lg-btn:focus-visible{outline:2px solid #0a84ff;outline-offset:2px}
.lg-round{width:44px;padding:0}
.lg-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;font:600 13px/1 var(--lg-font);white-space:nowrap}

/* switch */
.lg-switch{position:relative;width:51px;height:31px;flex:none;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(120,120,128,.32);transition:background-color .25s}
.lg-switch[aria-checked="true"]{background:#34c759}
.lg-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .28s cubic-bezier(.3,.7,.4,1.25)}
.lg-switch[aria-checked="true"]::after{transform:translateX(20px)}
.lg-switch:focus-visible{outline:2px solid #0a84ff;outline-offset:2px}

/* bottom sheet */
.lg-scrim{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .25s}
.lg-scrim.on{opacity:1;pointer-events:auto}
.lg-sheet{
  position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:9999;
  border-radius:28px;padding:10px 8px 8px;
  transform:translateY(calc(100% + 24px));transition:transform .38s cubic-bezier(.2,.9,.25,1.08);
  --lg-tint: rgba(250,250,250,.62);
}
.lg-sheet.on{transform:none}
.lg-sheet .lg-grab{width:36px;height:5px;border-radius:3px;background:rgba(0,0,0,.18);margin:2px auto 8px}
.lg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px;border-radius:16px;
  font:500 17px/1.25 var(--lg-font);color:var(--lg-ink);text-decoration:none}
.lg-row small{display:block;font-size:13px;color:var(--lg-sub);margin-top:2px}
a.lg-row:active,button.lg-row:active{background:rgba(0,0,0,.06)}
.lg-sep{height:.5px;background:rgba(0,0,0,.12);margin:2px 14px}

/* fallbacks */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .lg{background:var(--lg-solid)}
}
@media (prefers-reduced-transparency: reduce){
  .lg,.lg-sheet{background:var(--lg-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion: reduce){
  .lg-btn,.lg-switch::after,.lg-sheet,.lg-scrim{transition:none!important}
}