/* Optical profile attribution: see LICENSE.glisse.txt. All content stays sharp. */
.tm-liquid {
  --tm-liquid-fill: var(--glass-bg, var(--nav-bg));
  --tm-liquid-blur: 16px;
  --tm-liquid-light-x: 22%;
  --tm-liquid-light-y: 12%;
  --tm-liquid-press: 0;
  isolation: isolate;
  background-color: var(--tm-liquid-fill);
  -webkit-backdrop-filter: blur(var(--tm-liquid-blur)) saturate(1.12);
  backdrop-filter: blur(var(--tm-liquid-blur)) saturate(1.12);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), var(--shadow-sm, 0 0 transparent);
}
.tm-liquid[data-tm-liquid-kind="nav"],
.tm-liquid[data-tm-liquid-kind="menu"] { --tm-liquid-fill: var(--nav-bg, var(--glass-bg)); }
.tm-liquid[data-tm-liquid-kind="input"] { --tm-liquid-blur: 12px; }
.tm-liquid[data-tm-liquid-kind="selection"],
.tm-liquid[data-tm-liquid-kind="thumb"] {
  --tm-liquid-fill: color-mix(in srgb, var(--accent-soft) 24%, var(--glass-bg));
  --tm-liquid-blur: 8px;
}
.tm-liquid > .tm-liquid__backdrop,
.tm-liquid > .tm-liquid__rim {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}
.tm-liquid > .tm-liquid__backdrop { display: none; z-index: -1; }
.tm-liquid > .tm-liquid__rim {
  z-index: 2;
  border: 1px solid var(--border);
  background-image: var(--tm-liquid-rim-image, none);
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent);
}
/* A masked border glint follows the pointer without tinting labels or icons. */
.tm-liquid > .tm-liquid__rim::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--tm-liquid-light-x) var(--tm-liquid-light-y), color-mix(in srgb, var(--text) 27%, transparent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.62 + var(--tm-liquid-press) * .18);
}
.tm-liquid[data-tm-liquid-optics="active"] {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tm-liquid[data-tm-liquid-optics="active"] > .tm-liquid__backdrop {
  display: block;
  background-color: var(--tm-liquid-fill);
  -webkit-backdrop-filter: blur(var(--tm-liquid-blur)) var(--tm-liquid-optical-filter) saturate(1.12);
  backdrop-filter: blur(var(--tm-liquid-blur)) var(--tm-liquid-optical-filter) saturate(1.12);
}
/* The fallback exists in CSS before JS runs, including constrained app mode. */
:is(html, body)[data-app-lite]:not([data-app-lite="false"]):not([data-app-lite="0"]) .tm-liquid,
.tm-liquid[data-app-lite]:not([data-app-lite="false"]):not([data-app-lite="0"]),
.tm-liquid[data-tm-liquid-quality="solid"] {
  background-color: var(--bg, var(--nav-bg, var(--glass-bg)));
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:is(html, body)[data-app-lite]:not([data-app-lite="false"]):not([data-app-lite="0"]) .tm-liquid > .tm-liquid__backdrop,
.tm-liquid[data-app-lite]:not([data-app-lite="false"]):not([data-app-lite="0"]) > .tm-liquid__backdrop,
.tm-liquid[data-tm-liquid-quality="solid"] > .tm-liquid__backdrop { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tm-liquid > .tm-liquid__rim::after { background-position: center; opacity: .62; }
}
@media (prefers-reduced-transparency: reduce) {
  .tm-liquid { background-color: var(--bg, var(--nav-bg, var(--glass-bg))) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .tm-liquid > .tm-liquid__backdrop { display: none !important; }
  .tm-liquid > .tm-liquid__rim::after { display: none; }
}
@media (forced-colors: active) {
  .tm-liquid { background-color: Canvas !important; box-shadow: none; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .tm-liquid > .tm-liquid__backdrop { display: none !important; }
  .tm-liquid > .tm-liquid__rim { border-color: CanvasText; background: none; box-shadow: none; }
  .tm-liquid > .tm-liquid__rim::after { display: none; }
}