/* הזהות של TheMind — נטען אחרי app.css בדפי המוצר הזה בלבד.
   אותה מערכת-עיצוב, אקסנט אחר: במקום ענבר-האינפרנו של המפה, ירוק-מים
   קריר — צבע של ויסות, לא של חום. שאר הטוקנים יורשים כמות שהם. */

:root {
  --heat:    #4FC8B0;
  --heat-lo: #7EDCC9;
  --heat-hi: #2FA893;
  --text-on-accent: #06110E;

  /* רמפת סימן-המותג: מקביל ל-heat-30..90 של המפה, במשפחה הקרירה */
  --heat-30: #143A4A;
  --heat-60: #1F7A6E;
  --heat-70: #2FA893;
  --heat-90: #A5EBDD;
}

/* ── רכיבי התרגול ── */

.drill-line { display: block; width: 100%; max-width: 560px; height: auto;
              margin: var(--sp-4) 0; border: 1px solid var(--border-subtle);
              border-radius: var(--r-md); background: var(--bg-canvas); }

.drill-clock { height: 4px; max-width: 560px; margin-bottom: var(--sp-4);
               border-radius: 2px; overflow: hidden;
               background: var(--bg-overlay, rgba(255,255,255,.06)); }
.drill-clock i { display: block; height: 100%; width: 100%;
                 background: linear-gradient(to left, var(--heat-hi), var(--heat-lo));
                 transition: width 1s linear; }
.drill-clock[data-out] i { background: var(--ink-risk, #d96a5a); }

.breath-ring { width: 96px; height: 96px; margin: var(--sp-5) auto;
               border-radius: 50%;
               border: 2px solid var(--heat-hi);
               background: color-mix(in srgb, var(--heat) 14%, transparent);
               transition: transform 4s ease-in-out; }
.breath-ring[data-phase="in"]  { transform: scale(1.25); transition-duration: 4s; }
.breath-ring[data-phase="out"] { transform: scale(0.8); transition-duration: 6s; }
.breath-ring[data-phase="done"] { transform: scale(1); opacity: .55; }
.breath-word { text-align: center; margin: 0; color: var(--text-secondary);
               font-size: var(--fs-sm); }
.breath-count { display: block; text-align: center; margin-top: var(--sp-2);
                font-family: var(--font-num); font-size: var(--fs-2xs);
                color: var(--text-tertiary); }

.ctl__kv { display: flex; align-items: baseline; gap: var(--sp-3);
           padding-block: var(--sp-2);
           border-bottom: 1px solid var(--border-subtle); }
.ctl__kv:last-child { border-bottom: 0; }
.ctl__kv b { font-family: var(--font-num); font-size: var(--fs-md);
             color: var(--heat-lo); min-width: 6ch; }
.ctl__kv span { color: var(--text-secondary); font-size: var(--fs-xs); }