/* public/assets/css/breath.css – Breathing studio */
.rk-breath { gap: .7rem; }
.rk-breath-controls { display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; justify-content: center; }
.rk-breath-field { display: flex; flex-direction: column; gap: .2rem; min-width: 140px; flex: 1 1 140px; max-width: 220px; }
.rk-breath-field label { font-size: 0.8rem; color: var(--text2); letter-spacing: .04em; }
.rk-breath-field select { min-height: 44px; font-size: 0.82rem; padding: .4rem .6rem; width: 100%; }
.rk-breath-desc { margin: 0; font-size: 0.84rem; color: var(--text2); text-align: center; line-height: 1.5; max-width: 320px; }

.rk-breath-stage { position: relative; width: 190px; height: 190px; margin: .3rem 0; display: flex; align-items: center; justify-content: center; }
.rk-breath-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rk-breath-ring-track { fill: none; stroke: var(--border2, rgba(255,255,255,.12)); stroke-width: 3; }
.rk-breath-ring-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

.rk-breath #breath-circle {
  width: 96px; height: 96px; flex-direction: column; gap: .15rem; text-align: center;
  transition-property: transform, box-shadow; transition-timing-function: ease-in-out;
  background: radial-gradient(circle, rgba(139,156,244,.30), rgba(139,156,244,.04) 72%);
}
.rk-breath-label { font-size: 0.8rem; font-weight: 500; letter-spacing: .03em; line-height: 1.2; padding: 0 .3rem; }
.rk-breath-count { font-size: 0.8rem; color: var(--text2); min-height: 1em; }
.rk-breath-remaining { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; letter-spacing: .1em; color: var(--text2); min-height: 1.5em; }

.rk-breath-opts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; }
.rk-breath-check { display: flex; align-items: center; gap: .45rem; font-size: 0.84rem; color: var(--text2); min-height: 44px; cursor: pointer; }
.rk-breath-check input { width: 20px; height: 20px; accent-color: var(--accent); }

.rk-breath-btn {
  min-height: 48px; min-width: 160px; padding: .6rem 1.4rem; border-radius: var(--r, 12px);
  border: 1px solid var(--accent); background: rgba(139,156,244,.16); color: var(--text);
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; cursor: pointer; transition: background .2s;
}
.rk-breath-btn:hover { background: rgba(139,156,244,.26); }
.rk-breath-btn.running { background: transparent; }
.rk-breath-btn:focus-visible, .rk-breath-field select:focus-visible, .rk-breath-check input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Reduced motion: no scaling circle, only the static progress ring + text */
@media (prefers-reduced-motion: reduce) {
  .rk-breath #breath-circle { transition: none !important; transform: none !important; }
  .rk-breath-btn { transition: none; }
}