/* ============================================================
   GoodLives — Gratitude widget ([gl_gratitude] shortcode)
   "Three good things": a warm, 1-minute pick-me-up for low mood and
   negativity bias. The reader ENDS somewhere — three concrete good
   things, a genuine closing reflection and a keepable note, plus a
   small lift. The value is in well-chosen rotating prompts (so it's
   easy to find something), a real reflection line and a gentle habit
   nudge; it never just echoes what was typed.

   Everything is scoped under .gl-gratitude AND every inner class is
   namespaced glj-* so the widget never collides with the blog's own
   .gl-btn / .gl-title / .gl-dot system, nor with the sibling widgets
   (glb-* breathe, glr-* reframe, glg-* grounding).

   A gentle self-help moment, not therapy or diagnosis: no scoring, no
   medication talk, no promises, no third-party services, no booking
   CTA. Everything stays in the reader's browser; nothing is sent.
   Optional soft ambient bed, OFF by default, no autoplay. Palette:
   LOCKED dark-green immersive, always on. Quicksand.
   ============================================================ */

.gl-gratitude{
  /* 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;        /* widget surface */
  --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-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;
  display:flex;
  flex-direction:column;
}
.gl-gratitude *{box-sizing:border-box;}

/* --- header: eyebrow + sound toggle --- */
.gl-gratitude .glj-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px 32px 20px;
  background:linear-gradient(160deg, var(--gl-stage) 0%, var(--gl-stage-2) 100%);
  border-bottom:1px solid var(--gl-border);
}
.gl-gratitude .glj-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);
}
.gl-gratitude .glj-eyebrow-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-gratitude .glj-sound{
  appearance:none;cursor:pointer;font-family:inherit;
  width:38px;height:38px;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gl-muted);
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-sm);
  transition:color .18s, border-color .18s, background .18s, transform .08s;
}
.gl-gratitude .glj-sound:hover{border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));color:var(--gl-text);}
.gl-gratitude .glj-sound:active{transform:scale(.95);}
.gl-gratitude .glj-sound:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-gratitude .glj-sound svg{width:19px;height:19px;}
.gl-gratitude .glj-sound .ico-off{display:block;}
.gl-gratitude .glj-sound .ico-on{display:none;}
.gl-gratitude .glj-sound.is-on{color:var(--gl-green);border-color:var(--gl-green);}
.gl-gratitude .glj-sound.is-on .ico-off{display:none;}
.gl-gratitude .glj-sound.is-on .ico-on{display:block;}

/* --- body: one stage visible at a time --- */
.gl-gratitude .glj-body{padding:30px 32px 12px;}
.gl-gratitude .glj-stage{display:none;animation:glj-fade .3s ease both;}
.gl-gratitude .glj-stage.is-active{display:block;}
@keyframes glj-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.gl-gratitude .glj-title{
  margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.01em;
  line-height:1.25;color:var(--gl-text);
}
.gl-gratitude .glj-lede,
.gl-gratitude .glj-prompt{
  margin:0 0 22px;font-size:15.5px;font-weight:500;line-height:1.6;color:var(--gl-muted);
  max-width:52ch;
}

/* --- decorative sunrise arc (intro + list) --- */
.gl-gratitude .glj-art{
  position:relative;width:100%;height:86px;margin:2px 0 18px;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.gl-gratitude .glj-art svg{width:168px;height:auto;display:block;}
.gl-gratitude .glj-ray{transform-origin:84px 78px;animation:glj-breathe 5.5s ease-in-out infinite;}
@keyframes glj-breathe{0%,100%{opacity:.55;}50%{opacity:1;}}

/* --- intro --- */
.gl-gratitude [data-stage="intro"]{text-align:center;}
.gl-gratitude [data-stage="intro"] .glj-title{max-width:18ch;margin-left:auto;margin-right:auto;}
.gl-gratitude [data-stage="intro"] .glj-lede{margin-left:auto;margin-right:auto;}
.gl-gratitude .glj-intro-cta{display:flex;justify-content:center;margin-top:4px;}

/* --- write: three prompt cards --- */
.gl-gratitude .glj-items{display:flex;flex-direction:column;gap:14px;margin:0 0 6px;}
.gl-gratitude .glj-item{
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-md);
  padding:15px 16px 16px;
}
.gl-gratitude .glj-item-head{display:flex;align-items:flex-start;gap:10px;margin:0 0 11px;}
.gl-gratitude .glj-num{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;
  color:var(--gl-green);
  background:color-mix(in srgb, var(--gl-green) 16%, var(--gl-stage));
  border:1px solid color-mix(in srgb, var(--gl-green) 40%, var(--gl-border));
}
.gl-gratitude .glj-ptext{
  flex:1;min-width:0;padding-top:2px;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--gl-text);
}
.gl-gratitude .glj-swap{
  appearance:none;cursor:pointer;font-family:inherit;flex:none;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--gl-green);
  background:color-mix(in srgb, var(--gl-green) 10%, var(--gl-stage));
  border:1px dashed color-mix(in srgb, var(--gl-green) 50%, var(--gl-border));
  border-radius:var(--gl-radius-sm);
  padding:7px 10px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .18s, border-color .18s, transform .3s;
}
.gl-gratitude .glj-swap:hover{background:color-mix(in srgb, var(--gl-green) 18%, var(--gl-stage));}
.gl-gratitude .glj-swap:active{transform:scale(.96);}
.gl-gratitude .glj-swap:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-gratitude .glj-swap svg{width:14px;height:14px;flex:none;opacity:.9;transition:transform .45s ease;}
.gl-gratitude .glj-swap.is-spin svg{transform:rotate(360deg);}
.gl-gratitude .glj-swap-label{display:inline;}

.gl-gratitude .glj-input{
  width:100%;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.55;
  color:var(--gl-text);
  background:var(--gl-card);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-sm);
  padding:12px 14px;
  resize:vertical;
  min-height:70px;
  transition:border-color .2s, box-shadow .2s;
}
.gl-gratitude .glj-input::placeholder{color:var(--gl-muted);opacity:.6;}
.gl-gratitude .glj-input:focus{
  outline:none;border-color:var(--gl-green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gl-green) 20%, transparent);
}

/* --- list (outcome) --- */
.gl-gratitude [data-stage="list"] .glj-title{text-align:center;}
.gl-gratitude .glj-ack{
  margin:0 auto 22px;max-width:46ch;text-align:center;
  font-size:15.5px;font-weight:600;line-height:1.55;color:var(--gl-text);
}
.gl-gratitude .glj-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:glj;}
.gl-gratitude .glj-list li{
  counter-increment:glj;
  position:relative;
  padding:15px 16px 15px 54px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gl-green) 14%, var(--gl-card)) 0%, color-mix(in srgb, var(--gl-green) 7%, var(--gl-card)) 100%);
  border:1px solid color-mix(in srgb, var(--gl-green) 38%, var(--gl-border));
  border-radius:var(--gl-radius-md);
  font-size:16px;font-weight:500;line-height:1.55;color:var(--gl-text);
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
  animation:glj-rise .5s ease both;
}
.gl-gratitude .glj-list li::before{
  content:counter(glj);
  position:absolute;left:15px;top:15px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;
  color:#fff;background:var(--gl-green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gl-green) 18%, transparent);
}
.gl-gratitude .glj-list li.is-blank{
  background:var(--gl-stage);
  border-color:var(--gl-border);
  color:var(--gl-muted);font-weight:500;font-style:italic;
}
.gl-gratitude .glj-list li.is-blank::before{background:var(--gl-track);color:var(--gl-muted);box-shadow:none;}
.gl-gratitude .glj-list li:nth-child(1){animation-delay:.04s;}
.gl-gratitude .glj-list li:nth-child(2){animation-delay:.14s;}
.gl-gratitude .glj-list li:nth-child(3){animation-delay:.24s;}
@keyframes glj-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.gl-gratitude .glj-reflect{
  margin:0 0 10px;padding:15px 16px;
  font-size:15px;font-weight:500;line-height:1.6;color:var(--gl-text);
  background:var(--gl-stage);
  border-left:3px solid var(--gl-green-dark);
  border-radius:0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
}
.gl-gratitude .glj-nudge{
  display:flex;align-items:center;gap:9px;
  margin:0 0 4px;font-size:14px;font-weight:600;line-height:1.5;color:var(--gl-muted);
}
.gl-gratitude .glj-nudge svg{width:17px;height:17px;flex:none;color:var(--gl-green);}

.gl-gratitude .glj-final{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.gl-gratitude .glj-final .glj-btn--primary{flex:1;min-width:180px;}

/* --- footer nav (write stage) --- */
.gl-gratitude .glj-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 32px 8px;
}
.gl-gratitude .glj-foot[hidden]{display:none;}
.gl-gratitude .glj-foot-spacer{flex:1;}

/* --- privacy --- */
.gl-gratitude .glj-privacy{
  display:flex;align-items:center;gap:7px;
  margin:0;padding:12px 32px 22px;
  font-size:12.5px;font-weight:500;line-height:1.5;color:var(--gl-muted);
}
.gl-gratitude .glj-privacy svg{width:14px;height:14px;flex:none;opacity:.8;}

/* --- buttons (12px radius, no pills) --- */
.gl-gratitude .glj-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, opacity .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 24px;font-size:15.5px;line-height:1;margin:0;
  text-decoration:none;
}
.gl-gratitude .glj-btn:active{transform:scale(.97);}
.gl-gratitude .glj-btn:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-gratitude .glj-btn svg{width:18px;height:18px;flex:none;}
.gl-gratitude .glj-btn--primary{
  background:var(--gl-green);color:#fff;border:1px solid transparent;
  box-shadow:var(--gl-shadow-soft);
}
.gl-gratitude .glj-btn--primary:hover{background:var(--gl-green-dark);}
.gl-gratitude .glj-btn--primary.is-ok{background:var(--gl-green-dark);}
.gl-gratitude .glj-btn--ghost{
  background:transparent;color:var(--gl-text);border:1px solid var(--gl-border);
}
.gl-gratitude .glj-btn--ghost:hover{background:var(--gl-stage);}
.gl-gratitude .glj-btn[hidden]{display:none;}
.gl-gratitude .glj-btn:disabled{opacity:.4;cursor:default;pointer-events:none;}

/* --- phones --- */
@media (max-width:520px){
  .gl-gratitude .glj-head{padding:18px 20px 16px;}
  .gl-gratitude .glj-body{padding:24px 20px 8px;}
  .gl-gratitude .glj-foot{padding:12px 20px 6px;}
  .gl-gratitude .glj-privacy{padding:10px 20px 20px;}
  .gl-gratitude .glj-title{font-size:21px;}
  .gl-gratitude .glj-item-head{flex-wrap:wrap;}
  .gl-gratitude .glj-swap-label{display:none;}
  .gl-gratitude .glj-swap{padding:7px 9px;}
  .gl-gratitude .glj-final .glj-btn--primary{min-width:0;}
  .gl-gratitude .glj-btn{padding:0 18px;}
}

@media (prefers-reduced-motion: reduce){
  .gl-gratitude .glj-stage,
  .gl-gratitude .glj-list li{animation:none;}
  .gl-gratitude .glj-ray{animation:none;opacity:.85;}
  .gl-gratitude .glj-btn,
  .gl-gratitude .glj-swap,
  .gl-gratitude .glj-swap svg,
  .gl-gratitude .glj-input,
  .gl-gratitude .glj-sound{transition:none;}
}