/* ==========================================================================
   Kalikkalam — shared Liquid Glass system
   --------------------------------------------------------------------------
   Target: the iOS 26 "Liquid Glass" material, approximated in CSS.

   SUPERSET BY DESIGN. Every token and component name the two trainers already
   use inline is preserved here with the same meaning, so migrating a trainer is
   "delete its inline <style> block, add <link rel=stylesheet href=/styles.css>"
   rather than a rewrite. New Liquid Glass primitives are added alongside.

   Honest limits — real Liquid Glass refracts its backdrop and moves speculars
   with the device. CSS cannot do runtime refraction. What is faked here:
     - refraction  -> heavy blur + saturation/brightness lift on the backdrop
     - glass edge  -> layered inset rings (bright top, dark bottom) = thickness
     - specular    -> a static 135deg sweep pinned to the top-left edge
     - chromatic   -> a faint blue/warm fringe in the inset rings
   ========================================================================== */

:root {
  /* --- base (trainer-compatible names) --- */
  --bg-deep:        #0a0e1a;
  --bg-lift:        #10162a;

  --accent-1:       #6366f1;   /* indigo */
  --accent-2:       #a855f7;   /* purple */
  --accent-3:       #22d3ee;   /* cyan   */
  --accent-4:       #f472b6;   /* pink   */
  --success:        #34d399;
  --warning:        #fbbf24;
  --danger:         #ff7a7a;

  --text-primary:   #f5f6fa;
  --text-secondary: rgba(245,246,250,0.62);
  --text-muted:     rgba(245,246,250,0.42);

  --glass-bg:       rgba(255,255,255,0.06);
  --glass-border:   rgba(255,255,255,0.14);

  --radius-lg:      28px;
  --radius-md:      18px;
  --radius-sm:      12px;

  /* --- Liquid Glass additions --- */
  --lg-tint:        rgba(255,255,255,0.055);
  --lg-tint-raised: rgba(255,255,255,0.085);
  --lg-blur:        blur(24px) saturate(190%) brightness(1.12);
  --lg-blur-thin:   blur(14px) saturate(160%) brightness(1.08);

  /* the glass EDGE: bright top lip, dim bottom lip, faint colour fringe.
     this stack is what reads as "thickness" rather than "translucent panel". */
  --lg-edge:
    inset 0  1px  0    rgba(255,255,255,0.55),
    inset 0  0    0 1px rgba(255,255,255,0.16),
    inset 0 -1px  0    rgba(255,255,255,0.07),
    inset 0  0   14px -8px rgba(150,190,255,0.40),
    inset 0  0   22px -14px rgba(255,220,190,0.22);

  --lg-lift:        0 18px 50px -22px rgba(0,0,0,0.75),
                    0  4px 14px -8px  rgba(0,0,0,0.55);

  --ease-spring:    cubic-bezier(0.34, 1.36, 0.64, 1);
  --t-fast:         0.18s;
  --t-med:          0.32s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   BACKDROP — glass needs something worth refracting behind it
   ========================================================================== */
/* Fixed, so the glass always has something behind it no matter the scroll
   position. That makes COVERAGE the requirement: any gap in the field shows up
   as a panel of grey plastic further down the page. Sizes are vmax-based and
   deliberately overlap toward the centre. */
.blob-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.62; }
.blob-a { width: 62vmax; height: 62vmax; top: -22vmax; left: -14vmax;
          background: radial-gradient(circle at 40% 40%, var(--accent-1), transparent 68%);
          animation: drift-a 26s ease-in-out infinite alternate; }
.blob-b { width: 54vmax; height: 54vmax; top: -8vmax; right: -16vmax;
          background: radial-gradient(circle at 60% 60%, var(--accent-2), transparent 68%);
          animation: drift-b 32s ease-in-out infinite alternate; }
.blob-c { width: 58vmax; height: 58vmax; bottom: -20vmax; left: -6vmax;
          background: radial-gradient(circle at 50% 50%, var(--accent-3), transparent 68%);
          animation: drift-c 28s ease-in-out infinite alternate; }
.blob-d { width: 50vmax; height: 50vmax; bottom: -14vmax; right: -8vmax;
          background: radial-gradient(circle at 50% 50%, var(--accent-4), transparent 68%);
          animation: drift-a 24s ease-in-out infinite alternate; }
/* centre fill - without this the mid-page glass sits over bare --bg-deep */
.blob-e { width: 66vmax; height: 46vmax; top: 26%; left: 50%; margin-left: -33vmax;
          border-radius: 50%; opacity: 0.42;
          background: radial-gradient(ellipse at 50% 50%, var(--accent-2), transparent 66%);
          animation: drift-b 30s ease-in-out infinite alternate; }

@keyframes drift-a { to { transform: translate3d(60px, 40px, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-50px, 60px, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(70px, -40px, 0) scale(1.14); } }

/* material grain — keeps large glass planes from looking like flat plastic */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ==========================================================================
   THE MATERIAL
   .glass      — the Liquid Glass primitive
   .glass-card — trainer-compatible alias (same material, card padding)
   ========================================================================== */
.glass, .glass-card {
  position: relative;
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--lg-edge), var(--lg-lift);
  isolation: isolate;
}
.glass-card { padding: 24px; }

/* specular sweep — pinned top-left, the "lit from above-left" cue */
.glass::before, .glass-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg,
              rgba(255,255,255,0.30) 0%,
              rgba(255,255,255,0.07) 26%,
              transparent 52%);
}
/* inner bloom — light pooling inside the material, strongest near the top lip */
.glass::after, .glass-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 22% -10%,
              rgba(255,255,255,0.16) 0%, transparent 60%);
}

.glass-thin {
  -webkit-backdrop-filter: var(--lg-blur-thin);
          backdrop-filter: var(--lg-blur-thin);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42),
              inset 0 0 0 1px rgba(255,255,255,0.12),
              0 10px 28px -18px rgba(0,0,0,0.7);
}

/* raised state — glass "rises toward" the pointer. lift + brighten, no colour shift */
.glass-interactive { transition: transform var(--t-med) var(--ease-spring),
                                 box-shadow var(--t-med) ease,
                                 background var(--t-fast) ease; }
.glass-interactive:hover { transform: translateY(-3px);
  background: var(--lg-tint-raised);
  box-shadow: var(--lg-edge), 0 26px 60px -24px rgba(0,0,0,0.8), 0 6px 18px -8px rgba(0,0,0,0.6); }
.glass-interactive:active { transform: translateY(-1px) scale(0.994); }

/* ==========================================================================
   CONTROLS — capsules, concentric radii
   ========================================================================== */
.btn {
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 14px 28px; border-radius: 999px; border: none;
  background: var(--lg-tint-raised); color: var(--text-primary); cursor: pointer;
  -webkit-backdrop-filter: var(--lg-blur-thin); backdrop-filter: var(--lg-blur-thin);
  box-shadow: var(--lg-edge);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.btn:hover  { background: rgba(255,255,255,0.14); }
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 12px 32px -10px rgba(99,102,241,0.60);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 16px 40px -10px rgba(99,102,241,0.75); }
.btn-ghost { background: transparent; box-shadow: none; font-size: 13px; padding: 10px 18px; }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1em; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  background: var(--lg-tint); color: var(--text-secondary);
  -webkit-backdrop-filter: var(--lg-blur-thin); backdrop-filter: var(--lg-blur-thin);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), inset 0 0 0 1px rgba(255,255,255,0.10);
}

.icon-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--lg-tint-raised); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-backdrop-filter: var(--lg-blur-thin); backdrop-filter: var(--lg-blur-thin);
  box-shadow: var(--lg-edge);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) ease;
}
.icon-btn:hover  { background: rgba(255,255,255,0.16); }
.icon-btn:active { transform: scale(0.94); }

/* trainer-compatible: segmented control with a sliding glass thumb */
.segmented {
  position: relative; display: flex; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.glass-input {
  width: 100%; border: none; border-radius: var(--radius-md);
  padding: 16px 18px; font-family: inherit; font-size: 18px; text-align: center;
  background: rgba(255,255,255,0.06); color: var(--text-primary); outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: box-shadow var(--t-fast) ease;
}
.glass-input:focus { box-shadow: inset 0 0 0 1px var(--accent-3), 0 0 0 3px rgba(34,211,238,0.25); }
.glass-input::placeholder { color: var(--text-muted); }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: color var(--t-fast) ease;
}
.back-link:hover { color: var(--text-primary); }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Fallback: without backdrop-filter the tint alone is nearly invisible, so the
   glass would vanish into the background. Opaque it up instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-card, .btn, .pill, .icon-btn { background: rgba(24,28,46,0.92); }
}