/* ============================================================
   grounding.css — The Grounding Room
   Rewritten to INHERIT the site's design tokens rather than
   defining its own palette, fonts and surfaces.

   Everything here uses var(--forest), var(--raspberry) etc.
   from style.css, so the page matches every other page and
   any future palette change flows through automatically.

   Only genuinely tool-specific rules live here.
   ============================================================ */

.gr { font-family: var(--font-body); color: var(--charcoal); }

/* ── Tool picker — site pill buttons ── */
.gr-picker {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-12);
}
.gr-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.25s var(--ease-bounce);
}
.gr-tab:hover {
  border-color: var(--grapefruit);
  color: var(--forest);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.gr-tab.on {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}
.gr-tab:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 3px; }

/* ── Panels ── */
.gr-panel { display: none; }
.gr-panel.on { display: block; animation: gr-fade 0.4s var(--ease-out); }
@keyframes gr-fade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

.gr-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--forest);
  text-align: center;
  margin-bottom: var(--space-3);
}
.gr-sub {
  font-size: var(--text-base);
  color: var(--muted);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto var(--space-10);
  line-height: 1.7;
}

/* ── Shared card surface ── */
.gr-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* ── Instruction + counter ── */
.gr-instr {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--raspberry);
  text-align: center;
  min-height: 2rem;
}
.gr-count {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--forest-soft);
  text-align: center;
  min-height: 3.5rem;
  line-height: 1.1;
}

/* ── Buttons reuse .btn from style.css; only layout here ── */
.gr-actions { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* ── 1. BOX ── */
.gr-canvas-wrap { display: flex; justify-content: center; margin: var(--space-4) 0; }
.gr-phases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); max-width: 280px; margin: var(--space-5) auto 0; }
.gr-phase {
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 0.45rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border); color: var(--muted);
  transition: all 0.3s var(--ease);
}
.gr-phase.lit { background: var(--raspberry-soft); border-color: var(--raspberry); color: var(--raspberry); }

/* ── 2. BALLOON ── */
.gr-stage { display: flex; justify-content: center; align-items: center; height: 280px; }
#bel {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--grapefruit), var(--raspberry));
  box-shadow: 0 8px 32px rgba(192,43,85,0.28);
  position: relative;
}
#bel::after {
  content:''; position:absolute; bottom:-20px; left:50%;
  transform: translateX(-50%); width:2px; height:20px; background: var(--border);
}

/* ── 3. SENSING ── */
.gr-sense-list { display: flex; flex-direction: column; gap: var(--space-3); }
.gr-row {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  opacity: 0.45;
  transition: all 0.3s var(--ease-bounce);
}
.gr-row.cur  { opacity:1; border-color: var(--raspberry); background: var(--raspberry-soft); transform: scale(1.015); box-shadow: var(--shadow-md); }
.gr-row.done { opacity:.65; border-color: var(--lime); background: var(--lime-soft); }
.gr-row-top  { display:flex; align-items:center; gap: var(--space-4); }
.gr-num {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 300;
  color: var(--border); line-height:1; min-width:1.6rem; transition: color .3s;
}
.gr-row.cur .gr-num  { color: var(--raspberry); }
.gr-row.done .gr-num { color: #8E8A38; }
.gr-lbl { font-size: var(--text-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); display:block; margin-bottom:.15rem; }
.gr-row.cur .gr-lbl { color: var(--raspberry); }
.gr-prompt { font-size: var(--text-sm); color: var(--muted); }
.gr-row.cur .gr-prompt { color: var(--charcoal); }
.gr-check { margin-left:auto; font-size:1.1rem; opacity:0; color:#8E8A38; transition: opacity .3s; }
.gr-row.done .gr-check { opacity:1; }
.gr-entry { margin-top: var(--space-4); display:none; }
.gr-row.cur .gr-entry { display:block; }
.gr-entry input {
  width:100%; padding:.6rem .9rem;
  border:1.5px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--charcoal); background: var(--white); outline:none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gr-entry input:focus { border-color: var(--raspberry); box-shadow: var(--shadow-glow); }
.gr-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.gr-tag {
  font-size: var(--text-xs); padding:.15rem .7rem; border-radius: var(--radius-full);
  background: var(--lime-soft); border:1px solid rgba(191,183,77,.4); color:#7E7826;
}
.gr-complete {
  display:none; text-align:center; padding: var(--space-8);
  background: var(--lime-soft); border:1.5px solid rgba(191,183,77,.4);
  border-radius: var(--radius-xl); margin-top: var(--space-4);
}
.gr-complete.on { display:block; }
.gr-complete p { font-family: var(--font-display); font-size: var(--text-lg); font-style:italic; color:#7E7826; margin-bottom: var(--space-5); }

/* ── 4. BODY SCAN ── */
.gr-scan-layout { display:flex; gap: var(--space-10); align-items:flex-start; }
.gr-figure { flex-shrink:0; width:130px; }
.gr-figure svg { width:100%; }
.gr-region {
  cursor:pointer; fill: var(--forest-soft); stroke: var(--border); stroke-width:1.5;
  transition: all .25s var(--ease-bounce);
}
.gr-region:hover { fill: var(--grapefruit-soft); stroke: var(--grapefruit); }
.gr-region.on    { fill: var(--raspberry-soft); stroke: var(--raspberry); stroke-width:2.5; }
.gr-scan-info { flex:1; }
.gr-scan-name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--forest); margin-bottom: var(--space-3); }
.gr-scan-body { font-size: var(--text-sm); line-height:1.75; color: var(--muted); margin-bottom: var(--space-5); }
.gr-scan-cue {
  font-family: var(--font-display); font-size: var(--text-md); font-style:italic;
  color: var(--raspberry); line-height:1.65;
  padding: var(--space-5) var(--space-6);
  background: var(--raspberry-soft);
  border-left: 3px solid var(--raspberry);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display:none;
}
.gr-hint { font-size: var(--text-xs); color: var(--muted); text-align:center; margin-top: var(--space-6); font-style:italic; }

/* ── 5. WORRY DROP ── */
.gr-worry-layout { display:flex; gap: var(--space-10); align-items:flex-start; }
.gr-worry-left { flex:1; }
.gr-worry-input {
  width:100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--charcoal); line-height:1.65; padding: var(--space-4);
  min-height:110px; border:1.5px solid var(--border);
  border-radius: var(--radius-lg); background: var(--white);
  outline:none; resize:vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gr-worry-input:focus { border-color: var(--raspberry); box-shadow: var(--shadow-glow); }
.gr-worry-input::placeholder { color: var(--border); font-style:italic; }
.gr-worry-msg { margin-top: var(--space-4); font-family: var(--font-display); font-style:italic; color:#7E7826; font-size: var(--text-md); min-height:1.5rem; line-height:1.6; }
.gr-worry-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top: var(--space-3); }
.gr-worry-tag {
  font-size: var(--text-xs); padding:.2rem .75rem; border-radius: var(--radius-full);
  background: var(--raspberry-soft); border:1px solid rgba(192,43,85,.25); color: var(--raspberry);
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gr-jar { flex-shrink:0; width:125px; }
.gr-jar svg { width:100%; }
.gr-note { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-5); font-style:italic; line-height:1.65; }

/* ── 6. COLOUR ── */
.gr-colour-ctrl { display:flex; justify-content:center; gap: var(--space-12); margin-bottom: var(--space-6); }
.gr-colour-group { text-align:center; }
.gr-colour-group label { font-size: var(--text-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); display:block; margin-bottom: var(--space-3); }
.gr-colour-group input[type="color"] {
  width:56px; height:56px; border-radius:50%; border:2px solid var(--border);
  cursor:pointer; padding:3px; background:none;
  transition: transform .25s var(--ease-bounce), border-color var(--transition);
}
.gr-colour-group input[type="color"]:hover { transform: scale(1.08); border-color: var(--grapefruit); }
.gr-colour-stage {
  height:200px; border-radius: var(--radius-xl); border:1.5px solid var(--border);
  position:relative; overflow:hidden; background: var(--white); margin-bottom: var(--space-4);
}
.gr-colour-fill { position:absolute; bottom:0; left:0; right:0; transition: height .08s linear; }
.gr-colour-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: var(--text-xl); font-style:italic;
  color: var(--muted); pointer-events:none;
}

/* ── 7. SAFE PLACE ── */
.gr-safe-card {
  background: var(--forest);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  min-height:180px;
  margin-bottom: var(--space-6);
  display:flex; align-items:center;
}
.gr-safe-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight:300; color: rgba(255,255,255,.88); line-height:1.85; transition: opacity .35s; }
.gr-progress { display:flex; gap:.4rem; justify-content:center; margin-bottom: var(--space-5); }
.gr-dot { width:8px; height:8px; border-radius:50%; background: var(--border); transition: background .3s, transform .3s; }
.gr-dot.done   { background: var(--lime); }
.gr-dot.active { background: var(--raspberry); transform: scale(1.3); }

/* ── Footer note ── */
.gr-footer {
  max-width: 44rem; margin: var(--space-16) auto 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); line-height:1.75; color: var(--muted); text-align:center;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .gr-scan-layout, .gr-worry-layout { flex-direction: column; align-items: center; }
  .gr-figure, .gr-jar { width: 110px; }
  .gr-colour-ctrl { gap: var(--space-8); }
  .gr-safe-card { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-tab, .gr-row, .gr-region, .gr-dot,
  .gr-colour-group input[type="color"] { transition: none !important; transform: none !important; }
  .gr-panel.on { animation: none; }
}

/* ── Per-tool mascot ── */
.gr-mascot {
  width: 96px; height: auto;
  display: block; margin: 0 auto var(--space-4);
  filter: drop-shadow(0 8px 20px rgba(20,64,47,.12));
  transition: transform .4s var(--ease-bounce);
}
.gr-panel.on .gr-mascot:hover { transform: translateY(-6px) rotate(-3deg); }

/* ── Pop-on-hover for grounding interactives ── */
.gr-tab { box-shadow: var(--shadow-sm); }
.gr-tab:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.gr-card { box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.gr-card:hover { box-shadow: var(--shadow-md); }
.gr-row:hover { box-shadow: var(--shadow-md); }
.gr-region:hover { filter: drop-shadow(0 4px 10px rgba(194,24,91,.25)); }
/* ============================================================
   GROUNDING ROOM — desktop layout
   APPEND to the END of static/css/grounding.css

   ── THE PROBLEM ────────────────────────────────────────────
   Everything stacked in one column: mascot, title, subtitle,
   then a wide card holding a 270px canvas. On a 1200px screen
   that leaves most of the card empty and makes the exercise
   look like an afterthought.

   ── THE FIX ────────────────────────────────────────────────
   Put the visual and its controls side by side from 900px up,
   shrink the header, and let the canvas grow to fill its column.
   ============================================================ */

/* ── Compact header: mascot beside the title, not above it ── */
.gr-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.gr-mascot {
  width: 64px;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
  filter: none;
}
.gr-title { margin-bottom: 0; text-align: left; }
.gr-sub   { margin-bottom: var(--space-8); }

@media (max-width: 520px) {
  .gr-head { flex-direction: column; gap: var(--space-2); }
  .gr-title { text-align: center; }
  .gr-mascot { width: 56px; }
}

/* ── Two-column card from 900px up ── */
@media (min-width: 900px) {
  .gr-card--split {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(280px, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem);
  }
  .gr-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .gr-card__controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    min-width: 0;
  }
  /* Left-align controls in the second column — centred text in a
     narrow column looks unanchored */
  .gr-card__controls .gr-instr,
  .gr-card__controls .gr-count { text-align: left; }
  .gr-card__controls .gr-actions { justify-content: flex-start; }
  .gr-card__controls .gr-phases { margin: 0; max-width: 300px; }
  .gr-card__controls .gr-colour-ctrl { justify-content: flex-start; margin-bottom: 0; }
}

@media (max-width: 899px) {
  .gr-card__controls { display: flex; flex-direction: column; gap: var(--space-4); }
}

/* ── The canvas fills its column ── */
.gr-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}
#boxC { max-width: 100%; height: auto; }

/* ── Balloon stage scales too ── */
.gr-stage {
  height: clamp(280px, 32vw, 380px);
  width: 100%;
}

/* ── Colour stage taller on desktop ── */
.gr-colour-stage {
  height: clamp(200px, 28vw, 340px);
  margin-bottom: 0;
}

/* ── Larger instruction text — it's the thing being followed ── */
.gr-instr {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.4;
}
.gr-count {
  font-size: clamp(3rem, 6vw, 4.5rem);
  min-height: auto;
  color: var(--raspberry);
  opacity: .22;
}

/* ── Tighter vertical rhythm overall ── */
.gr-picker { margin-bottom: var(--space-8); }
.gr-panel.on { padding-top: var(--space-2); }

/* ── Body scan and worry drop: wider columns on desktop ── */
@media (min-width: 900px) {
  .gr-scan-layout, .gr-worry-layout { gap: clamp(2.5rem, 5vw, 4rem); }
  .gr-figure { width: 170px; }
  .gr-jar    { width: 150px; }
  .gr-scan-cue { font-size: 1.0625rem; }
}

/* ── 5-4-3-2-1 rows: roomier on desktop ── */
@media (min-width: 900px) {
  .gr-row { padding: var(--space-6) var(--space-8); }
  .gr-num { font-size: 2.5rem; }
}

/* ── Safe Place card: taller, text larger ── */
@media (min-width: 900px) {
  .gr-safe-card { min-height: 220px; padding: clamp(2.5rem, 5vw, 3.5rem); }
  .gr-safe-text { font-size: clamp(1.1rem, 1.6vw, 1.375rem); }
}

/* ── Keep the page from sprawling on very wide screens ── */
@media (min-width: 1400px) {
  .gr { max-width: 1100px; margin-inline: auto; }
}

/* ============================================================
   GROUNDING ROOM — desktop layout
   APPEND to the END of static/css/grounding.css

   ── THE PROBLEM ────────────────────────────────────────────
   Everything stacked in one column: mascot, title, subtitle,
   then a wide card holding a 270px canvas. On a 1200px screen
   that leaves most of the card empty and makes the exercise
   look like an afterthought.

   ── THE FIX ────────────────────────────────────────────────
   Put the visual and its controls side by side from 900px up,
   shrink the header, and let the canvas grow to fill its column.
   ============================================================ */

/* ── Compact header: mascot beside the title, not above it ── */
.gr-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.gr-mascot {
  width: 64px;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
  filter: none;
}
.gr-title { margin-bottom: 0; text-align: left; }
.gr-sub   { margin-bottom: var(--space-8); }

@media (max-width: 520px) {
  .gr-head { flex-direction: column; gap: var(--space-2); }
  .gr-title { text-align: center; }
  .gr-mascot { width: 56px; }
}

/* ── Two-column card from 900px up ── */
@media (min-width: 900px) {
  .gr-card--split {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(280px, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem);
  }
  .gr-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .gr-card__controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    min-width: 0;
  }
  /* Left-align controls in the second column — centred text in a
     narrow column looks unanchored */
  .gr-card__controls .gr-instr,
  .gr-card__controls .gr-count { text-align: left; }
  .gr-card__controls .gr-actions { justify-content: flex-start; }
  .gr-card__controls .gr-phases { margin: 0; max-width: 300px; }
  .gr-card__controls .gr-colour-ctrl { justify-content: flex-start; margin-bottom: 0; }
}

@media (max-width: 899px) {
  .gr-card__controls { display: flex; flex-direction: column; gap: var(--space-4); }
}

/* ── The canvas fills its column ── */
.gr-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}
#boxC { max-width: 100%; height: auto; }

/* ── Balloon stage scales too ── */
.gr-stage {
  height: clamp(280px, 32vw, 380px);
  width: 100%;
}

/* ── Colour stage taller on desktop ── */
.gr-colour-stage {
  height: clamp(200px, 28vw, 340px);
  margin-bottom: 0;
}

/* ── Larger instruction text — it's the thing being followed ── */
.gr-instr {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.4;
}
.gr-count {
  font-size: clamp(3rem, 6vw, 4.5rem);
  min-height: auto;
  color: var(--raspberry);
  opacity: .22;
}

/* ── Tighter vertical rhythm overall ── */
.gr-picker { margin-bottom: var(--space-8); }
.gr-panel.on { padding-top: var(--space-2); }

/* ── Body scan and worry drop: wider columns on desktop ── */
@media (min-width: 900px) {
  .gr-scan-layout, .gr-worry-layout { gap: clamp(2.5rem, 5vw, 4rem); }
  .gr-figure { width: 170px; }
  .gr-jar    { width: 150px; }
  .gr-scan-cue { font-size: 1.0625rem; }
}

/* ── 5-4-3-2-1 rows: roomier on desktop ── */
@media (min-width: 900px) {
  .gr-row { padding: var(--space-6) var(--space-8); }
  .gr-num { font-size: 2.5rem; }
}

/* ── Safe Place card: taller, text larger ── */
@media (min-width: 900px) {
  .gr-safe-card { min-height: 220px; padding: clamp(2.5rem, 5vw, 3.5rem); }
  .gr-safe-text { font-size: clamp(1.1rem, 1.6vw, 1.375rem); }
}

/* ── Keep the page from sprawling on very wide screens ── */
@media (min-width: 1400px) {
  .gr { max-width: 1100px; margin-inline: auto; }
}