/* ============================================================
   GoodLives — Grounding 5-4-3-2-1 widget ([gl_ground] shortcode)
   A single immersive card that paces a reader through the five
   senses and lands them on a calm outcome. Everything is scoped
   under .gl-ground AND every inner class is namespaced glg-* so the
   widget never collides with the blog's own .gl-btn / .gl-title /
   .gl-dot system, nor with the sibling gl-breathe / gl-reframe
   widgets (no bleed either way).
   Palette: LOCKED dark-green immersive tokens, always on. Quicksand.
   ============================================================ */

.gl-ground{
  /* LOCKED dark-green immersive palette — always on, does not follow the
     viewer's light/dark. The GoodLives look for interactive blog widgets. */
  --gl-green:#5CC08C;
  --gl-green-dark:#49AF7C;
  --gl-card:#1C2A24;
  --gl-stage:#17241E;
  --gl-stage-2:#1F3029;
  --gl-track:#2C4438;
  --gl-text:#EAF5EF;
  --gl-muted:#A6C2B4;
  --gl-border:rgba(234,245,239,.10);
  --gl-shadow:0 20px 50px -24px rgba(0,0,0,.65), 0 2px 12px -6px rgba(0,0,0,.5);
  --gl-shadow-soft:0 12px 32px -20px rgba(0,0,0,.6);
  --gl-halo-core:#6FD3A6;
  --gl-halo-edge:#2F8A5E;
  --gl-halo-glow:rgba(92,192,140,.30);
  color-scheme:dark;

  --gl-radius-lg:24px;
  --gl-radius-md:16px;
  --gl-radius-sm:12px;
  --gl-font:"Quicksand", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  width:100%;
  max-width:720px;
  margin:32px auto;
  background:var(--gl-card);
  color:var(--gl-text);
  font-family:var(--gl-font);
  -webkit-font-smoothing:antialiased;
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-lg);
  box-shadow:var(--gl-shadow);
  overflow:hidden;
  position:relative;
}
.gl-ground *{box-sizing:border-box;}

/* --- top bar: progress rail + sound --- */
.gl-ground .glg-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  border-bottom:1px solid var(--gl-border);
  background:linear-gradient(160deg, var(--gl-stage) 0%, var(--gl-stage-2) 100%);
}
.gl-ground .glg-rail{
  display:flex;
  gap:7px;
  flex:1;
  min-width:0;
}
.gl-ground .glg-seg{
  height:5px;
  flex:1;
  border-radius:999px;
  background:var(--gl-track);
  overflow:hidden;
  position:relative;
}
.gl-ground .glg-seg::after{
  content:"";
  position:absolute;
  inset:0;
  width:0;
  background:var(--gl-green);
  border-radius:999px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.gl-ground .glg-seg.is-done::after{width:100%;}
.gl-ground .glg-seg.is-active::after{width:var(--seg-fill,0%);}

.gl-ground .glg-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gl-green-dark);
  white-space:nowrap;
}
.gl-ground .glg-brand-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gl-green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gl-green) 18%, transparent);
}

.gl-ground .glg-sound{
  width:38px;height:38px;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--gl-text);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-sm);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.gl-ground .glg-sound:hover{background:rgba(234,245,239,.05);}
.gl-ground .glg-sound:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-ground .glg-sound svg{width:18px;height:18px;}
.gl-ground .glg-sound.is-off{color:var(--gl-muted);}
.gl-ground .glg-sound .ico-off{display:none;}
.gl-ground .glg-sound.is-off .ico-on{display:none;}
.gl-ground .glg-sound.is-off .ico-off{display:block;}

/* --- stage --- */
.gl-ground .glg-stage{
  padding:40px 40px 34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:430px;
}

.gl-ground .glg-view{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:1;
  transform:translateY(0);
  transition:opacity .5s ease, transform .5s ease;
}
.gl-ground .glg-view.is-leaving{opacity:0;transform:translateY(8px);}
.gl-ground .glg-view.is-entering{opacity:0;transform:translateY(10px);}

.gl-ground .glg-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gl-green-dark);
  margin-bottom:22px;
}
.gl-ground .glg-eyebrow svg{width:15px;height:15px;}

/* breathing halo behind the icon / number */
.gl-ground .glg-halo{
  position:relative;
  width:132px;height:132px;
  display:grid;place-items:center;
  margin-bottom:26px;
}
.gl-ground .glg-halo::before,
.gl-ground .glg-halo::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
      var(--gl-halo-glow) 0%,
      color-mix(in srgb, var(--gl-halo-glow) 40%, transparent) 45%,
      transparent 70%);
  animation:glgBreathe 9s ease-in-out infinite;
}
.gl-ground .glg-halo::after{animation-delay:-4.5s;opacity:.6;}
.gl-ground .glg-halo-core{
  position:relative;
  width:86px;height:86px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,
      color-mix(in srgb, var(--gl-halo-core) 92%, white) 0%,
      var(--gl-halo-core) 36%,
      var(--gl-halo-edge) 100%);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--gl-green) 9%, transparent),
    0 0 34px 4px var(--gl-halo-glow),
    inset 0 -8px 20px -8px rgba(0,0,0,.25),
    inset 0 8px 18px -6px rgba(255,255,255,.5);
  display:grid;place-items:center;
  animation:glgBreatheCore 9s ease-in-out infinite;
}
.gl-ground .glg-halo-core svg{width:38px;height:38px;color:#0f1f18;}
.gl-ground .glg-halo-num{
  font-size:38px;font-weight:700;color:#0f1f18;line-height:1;
  font-variant-numeric:tabular-nums;
}
@keyframes glgBreathe{
  0%,100%{transform:scale(.82);opacity:.35;}
  50%{transform:scale(1.08);opacity:.7;}
}
@keyframes glgBreatheCore{
  0%,100%{transform:scale(.94);}
  50%{transform:scale(1.04);}
}

.gl-ground .glg-prompt{
  margin:0 0 10px;
  font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  color:var(--gl-text);
  max-width:20ch;
}
.gl-ground .glg-hint{
  margin:0 auto 26px;
  font-size:14px;font-weight:500;line-height:1.6;
  color:var(--gl-muted);
  max-width:32ch;
}

/* dots to tick off each named thing */
.gl-ground .glg-dots{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  margin:0 0 14px;
}
.gl-ground .glg-dot{
  width:34px;height:34px;padding:0;
  border-radius:50%;
  border:2px solid var(--gl-track);
  background:transparent;
  color:var(--gl-green);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .3s, background .3s, transform .12s, box-shadow .3s;
}
.gl-ground .glg-dot:hover{border-color:var(--gl-green-dark);}
.gl-ground .glg-dot:active{transform:scale(.9);}
.gl-ground .glg-dot:focus-visible{outline:2px solid var(--gl-green);outline-offset:3px;}
.gl-ground .glg-dot svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .3s, transform .3s;color:#0f1f18;}
.gl-ground .glg-dot.is-on{
  border-color:var(--gl-green);
  background:var(--gl-green);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--gl-green) 12%, transparent), 0 0 16px var(--gl-halo-glow);
}
.gl-ground .glg-dot.is-on svg{opacity:1;transform:scale(1);}

.gl-ground .glg-progress{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--gl-muted);
  min-height:18px;
  margin:0 0 24px;
  transition:color .3s;
}
.gl-ground .glg-progress.is-complete{color:var(--gl-green);}

/* controls */
.gl-ground .glg-actions{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;
  width:100%;
  margin-top:auto;
}
.gl-ground .glg-btn{
  appearance:none;font-family:inherit;font-weight:600;cursor:pointer;
  border-radius:var(--gl-radius-sm);
  transition:background .2s, color .2s, border-color .2s, transform .08s, box-shadow .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  line-height:1;margin:0;
}
.gl-ground .glg-btn:active{transform:scale(.97);}
.gl-ground .glg-btn:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-ground .glg-btn svg{width:18px;height:18px;flex:none;}
.gl-ground .glg-btn--primary{
  height:50px;padding:0 30px;font-size:16px;
  background:var(--gl-green);color:#fff;border:1px solid transparent;
  box-shadow:var(--gl-shadow-soft);
}
.gl-ground .glg-btn--primary:hover{background:var(--gl-green-dark);}
.gl-ground .glg-btn--primary.is-ready{animation:glgNudge 1.8s ease-in-out infinite;}
@keyframes glgNudge{
  0%,100%{box-shadow:var(--gl-shadow-soft), 0 0 0 0 color-mix(in srgb, var(--gl-green) 40%, transparent);}
  50%{box-shadow:var(--gl-shadow-soft), 0 0 0 7px color-mix(in srgb, var(--gl-green) 0%, transparent);}
}
.gl-ground .glg-btn--ghost{
  height:50px;padding:0 20px;font-size:15px;
  background:transparent;color:var(--gl-text);border:1px solid var(--gl-border);
}
.gl-ground .glg-btn--ghost:hover{background:var(--gl-stage);}

/* intro + outcome share a roomier, centred feel */
.gl-ground .glg-view--intro .glg-prompt,
.gl-ground .glg-view--outcome .glg-prompt{max-width:24ch;}
.gl-ground .glg-view--outcome .glg-hint{max-width:34ch;margin-bottom:30px;}
.gl-ground .glg-lead{
  font-size:14px;font-weight:500;line-height:1.65;color:var(--gl-muted);
  max-width:34ch;margin:0 auto 30px;
}

@media (max-width:560px){
  .gl-ground .glg-stage{padding:32px 22px 28px;min-height:400px;}
  .gl-ground .glg-top{padding:16px 18px;}
}
@media (max-width:420px){
  .gl-ground .glg-prompt{font-size:21px;}
  .gl-ground .glg-halo{width:118px;height:118px;}
  .gl-ground .glg-halo-core{width:78px;height:78px;}
  .gl-ground .glg-btn--primary{padding:0 24px;font-size:15px;}
  .gl-ground .glg-dot{width:32px;height:32px;}
}

@media (prefers-reduced-motion: reduce){
  .gl-ground .glg-halo::before,
  .gl-ground .glg-halo::after,
  .gl-ground .glg-halo-core{animation:none;}
  .gl-ground .glg-btn--primary.is-ready{animation:none;}
  .gl-ground .glg-view{transition:none;}
  .gl-ground .glg-seg::after{transition:none;}
  .gl-ground .glg-dot,
  .gl-ground .glg-dot svg{transition:none;}
}