/* ============================================================
   GoodLives — Thought reframe widget ([gl_reframe] shortcode)
   A GUIDED 4-step CBT "thought record" that sits inline in a blog
   post: catch the thought, name the trap (chips, each with an
   explanation + antidote + worked example), look again (prompts
   guided by the chosen traps, with tap-to-insert starters), then
   your reframe (original + balanced thought + one small next step).
   It teaches and scaffolds; 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-reframe AND every inner class is
   namespaced glr-* so the widget never collides with the blog's own
   .gl-btn / .gl-title / .gl-dot system, nor with gl-breathe's glb-*.
   LOCKED dark-green immersive palette — always on, matches gl-breathe.
   Palette: logo green #49AF7C + sage + white, hue-true green tints
   only. Quicksand. No pills: 12px radius on every button and chip.
   ============================================================ */

.gl-reframe{
  /* 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-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-reframe *{box-sizing:border-box;}

/* --- header: eyebrow + progress --- */
.gl-reframe .glr-head{
  padding:26px 32px 20px;
  background:linear-gradient(160deg, var(--gl-stage) 0%, var(--gl-stage-2) 100%);
  border-bottom:1px solid var(--gl-border);
}
.gl-reframe .glr-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:16px;
}
.gl-reframe .glr-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-reframe .glr-progress{display:flex;flex-direction:column;gap:9px;}
.gl-reframe .glr-step-label{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--gl-muted);
}
.gl-reframe .glr-bar{display:flex;gap:6px;}
.gl-reframe .glr-bar i{
  flex:1;height:5px;border-radius:999px;background:var(--gl-track);
  transition:background .3s ease;
}
.gl-reframe .glr-bar i.is-done{background:var(--gl-green-dark);}
.gl-reframe .glr-bar i.is-current{background:var(--gl-green);}

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

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

/* --- inputs ---
   Hestia's JS tags every field with Bootstrap's .form-control class, and
   .gl-main :is(textarea,input).form-control (plus Bootstrap itself) outranks a
   plain two-class selector, forcing a white fill + green edge meant for the
   light blog. The widget's locked dark palette must win, so the overridden
   visual properties carry !important here. Everything stays scoped under
   .gl-reframe, so none of this can touch the blog's own form fields. */
.gl-reframe .glr-input{
  width:100% !important;
  font-family:inherit;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
  color:var(--gl-text) !important;
  background:var(--gl-stage) !important;
  border:1px solid var(--gl-border) !important;
  border-radius:var(--gl-radius-md) !important;
  padding:14px 16px !important;
  resize:vertical;
  min-height:92px !important;
  box-shadow:none !important;
  transition:border-color .2s, box-shadow .2s;
}
.gl-reframe .glr-input::placeholder{color:var(--gl-muted) !important;opacity:.62 !important;}
.gl-reframe .glr-input:focus{
  outline:none !important;
  border-color:var(--gl-green) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gl-green) 20%, transparent) !important;
}
.gl-reframe .glr-input:focus-visible{
  outline:2px solid var(--gl-green) !important;
  outline-offset:2px !important;
}
.gl-reframe .glr-field{margin:0 0 18px;}
.gl-reframe .glr-field:last-child{margin-bottom:4px;}
.gl-reframe .glr-label{
  display:block;margin:0 0 8px;
  font-size:14.5px;font-weight:600;line-height:1.45;color:var(--gl-text);
}
.gl-reframe .glr-field .glr-input{min-height:84px !important;}

/* --- step 1: "see an example" toggle --- */
.gl-reframe .glr-example-toggle{
  appearance:none;cursor:pointer;font-family:inherit;
  margin-top:14px;padding:0;border:0;background:none;
  font-size:14px;font-weight:600;line-height:1.4;color:var(--gl-green);
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.gl-reframe .glr-example-toggle:focus-visible{outline:2px solid var(--gl-green);outline-offset:3px;border-radius:4px;}
.gl-reframe .glr-example-toggle svg{width:15px;height:15px;flex:none;transition:transform .2s;}
.gl-reframe .glr-example-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.gl-reframe .glr-worked{
  margin:14px 0 2px;padding:15px 16px;
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-left:3px solid var(--gl-green-dark);
  border-radius:0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
}
.gl-reframe .glr-worked[hidden]{display:none;}
.gl-reframe .glr-worked-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;font-weight:500;line-height:1.55;color:var(--gl-text);
}
.gl-reframe .glr-worked-row + .glr-worked-row{margin-top:10px;}
.gl-reframe .glr-worked-tag{
  flex:none;min-width:58px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gl-green-dark);padding-top:2px;
}
.gl-reframe .glr-worked-row.is-trap .glr-worked-tag{color:var(--gl-muted);}
.gl-reframe .glr-worked-row.is-new .glr-worked-tag{color:var(--gl-green);}

/* --- chips (multi-select traps) --- */
.gl-reframe .glr-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px;}
.gl-reframe .glr-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:11px 14px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .18s, border-color .18s, color .18s, transform .08s;
}
.gl-reframe .glr-chip:hover{border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));}
.gl-reframe .glr-chip:active{transform:scale(.97);}
.gl-reframe .glr-chip:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-reframe .glr-chip .glr-tick{
  width:15px;height:15px;flex:none;opacity:0;transform:scale(.6);
  transition:opacity .18s, transform .18s;
}
.gl-reframe .glr-chip.is-on{
  background:color-mix(in srgb, var(--gl-green) 20%, var(--gl-stage));
  border-color:var(--gl-green);
  color:#fff;
}
.gl-reframe .glr-chip.is-on .glr-tick{opacity:1;transform:none;}
.gl-reframe .glr-chip--unsure{font-weight:500;color:var(--gl-muted);}
.gl-reframe .glr-chip--unsure.is-on{color:#fff;}

/* --- trap guidance area (step 2) --- */
.gl-reframe .glr-trapwrap{margin:0 0 4px;min-height:56px;}
.gl-reframe .glr-hint{
  margin:0;
  font-size:14px;font-weight:500;line-height:1.55;color:var(--gl-muted);
  background:var(--gl-stage);
  border-left:3px solid var(--gl-green-dark);
  border-radius:0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
  padding:12px 15px;
}
.gl-reframe .glr-detail + .glr-detail{margin-top:10px;}
.gl-reframe .glr-detail{
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-left:3px solid var(--gl-green-dark);
  border-radius:0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
  padding:13px 16px;
  animation:glr-fade .22s ease both;
}
.gl-reframe .glr-detail-name{
  display:block;margin-bottom:5px;
  font-size:15px;font-weight:700;line-height:1.3;color:var(--gl-text);
}
.gl-reframe .glr-detail-explain{
  margin:0 0 11px;font-size:14px;font-weight:500;line-height:1.5;color:var(--gl-muted);
}
.gl-reframe .glr-mini-label{
  display:block;margin-bottom:3px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gl-green);
}
.gl-reframe .glr-antidote{margin:0 0 10px;}
.gl-reframe .glr-antidote p{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--gl-text);}
.gl-reframe .glr-ex{margin:0;}
.gl-reframe .glr-ex .glr-mini-label{color:var(--gl-muted);}
.gl-reframe .glr-ex p{
  margin:0;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--gl-muted);
  font-style:italic;
}

/* --- step 3: guided prompts + balanced box + starters --- */
.gl-reframe .glr-guides{margin:0 0 20px;}
.gl-reframe .glr-guide{
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-left:3px solid var(--gl-green-dark);
  border-radius:0 var(--gl-radius-sm) var(--gl-radius-sm) 0;
  padding:13px 16px;
}
.gl-reframe .glr-guide + .glr-guide{margin-top:10px;}
.gl-reframe .glr-guide-trap{
  display:block;margin-bottom:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gl-green);
}
.gl-reframe .glr-guide-q{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--gl-text);}
.gl-reframe .glr-guide-ex{
  margin:9px 0 0;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--gl-muted);
  font-style:italic;
}
.gl-reframe .glr-guide-ex b{font-style:normal;font-weight:600;color:var(--gl-muted);
  letter-spacing:.05em;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:2px;}

.gl-reframe .glr-starters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 11px;}
.gl-reframe .glr-starter{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;line-height:1.2;
  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:8px 12px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .18s, border-color .18s, transform .08s;
}
.gl-reframe .glr-starter:hover{background:color-mix(in srgb, var(--gl-green) 18%, var(--gl-stage));}
.gl-reframe .glr-starter:active{transform:scale(.97);}
.gl-reframe .glr-starter:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-reframe .glr-starter svg{width:13px;height:13px;flex:none;opacity:.85;}
.gl-reframe .glr-starters-label{
  display:block;margin:0 0 9px;
  font-size:12.5px;font-weight:500;line-height:1.4;color:var(--gl-muted);
}

/* --- step 4: the reframe + next step --- */
.gl-reframe .glr-rcard{
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-md);
  padding:16px 18px;
  background:var(--gl-stage);
}
.gl-reframe .glr-rcard--new{
  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%);
  border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));
}
.gl-reframe .glr-card-label{
  display:block;margin-bottom:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gl-green-dark);
}
.gl-reframe .glr-rcard--new .glr-card-label{color:var(--gl-green);}
.gl-reframe .glr-card-text{
  margin:0;font-size:16px;font-weight:500;line-height:1.6;color:var(--gl-text);
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
}
.gl-reframe .glr-card-text.is-empty{color:var(--gl-muted);font-weight:500;}
.gl-reframe .glr-arrow{display:flex;justify-content:center;padding:10px 0;color:var(--gl-green);}
.gl-reframe .glr-arrow svg{width:22px;height:22px;}
.gl-reframe .glr-traps-note{
  margin:14px 0 0;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--gl-muted);
}
.gl-reframe .glr-traps-note b{color:var(--gl-text);font-weight:600;}

/* next-step menu */
.gl-reframe .glr-next{margin:22px 0 2px;}
.gl-reframe .glr-next-head{
  display:block;margin:0 0 4px;
  font-size:15px;font-weight:700;line-height:1.3;color:var(--gl-text);
}
.gl-reframe .glr-next-sub{
  margin:0 0 13px;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--gl-muted);
}
.gl-reframe .glr-next-menu{display:flex;flex-wrap:wrap;gap:9px;}
.gl-reframe .glr-next-opt{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;
  color:var(--gl-text);
  background:var(--gl-stage);
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-sm);
  padding:11px 14px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .18s, border-color .18s, color .18s, transform .08s;
}
.gl-reframe .glr-next-opt:hover{border-color:color-mix(in srgb, var(--gl-green) 45%, var(--gl-border));}
.gl-reframe .glr-next-opt:active{transform:scale(.97);}
.gl-reframe .glr-next-opt:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-reframe .glr-next-opt .glr-tick{
  width:15px;height:15px;flex:none;opacity:0;transform:scale(.6);
  transition:opacity .18s, transform .18s;
}
.gl-reframe .glr-next-opt.is-on{
  background:color-mix(in srgb, var(--gl-green) 20%, var(--gl-stage));
  border-color:var(--gl-green);color:#fff;
}
.gl-reframe .glr-next-opt.is-on .glr-tick{opacity:1;transform:none;}
.gl-reframe .glr-next-own{margin-top:11px;}
.gl-reframe .glr-next-own[hidden]{display:none;}
.gl-reframe .glr-next-own .glr-input{min-height:0 !important;height:48px !important;resize:none;}

.gl-reframe .glr-close{
  margin:22px 0 6px;font-size:15px;font-weight:600;line-height:1.55;
  color:var(--gl-text);text-align:center;
}
.gl-reframe .glr-final{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
}
.gl-reframe .glr-final .glr-btn--primary{flex:1;min-width:170px;}

/* --- footer: back / next + privacy --- */
.gl-reframe .glr-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 32px 10px;
}
.gl-reframe .glr-foot-spacer{flex:1;}
.gl-reframe .glr-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-reframe .glr-privacy svg{width:14px;height:14px;flex:none;opacity:.8;}

/* --- buttons (12px radius, no pills) --- */
.gl-reframe .glr-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-reframe .glr-btn:active{transform:scale(.97);}
.gl-reframe .glr-btn:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-reframe .glr-btn svg{width:18px;height:18px;flex:none;}
.gl-reframe .glr-btn--primary{
  background:var(--gl-green);color:#fff;border:1px solid transparent;
  box-shadow:var(--gl-shadow-soft);
}
/* gl-blog resets box-shadow:none !important on every button that is not a blog
   .gl-btn (to kill Hestia's purple accent shadow); its selector outranks a
   two-class one, so the widget restores its own lift with a three-class rule. */
.gl-reframe .glr-btn.glr-btn--primary{box-shadow:var(--gl-shadow-soft) !important;}
.gl-reframe .glr-btn--primary:hover{background:var(--gl-green-dark);}
.gl-reframe .glr-btn--primary.is-ok{background:var(--gl-green-dark);}
.gl-reframe .glr-btn--ghost{
  background:transparent;color:var(--gl-text);border:1px solid var(--gl-border);
}
.gl-reframe .glr-btn--ghost:hover{background:var(--gl-stage);}
.gl-reframe .glr-btn[hidden]{display:none;}
.gl-reframe .glr-btn:disabled{opacity:.4;cursor:default;pointer-events:none;}

/* --- stack on phones --- */
@media (max-width:520px){
  .gl-reframe .glr-head{padding:22px 20px 18px;}
  .gl-reframe .glr-body{padding:24px 20px 6px;}
  .gl-reframe .glr-foot{padding:16px 20px 8px;}
  .gl-reframe .glr-privacy{padding:10px 20px 20px;}
  .gl-reframe .glr-title{font-size:21px;}
  .gl-reframe .glr-final .glr-btn--primary{min-width:0;}
  .gl-reframe .glr-btn{padding:0 16px;}
  .gl-reframe .glr-worked-row{flex-direction:column;gap:2px;}
  .gl-reframe .glr-worked-tag{min-width:0;}
}

@media (prefers-reduced-motion: reduce){
  .gl-reframe .glr-step,
  .gl-reframe .glr-detail{animation:none;}
  .gl-reframe .glr-btn,
  .gl-reframe .glr-chip,
  .gl-reframe .glr-bar i,
  .gl-reframe .glr-input,
  .gl-reframe .glr-starter,
  .gl-reframe .glr-next-opt,
  .gl-reframe .glr-example-toggle svg{transition:none;}
}