/* =====================================================================
   Liquid Glass Toolbar - round button + centre pill + round button
   (iOS 26 Photos app look). Pair with liquid-glass-toolbar.js.
   Adapted for the training calendar: the two round buttons are blank
   (no icon, no function - decoration only, kept for the visual balance
   of the three-piece layout), and the centre pill is a single button
   carrying the app's own "today" behaviour rather than a segmented
   control.
   ===================================================================== */

/* =====================================================================
   LIQUID GLASS CORE
   Any element with class="lg-surface" becomes glass. Give it two empty
   children first:  <span class="lg-surface__lens"></span>
                    <span class="lg-surface__frost"></span>
   Layers, bottom to top:
     lens   light blur (real refraction in Chrome/Edge via liquid-glass-toolbar.js)
     frost  heavy frost + tint, reaching the edge (3px soft lip)
     ::after  rim light + specular highlight
     your content
   ===================================================================== */
:root {
  --lg-lens-blur: 2px;
  --lg-lens-tint: rgba(255, 255, 255, 0.22);
  --lg-frost-blur: 12px;
  --lg-frost-tint: rgba(250, 250, 252, 0.66);
  --lg-frost-brightness: 1.04;
  --lg-saturate: 150%;
  --lg-lip: 3px;
  --lg-rim-top: rgba(255, 255, 255, 0.95);
  --lg-rim-bottom: rgba(255, 255, 255, 0.6);
  --lg-rim-side: rgba(255, 255, 255, 0.5);
  --lg-rim-glow: rgba(255, 255, 255, 0.16);
  --lg-specular: rgba(255, 255, 255, 0.32);
  --lg-outline: rgba(0, 0, 0, 0.1);
  --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);

  --lg-ink: #000;
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-lens-tint: rgba(140, 140, 150, 0.08);
    --lg-frost-tint: rgba(140, 140, 150, 0.3);
    --lg-frost-brightness: 0.95;
    --lg-rim-top: rgba(255, 255, 255, 0.5);
    --lg-rim-bottom: rgba(255, 255, 255, 0.3);
    --lg-rim-side: rgba(255, 255, 255, 0.1);
    --lg-rim-glow: rgba(255, 255, 255, 0.08);
    --lg-specular: rgba(255, 255, 255, 0.12);
    --lg-outline: rgba(0, 0, 0, 0.5);
    --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
    --lg-ink: #fff;
  }
}
:root[data-theme="dark"] {
  --lg-lens-tint: rgba(140, 140, 150, 0.08);
  --lg-frost-tint: rgba(140, 140, 150, 0.3);
  --lg-frost-brightness: 0.95;
  --lg-rim-top: rgba(255, 255, 255, 0.5);
  --lg-rim-bottom: rgba(255, 255, 255, 0.3);
  --lg-rim-side: rgba(255, 255, 255, 0.1);
  --lg-rim-glow: rgba(255, 255, 255, 0.08);
  --lg-specular: rgba(255, 255, 255, 0.12);
  --lg-outline: rgba(0, 0, 0, 0.5);
  --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
  --lg-ink: #fff;
}

:where(.lg-surface) {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  box-shadow: 0 0 0 0.5px var(--lg-outline), var(--lg-shadow);
}
.lg-surface__lens,
.lg-surface__frost {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lg-surface__lens {
  z-index: 0;
  background: var(--lg-lens-tint);
  -webkit-backdrop-filter: blur(var(--lg-lens-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-lens-blur)) saturate(var(--lg-saturate));
}
.lg-surface__frost {
  z-index: 1;
  background: var(--lg-frost-tint);
  -webkit-backdrop-filter: blur(var(--lg-frost-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-frost-brightness));
  backdrop-filter: blur(var(--lg-frost-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-frost-brightness));
  -webkit-mask:
    linear-gradient(to right, transparent 0, #000 var(--lg-lip), #000 calc(100% - var(--lg-lip)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--lg-lip), #000 calc(100% - var(--lg-lip)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0, #000 var(--lg-lip), #000 calc(100% - var(--lg-lip)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--lg-lip), #000 calc(100% - var(--lg-lip)), transparent 100%);
  mask-composite: intersect;
}
.lg-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0.5px var(--lg-rim-top),
    inset 0 -1px 0.5px var(--lg-rim-bottom),
    inset 1px 0 0.5px var(--lg-rim-side),
    inset -1px 0 0.5px var(--lg-rim-side),
    inset 0 0 10px 0 var(--lg-rim-glow);
  background:
    radial-gradient(50% 120% at 8% 0%, var(--lg-specular), transparent 55%),
    radial-gradient(45% 110% at 95% 100%, var(--lg-specular), transparent 60%);
  opacity: 0.9;
}
:where(.lg-surface > :not(.lg-surface__lens, .lg-surface__frost)) { position: relative; z-index: 3; }
.lg--refract .lg-surface__lens,
.lg--refract.lg-surface > .lg-surface__lens { background: transparent; }

@media (prefers-reduced-transparency: reduce) {
  :root { --lg-frost-tint: rgba(246, 246, 248, 0.97); }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root { --lg-frost-tint: rgba(44, 44, 48, 0.97); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-surface__frost { background: rgba(246, 246, 248, 0.96); -webkit-mask: none; mask: none; }
}
/* === END LIQUID GLASS CORE === */

:root {
  --lg-toolbar-height: 48px;
  --lg-toolbar-gutter: 28px;
  --lg-toolbar-gap: 13px;
  --lg-toolbar-max-width: 560px;
  --lg-toolbar-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) - 6px));
}

.lg-toolbar {
  position: fixed;
  z-index: 900;
  left: 0;
  right: 0;
  bottom: var(--lg-toolbar-bottom);
  margin: 0 auto;
  width: calc(100% - var(--lg-toolbar-gutter) * 2);
  max-width: var(--lg-toolbar-max-width);
  height: var(--lg-toolbar-height);
  display: flex;
  align-items: center;
  gap: var(--lg-toolbar-gap);
  font-family: var(--lg-font);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.lg-toolbar[hidden] {
  display: none;
}

/* Blank decorative circles - same glass surface as the Photos toolbar,
   no icon and no click behaviour. */
.lg-toolbar__circle {
  flex: 0 0 var(--lg-toolbar-height);
  width: var(--lg-toolbar-height);
  height: var(--lg-toolbar-height);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lg-ink);
  pointer-events: none;
}

/* Both circles are real buttons - the left toggles month/day view, the
   right opens the events/paces settings panel - so both get pointer
   events, an icon slot and interactive states back. */
#view-toggle.lg-toolbar__circle,
#event-list-trigger.lg-toolbar__circle {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#view-toggle.lg-toolbar__circle:active,
#event-list-trigger.lg-toolbar__circle:active { transform: scale(1.1); }
#view-toggle.lg-toolbar__circle:focus-visible,
#event-list-trigger.lg-toolbar__circle:focus-visible { outline: 2px solid #3480f0; outline-offset: 2px; }

.lg-toolbar__circle-icon {
  display: grid;
  place-items: center;
}
.lg-toolbar__circle-icon svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  #view-toggle.lg-toolbar__circle,
  #event-list-trigger.lg-toolbar__circle { transition: none; }
}

/* Centre pill: the app's own today button, sized and styled like the
   segmented control it replaces but acting as one plain button. */
.lg-toolbar__pill {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--lg-toolbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 20px;
  border: 0;
  background: none;
  color: var(--lg-ink);
  font: 600 15.5px/20px var(--lg-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lg-toolbar__pill:active { transform: scale(1.03); }
.lg-toolbar__pill:focus-visible { outline: 2px solid #3480f0; outline-offset: -6px; border-radius: 999px; }
.lg-toolbar__pill:disabled { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .lg-toolbar__pill { transition: none; }
}