/* Liquid glass surfaces for the Android app. Only active once /assets/glass.js sets html.lg
   (in-app only). html.lg-refract = real refraction via SVG backdrop filter; html.lg-flat = blur fallback. */
:root {
  --lg-angle: 135deg;
  --lg-tint: rgba(20, 22, 28, 0.30);
  --lg-tint-strong: rgba(18, 20, 26, 0.58);
  --lg-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lg .lg-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%),
    var(--lg-tint) !important;
  border-color: transparent !important;
  box-shadow: var(--lg-shadow), inset 0 0 14px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(170%) !important;
}
.lg-refract .lg-surface {
  backdrop-filter: var(--lg-filter, blur(8px) saturate(170%)) !important;
  -webkit-backdrop-filter: var(--lg-filter, blur(8px) saturate(170%)) !important;
}

/* Specular rim: a 1px gradient ring, brightest where the light (device tilt) hits */
.lg-rim {
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(var(--lg-angle),
    rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.14) 80%, rgba(255, 255, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Elements whose glass sits on a backing layer (see "layer" in glass.js) */
.lg .lg-host {
  background: transparent !important; border-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: var(--lg-shadow) !important;
}
.lg-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.lg .lg-bg.lg-surface { box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.05) !important; }

/* ===== Tab bar ===== */
.lg .app-tabbar { height: 64px; padding: 6px; }
.lg .app-tabbar .tab-btn { color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.lg .app-tabbar .tab-btn.active { color: #fff; }

/* Resting selection: a soft frosted capsule. Pressing lifts it into a clear magnifying lens. */
.lg .tab-indicator {
  background: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.25s, box-shadow 0.25s, opacity 0.2s;
}
.lg .tab-indicator .lg-rim { opacity: 0; transition: opacity 0.2s; }
.lg .app-tabbar.lg-pressing .tab-indicator,
.lg .app-tabbar.lg-travel .tab-indicator {
  z-index: 2; pointer-events: none;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.2s, box-shadow 0.2s;
}
.lg-refract .app-tabbar.lg-pressing .tab-indicator,
.lg-refract .app-tabbar.lg-travel .tab-indicator {
  backdrop-filter: var(--lg-filter) !important; -webkit-backdrop-filter: var(--lg-filter) !important;
}
.lg .app-tabbar.lg-travel .tab-indicator { transform: translateX(calc(var(--tab-i, 0) * 100%)) scale(1.14, 1.22); transition: transform 0.26s cubic-bezier(0.3, 1.3, 0.5, 1); }
.lg .app-tabbar.lg-pressing .tab-indicator .lg-rim,
.lg .app-tabbar.lg-travel .tab-indicator .lg-rim { opacity: 1; }
.lg .app-tabbar.lg-pressing .tab-btn svg { transform: none; }

/* ===== Top bars float as capsules ===== */
.lg #top-bar {
  top: calc(6px + env(safe-area-inset-top)); left: 10px; right: 10px;
  height: calc(var(--nav-h) - 6px);
  border-radius: 22px; padding: 0 8px 0 14px;
}
.lg nav.top-bar:not(#top-bar) {
  top: 6px; margin: 6px 10px 0;
  border-radius: 22px;
}
.lg #filter-bar {
  top: calc(var(--nav-h) + 6px);
  margin: 0 -6px 24px; padding: 10px;
  border-radius: 22px;
}

/* ===== Sheets, toasts, dialogs ===== */
.lg .toast, .lg .update-sheet { --lg-tint: var(--lg-tint-strong); }
.lg .update-sheet { border-radius: 24px; }
.lg .update-sheet button { border-radius: 14px; }
.lg .update-sheet button:not(.primary) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.lg .modal { background: rgba(0, 0, 0, 0.42); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lg .modal-card { --lg-tint: var(--lg-tint-strong); border-radius: 26px; }
.lg .modal-card .code-display, .lg .modal-card .code-input { background: rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.14); }
.lg .modal-card .btn-primary-light, .lg .modal-card .btn-ghost { border-radius: 14px; }
.lg #back-to-top { border-radius: 50%; }