/* Clear optical material. Refraction: @avenra/liquid-glass, MIT.
   Tint and foreground contrast are independent from the optical backdrop. */
:root {
  --glass-fill:light-dark(rgb(255 255 255 / .09),rgb(16 23 33 / .16));
  --glass-edge:light-dark(rgb(255 255 255 / .75),rgb(255 255 255 / .32));
  --glass-light:light-dark(rgb(255 255 255 / .72),rgb(255 255 255 / .32));
  --glass-rim:light-dark(rgb(31 52 77 / .16),rgb(0 0 0 / .4));
  --glass-shadow:0 8px 24px -8px #162c4430,0 1px 3px #162c4414;
  --glass-selection:light-dark(rgb(255 255 255 / .14),rgb(255 255 255 / .09));
  --glass-text-halo:light-dark(#ffffffa0,#00000080);
  --glass-sheen:none;
  --glass-blur:1.6px;
  --glass-optical-blur:.7;
}
body {
  background-image:radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 48%),radial-gradient(ellipse at 95% 65%,color-mix(in srgb,var(--jade) 6%,transparent),transparent 48%);
  background-attachment:fixed;
}
.top {background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 96%,transparent),color-mix(in srgb,var(--bg) 72%,transparent) 60%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Repeat component selectors to replace the former frosted material cleanly. */
.liquid-glass,.nav-sections,.account-menu,.guide-nav.moving-selection,
.mobile-tabs.moving-selection,#context-dock>.glass-surface,.login-shell>.login {
  background:var(--glass-fill);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 .75px .5px var(--glass-light),inset 0 -.75px .5px var(--glass-rim),var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-refraction,blur(var(--glass-blur)) saturate(112%));
  backdrop-filter:var(--glass-refraction,blur(var(--glass-blur)) saturate(112%));
}
.nav-sections,#context-dock>.glass-surface,.login-shell>.login {position:relative}
/* A rim highlight, not a white wash across the center of the glass. */
.liquid-glass::after {
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 140px 90px at var(--light-x,20%) var(--light-y,0%),#ffffffb0,transparent 80%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.nav-sections {padding:5px}
.nav-sections.selection-ready::before,.mobile-tabs.selection-ready::before {
  background:var(--glass-selection);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px .5px var(--glass-light),0 2px 5px #16243a0b;
}
.nav-sections button,.mobile-tabs button {color:var(--text-soft);font-weight:650;min-height:44px}
.nav-sections button[aria-current],.mobile-tabs button[aria-current] {color:var(--brand)}
/* Hover stays lighter than the persistent selected glass capsule. */
.nav .nav-sections button,.mobile-tabs button {
  transition:background-color 180ms ease,color 180ms ease;
}
@media(hover:hover) {
  .nav .nav-sections button:hover,.mobile-tabs button:hover {
    background:light-dark(rgb(25 45 65 / .035),rgb(255 255 255 / .045));
    color:var(--text);
  }
  .nav .nav-sections button[aria-current]:hover,.mobile-tabs button[aria-current]:hover {
    background:transparent;color:var(--brand);
  }
}
.nav .nav-sections button:active,.mobile-tabs button:active {
  background:light-dark(rgb(25 45 65 / .055),rgb(255 255 255 / .07));
}

.liquid-glass>button,.liquid-glass>a,#context-dock>.glass-surface>span {
  text-shadow:0 0 3px var(--glass-text-halo),0 1px 1px var(--glass-text-halo),.5px 0 var(--glass-text-halo),-.5px 0 var(--glass-text-halo);
}
.liquid-glass .btn.primary {text-shadow:none}
.nav .account-toggle.liquid-glass {--glass-blur:2.5px;--glass-optical-blur:1.2;position:relative;min-height:44px;background:var(--glass-fill)!important;border:1px solid var(--glass-edge)}
.account-menu {--glass-fill:light-dark(rgb(255 255 255 / .16),rgb(16 23 33 / .16));--glass-blur:4px;--glass-optical-blur:2;top:calc(100% + 8px);padding:7px;border-radius:22px;color:var(--text)}
.account-menu button,.account-menu a {border-radius:14px;min-height:44px;font-weight:550}
.account-menu button:disabled {opacity:.65;cursor:default}
.account-menu button:hover,.account-menu a:hover {background:color-mix(in srgb,var(--brand) 12%,transparent)}
#context-dock>.glass-surface {padding:.7rem;gap:.6rem;border-radius:30px;color:var(--text)}
#context-dock .btn {min-height:46px}
#context-dock>.glass-surface>span {padding:4px 8px;border-radius:99px;background:color-mix(in srgb,var(--surface) 24%,transparent)}
#context-dock .glass-surface .btn:not(.primary) {
  background:color-mix(in srgb,var(--surface) 32%,transparent);border-color:var(--glass-edge);
  box-shadow:inset 0 1px .5px var(--glass-light);color:var(--text);
}
#context-dock .glass-surface .btn.primary {background:var(--brand);color:var(--on-brand);border-color:transparent}
.btn {transition:transform 180ms var(--motion-ease),background-color 180ms,box-shadow 180ms}
.btn:active:not(:disabled),#context-dock .btn:active:not(:disabled) {transform:scale(.97)}
.mobile-tabs button {display:flex;align-items:center;justify-content:center;gap:8px}
.mobile-tabs svg {width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.login-shell>.login {border-radius:30px;padding:2rem}
.login input {background:color-mix(in srgb,var(--surface) 40%,transparent);border-radius:14px;min-height:50px}
@media(max-width:760px) {
  .mobile-tabs.moving-selection {--glass-blur:1.4px;--glass-optical-blur:.55;width:min(320px,calc(100% - 40px));padding:7px;min-height:64px}
  .mobile-tabs button {min-height:48px}
  .guide-nav.moving-selection {padding:5px;border-radius:22px}
  .login-shell>.login {padding:1.5rem;border-radius:26px}
}
:root[data-glass=off] {--glass-fill:var(--surface);--glass-selection:var(--surface-soft);--glass-edge:var(--border);--glass-light:transparent}
:root[data-glass=off] .liquid-glass {background:var(--surface)!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
:root[data-glass=off] .liquid-glass::after {display:none}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root {--glass-fill:var(--surface);--glass-selection:var(--surface-soft);--glass-edge:var(--border);--glass-light:transparent}
  .liquid-glass,.nav .account-toggle.liquid-glass {background:var(--surface)!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .liquid-glass::after {display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root {--glass-fill:var(--surface);--glass-selection:var(--surface-soft)}
}
@media(forced-colors:active) {
  .liquid-glass,.nav .account-toggle.liquid-glass {background:Canvas!important;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .liquid-glass::after {display:none}
  .selection-ready::before {background:Canvas;border:2px solid Highlight;box-shadow:none}
}
@media(prefers-reduced-motion:reduce) {
  .liquid-glass,.liquid-glass::before,.liquid-glass::after,.btn {transition:none!important;animation:none!important}
  .btn:active:not(:disabled),#context-dock .btn:active:not(:disabled) {transform:none}
}