/* ============================================================
   GoodLives — Worry tree widget ([gl_worry] shortcode)
   A guided "act on it or set it down" decision aid that sits inline
   in a blog post. The reader names a worry, decides whether it is
   something they can act on, and leaves with ONE of two real
   resolutions: a concrete small action plan (a worry they can act
   on) or a conscious letting-go with a short slow-breathing beat (a
   worry they cannot control). Clarity and less circling, not just
   collecting the worry. It is a reflection aid, not therapy or
   diagnosis. Everything stays in the reader's browser; nothing is
   sent. No AI, no network.
   Everything is scoped under .gl-worry AND every inner class is
   namespaced glw-* so the widget never collides with the blog's own
   .gl-btn / .gl-title / .gl-dot system, nor with gl-breathe's glb-*
   or gl-reframe's glr-*.
   LOCKED dark-green immersive palette — always on, matches gl-breathe
   and gl-reframe. Palette: logo green #49AF7C + sage + white, hue-true
   green tints only. Quicksand. No pills: 12px radius on every button
   and chip.
   ============================================================ */

.gl-worry{
  /* LOCKED dark-green immersive palette — always on, does not follow
     the viewer's light/dark. The GoodLives look for interactive blog
     widgets (same tokens as [gl_breathe] / [gl_reframe]). */
  --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;

  /* the card: a wide, calm block that spans the content column */
  width:100%;
  max-width:720px;
  margin:28px 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-worry *{box-sizing:border-box;}

/* --- header --- */
.gl-worry .glw-head{
  padding:26px 32px 22px;
  background:linear-gradient(160deg, var(--gl-stage) 0%, var(--gl-stage-2) 100%);
  border-bottom:1px solid var(--gl-border);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.gl-worry .glw-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-worry .glw-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-worry .glw-crumbs{display:flex;align-items:center;gap:6px;}
.gl-worry .glw-crumbs i{
  width:22px;height:5px;border-radius:999px;background:var(--gl-track);
  transition:background .3s ease;
}
.gl-worry .glw-crumbs i.is-done{background:var(--gl-green-dark);}
.gl-worry .glw-crumbs i.is-current{background:var(--gl-green);}

/* --- body: one screen visible at a time --- */
.gl-worry .glw-body{padding:30px 32px 10px;}
.gl-worry .glw-screen{display:none;animation:glw-fade .28s ease both;}
.gl-worry .glw-screen.is-active{display:block;}
@keyframes glw-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.gl-worry .glw-title{
  margin:0 0 8px;font-size:23px;font-weight:700;letter-spacing:-.01em;
  line-height:1.28;color:var(--gl-text);
}
.gl-worry .glw-prompt{
  margin:0 0 20px;font-size:15.5px;font-weight:500;line-height:1.6;color:var(--gl-muted);
  max-width:54ch;
}

/* --- inputs --- */
.gl-worry .glw-input{
  width:100%;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.6;
  color:var(--gl-text);
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-md);
  padding:14px 16px;
  resize:vertical;
  min-height:96px;
  transition:border-color .2s, box-shadow .2s;
}
.gl-worry .glw-input::placeholder{color:var(--gl-muted);opacity:.62;}
.gl-worry .glw-input:focus{
  outline:none;border-color:var(--gl-green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gl-green) 20%, transparent);
}
.gl-worry .glw-input--line{min-height:0;height:50px;resize:none;}

/* --- yes/no branch choice --- */
.gl-worry .glw-choices{display:flex;flex-direction:column;gap:12px;margin:4px 0 2px;}
.gl-worry .glw-choice{
  appearance:none;cursor:pointer;font-family:inherit;text-align:left;width:100%;
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-md);
  padding:17px 18px;
  display:flex;align-items:center;gap:14px;
  transition:background .18s, border-color .18s, transform .08s;
}
.gl-worry .glw-choice:hover{border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));background:color-mix(in srgb, var(--gl-green) 7%, var(--gl-stage));}
.gl-worry .glw-choice:active{transform:scale(.99);}
.gl-worry .glw-choice:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-worry .glw-choice-ico{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--gl-green) 16%, var(--gl-card));
  color:var(--gl-green);
}
.gl-worry .glw-choice-ico svg{width:22px;height:22px;}
.gl-worry .glw-choice-tx{display:flex;flex-direction:column;gap:3px;}
.gl-worry .glw-choice-tx b{font-size:16px;font-weight:700;line-height:1.3;color:var(--gl-text);}
.gl-worry .glw-choice-tx span{font-size:13.5px;font-weight:500;line-height:1.45;color:var(--gl-muted);}

/* --- when chips --- */
.gl-worry .glw-chips{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 16px;}
.gl-worry .glw-chip{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;line-height:1;
  color:var(--gl-text);
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-sm);
  padding:12px 15px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .18s, border-color .18s, color .18s, transform .08s;
}
.gl-worry .glw-chip:hover{border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));}
.gl-worry .glw-chip:active{transform:scale(.97);}
.gl-worry .glw-chip:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-worry .glw-chip .glw-tick{
  width:15px;height:15px;flex:none;opacity:0;transform:scale(.6);
  transition:opacity .18s, transform .18s;
}
.gl-worry .glw-chip.is-on{
  background:color-mix(in srgb, var(--gl-green) 20%, var(--gl-stage));
  border-color:var(--gl-green);color:#fff;
}
.gl-worry .glw-chip.is-on .glw-tick{opacity:1;transform:none;}
.gl-worry .glw-when-own{margin:0 0 6px;}
.gl-worry .glw-when-own[hidden]{display:none;}

.gl-worry .glw-field{margin:0 0 6px;}
.gl-worry .glw-label{
  display:block;margin:0 0 9px;
  font-size:14.5px;font-weight:600;line-height:1.45;color:var(--gl-text);
}

/* --- outcome: the plan card --- */
.gl-worry .glw-plan{
  border:1px solid color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));
  border-radius:var(--gl-radius-md);
  padding:20px 20px 18px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gl-green) 18%, var(--gl-card)) 0%, color-mix(in srgb, var(--gl-green) 10%, var(--gl-card)) 100%);
}
.gl-worry .glw-plan-label{
  display:block;margin-bottom:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gl-green);
}
.gl-worry .glw-plan-line{
  margin:0;font-size:19px;font-weight:700;line-height:1.4;color:var(--gl-text);
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
}
.gl-worry .glw-plan-line .glw-em{color:var(--gl-green);}
.gl-worry .glw-plan-when{
  margin:12px 0 0;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--gl-text);
  background:color-mix(in srgb, var(--gl-green) 14%, var(--gl-card));
  border:1px solid color-mix(in srgb, var(--gl-green) 35%, var(--gl-border));
  border-radius:var(--gl-radius-sm);padding:8px 13px;
}
.gl-worry .glw-plan-when[hidden]{display:none;}
.gl-worry .glw-plan-when svg{width:15px;height:15px;flex:none;color:var(--gl-green);}

.gl-worry .glw-close{
  margin:20px 0 4px;font-size:16px;font-weight:600;line-height:1.6;
  color:var(--gl-text);
}
.gl-worry .glw-close--muted{color:var(--gl-muted);font-weight:500;font-size:15px;}

/* --- letting-go breath stage --- */
.gl-worry .glw-letgo-intro{
  margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.6;color:var(--gl-text);
  max-width:54ch;
}
.gl-worry .glw-letgo-intro b{color:var(--gl-green);font-weight:700;}
.gl-worry .glw-breath{
  margin:22px 0 4px;
  background:linear-gradient(160deg, var(--gl-stage) 0%, var(--gl-stage-2) 100%);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-md);
  padding:28px 20px 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.gl-worry .glw-orb-wrap{
  position:relative;width:150px;height:150px;
  display:flex;align-items:center;justify-content:center;
}
.gl-worry .glw-orb{
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #6FD3A6 0%, #2F8A5E 72%, #1F3029 100%);
  box-shadow:0 0 44px 6px var(--gl-glow);
  transform:scale(.6);
  will-change:transform;
}
.gl-worry .glw-orb-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--gl-green) 30%, transparent);
  transform:scale(.6);will-change:transform,opacity;opacity:.5;
}
.gl-worry .glw-breath-phase{
  font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--gl-text);
  min-height:1.4em;
}
.gl-worry .glw-shelf{
  margin:18px 0 2px;font-size:15.5px;font-weight:500;line-height:1.6;color:var(--gl-muted);
  max-width:54ch;
}

/* --- ambient toggle --- */
.gl-worry .glw-ambient{
  display:inline-flex;align-items:center;gap:10px;
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--gl-muted);
  background:transparent;border:0;padding:4px 0;margin-top:2px;
}
.gl-worry .glw-ambient:focus-visible{outline:2px solid var(--gl-green);outline-offset:3px;border-radius:6px;}
.gl-worry .glw-ambient-sw{
  width:38px;height:22px;border-radius:999px;background:var(--gl-track);
  border:1px solid var(--gl-border);position:relative;flex:none;transition:background .2s;
}
.gl-worry .glw-ambient-sw::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--gl-muted);transition:transform .2s, background .2s;
}
.gl-worry .glw-ambient.is-on{color:var(--gl-text);}
.gl-worry .glw-ambient.is-on .glw-ambient-sw{background:color-mix(in srgb, var(--gl-green) 55%, var(--gl-track));}
.gl-worry .glw-ambient.is-on .glw-ambient-sw::after{transform:translateX(16px);background:#fff;}

/* --- footer: back + actions --- */
.gl-worry .glw-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 32px 10px;
}
.gl-worry .glw-foot-spacer{flex:1;}
.gl-worry .glw-foot .glw-btn--primary{min-width:150px;}
.gl-worry .glw-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-worry .glw-privacy svg{width:14px;height:14px;flex:none;opacity:.8;}

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

/* --- stack on phones --- */
@media (max-width:520px){
  .gl-worry .glw-head{padding:22px 20px 18px;}
  .gl-worry .glw-body{padding:24px 20px 6px;}
  .gl-worry .glw-foot{padding:16px 20px 8px;}
  .gl-worry .glw-privacy{padding:10px 20px 20px;}
  .gl-worry .glw-title{font-size:21px;}
  .gl-worry .glw-btn{padding:0 16px;}
  .gl-worry .glw-foot .glw-btn--primary{min-width:0;flex:1;}
  .gl-worry .glw-plan-line{font-size:17px;}
}

@media (prefers-reduced-motion: reduce){
  .gl-worry .glw-screen{animation:none;}
  .gl-worry .glw-btn,
  .gl-worry .glw-chip,
  .gl-worry .glw-choice,
  .gl-worry .glw-crumbs i,
  .gl-worry .glw-input,
  .gl-worry .glw-ambient-sw,
  .gl-worry .glw-ambient-sw::after{transition:none;}
  .gl-worry .glw-orb,
  .gl-worry .glw-orb-ring{transform:scale(.82) !important;}
}