/* Gas Relief Routine — Warm Daytime Theme
   Uses the standard sky-blue accent system (--sky, --sky-deep) per design system.
   Differentiation from calming routine comes from light cream background,
   warm text colours, and nature-themed decorations in gold/blush/lavender. */

body.routine-page.routine-page--gas {
  --gas-cream: #F7F5F0;
  --gas-cream-warm: #F2EDE6;
  --gas-gold: #C4A35A;
  --gas-gold-soft: #E8D5A0;
  --sky-text: #4A7F9C;       /* Darker sky for text on light backgrounds — passes WCAG AA */
  background: var(--gas-cream);
  color: var(--night);
}

/* ── Header — warm gradient ── */
.routine-page--gas .routine-header {
  background: linear-gradient(175deg, #E8EEF2 0%, var(--gas-cream) 100%);
}

.routine-page--gas .routine-header__brand {
  color: var(--night-soft);
}

.routine-page--gas .routine-header__badge {
  color: var(--sky-text);
  background: rgba(184, 212, 227, 0.1);
  border-color: rgba(184, 212, 227, 0.2);
}

.routine-page--gas .routine-header h1 {
  color: var(--night);
}

.routine-page--gas .routine-header__desc {
  color: var(--night-soft);
}

/* Compact header */
.routine-page--gas .routine-header--compact {
  background: linear-gradient(175deg, #E0E8ED 0%, #E8EEF2 100%);
  border-bottom: 1px solid rgba(123, 167, 194, 0.12);
  box-shadow: 0 2px 12px rgba(123, 167, 194, 0.06);
}

.routine-page--gas .routine-header--compact h1 {
  color: var(--sky-text);
  font-size: 1rem;
}

/* Hide the dark-themed glow on light background */
.routine-page--gas .routine-header__glow {
  display: none;
}

/* ── Tighten step layout to match calming routine ── */
.routine-page--gas .step-progress {
  margin-bottom: 0.25rem;
}

.routine-page--gas .step-nav {
  margin-bottom: 0.5rem;
}

.routine-page--gas .step__number-ring {
  width: 52px;
  height: 52px;
  margin-bottom: 0.25rem;
  background: radial-gradient(circle, rgba(184,212,227,0.1) 0%, transparent 70%);
  border-color: rgba(184, 212, 227, 0.25);
}

.routine-page--gas .step__ring-pulse {
  border-color: var(--sky);
}

.routine-page--gas .step__number {
  color: var(--sky-text);
}

.routine-page--gas .step__label {
  margin-bottom: 0.1rem;
  font-size: 0.65rem;
  color: var(--night-soft);
}

.routine-page--gas .step__title {
  margin-bottom: 0.2rem;
  color: var(--night);
}

.routine-page--gas .step__why {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: var(--sky-text);
}

.routine-page--gas .step__instructions {
  gap: 0.15rem;
}

.routine-page--gas .step__instructions li {
  padding: 0.4rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(59, 72, 86, 0.85);
}

.routine-page--gas .step__instructions li::before {
  background: var(--sky-deep);
  box-shadow: 0 0 6px rgba(123, 167, 194, 0.3);
}

/* ── Prep card ── */
.routine-page--gas .prep-card {
  background: rgba(59, 72, 86, 0.03);
  border-color: rgba(59, 72, 86, 0.08);
}

.routine-page--gas .prep-card h2 {
  color: var(--night);
}

.routine-page--gas .prep-group__header h3 {
  color: var(--sky-text);
}

.routine-page--gas .prep-group__header i {
  color: var(--sky-text) !important;
}

.routine-page--gas .prep-card li {
  color: var(--night-soft);
}

.routine-page--gas .prep-card li::before {
  background: var(--sky-deep);
  box-shadow: 0 0 6px rgba(123, 167, 194, 0.3);
}

.routine-page--gas .safety-banner {
  background: rgba(229, 184, 180, 0.08);
  border-color: rgba(229, 184, 180, 0.15);
  color: var(--night-soft);
}

.routine-page--gas .prep-hint {
  color: var(--night-soft);
}

/* ── Audio toggle ── */
.routine-page--gas .audio-toggle {
  background: rgba(184, 212, 227, 0.1);
  border-color: rgba(184, 212, 227, 0.2);
  color: var(--sky-text);
}

.routine-page--gas .audio-toggle.is-muted {
  opacity: 0.5;
}

/* ── Buttons — sky-deep per design system ── */
.routine-page--gas .btn--primary {
  background: var(--sky-deep);
  color: white;
  box-shadow: 0 4px 20px rgba(123, 167, 194, 0.3);
}

.routine-page--gas .btn--primary:hover {
  background: #5A8FAD;
  box-shadow: 0 6px 24px rgba(123, 167, 194, 0.4);
}

.routine-page--gas .btn--glow {
  box-shadow: 0 0 24px rgba(123, 167, 194, 0.2), 0 4px 20px rgba(123, 167, 194, 0.3);
}

.routine-page--gas .btn--secondary {
  color: var(--sky-text);
  background: rgba(184, 212, 227, 0.12);
  border: 1px solid rgba(184, 212, 227, 0.2);
  border-radius: 9999px;
  padding: 0.6rem 1.25rem;
}

/* ── Step progress dots ── */
.routine-page--gas .step-progress__text {
  color: var(--night-soft);
}

.routine-page--gas .step-dot {
  background: rgba(59, 72, 86, 0.12);
}

.routine-page--gas .step-dot.active {
  background: var(--sky-deep);
  box-shadow: 0 0 10px rgba(123, 167, 194, 0.4);
}

.routine-page--gas .step-dot.completed {
  background: var(--sky);
}

/* ── Step controls gradient ── */
.routine-page--gas .step-controls {
  background: linear-gradient(to top, var(--gas-cream) 70%, transparent 100%);
  padding-bottom: 1.25rem;
}

/* ── Repetition Counter ── */
.rep-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(59, 72, 86, 0.06);
}

.rep-counter__label {
  font-size: 0.65rem;
  color: rgba(59, 72, 86, 0.45);
  margin-right: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.rep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(59, 72, 86, 0.12);
  transition: background 0.4s ease, transform 0.3s ease;
}

.rep-dot.filled {
  background: var(--sky-deep);
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(123, 167, 194, 0.3);
}

/* ── End screen ── */
.routine-page--gas .routine-end h2 {
  color: var(--night);
}

.routine-page--gas .routine-end p {
  color: var(--night-soft);
}

.routine-page--gas .routine-end__signup {
  background: rgba(184, 212, 227, 0.08);
  border-color: rgba(184, 212, 227, 0.15);
}

.routine-page--gas .routine-end__signup h3 {
  color: var(--night);
}

.routine-page--gas .routine-end__form input {
  background: white;
  color: var(--night);
  border-color: rgba(59, 72, 86, 0.12);
}

.routine-page--gas .routine-end__form input:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(184, 212, 227, 0.25);
}

.routine-page--gas .routine-end__contact a {
  color: var(--sky-text);
}

/* ── Decoration overrides — nature icons in gold/blush/lavender ──
   All icons use a consistent opacity of 0.3. Large anchors (sun, tree)
   and small accents (sparkle, leaf) all share the same visual weight. */

/* All decorations: consistent 0.3 opacity, no fade-in pop.
   Override the calming routine keyframes which start at opacity:0. */
.routine-page--gas .deco__icon {
  --deco-opacity: 0.3;
  opacity: 0.3;
}

@keyframes gasDecoFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-14px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes gasDecoFloatSm {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes gasDecoTwinkle {
  0%   { transform: scale(0.9) rotate(10deg); opacity: 0.2; }
  50%  { transform: scale(1) rotate(0deg); opacity: 0.3; }
  100% { transform: scale(0.9) rotate(10deg); opacity: 0.2; }
}
@keyframes gasDecoDrift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(12px); }
  100% { transform: translateX(0); }
}

/* Header decorations */
.routine-page--gas .deco__sun-1 {
  font-size: 8rem; top: 6%; right: 4%;
  color: var(--gas-gold);
  animation: gasDecoFloat 12s ease-in-out infinite;
}

.routine-page--gas .deco__leaf-1 {
  font-size: 3rem; top: 12%; left: 6%;
  color: var(--blush-deep);
  animation: gasDecoFloatSm 9s ease-in-out infinite 1s;
}

.routine-page--gas .deco__leaf-2 {
  font-size: 2.2rem; bottom: 8%; right: 8%;
  color: var(--sky);
  animation: gasDecoTwinkle 6s ease-in-out infinite 2s;
}

.routine-page--gas .deco__sparkle-g1 {
  font-size: 2.6rem; top: 20%; left: 50%;
  color: var(--gas-gold-soft);
  animation: gasDecoTwinkle 5s ease-in-out infinite;
}

.routine-page--gas .deco__wind-1 {
  font-size: 5rem; bottom: 15%; left: 5%;
  color: var(--blush);
  animation: gasDecoDrift 18s ease-in-out infinite;
}

/* Prep decorations */
.routine-page--gas .deco__tree-1 {
  font-size: 8rem; top: 3%; right: 3%;
  color: var(--blush-deep);
  animation: gasDecoFloat 14s ease-in-out infinite;
}

.routine-page--gas .deco__flower-1 {
  font-size: 2.4rem; top: 8%; left: 5%;
  color: var(--gas-gold);
  animation: gasDecoTwinkle 5s ease-in-out infinite 1s;
}

.routine-page--gas .deco__plant-1 {
  font-size: 2.8rem; bottom: 10%; left: 8%;
  color: var(--sky);
  animation: gasDecoFloatSm 10s ease-in-out infinite 2s;
}

.routine-page--gas .deco__sparkle-g2 {
  font-size: 2rem; bottom: 12%; right: 6%;
  color: var(--lavender);
  animation: gasDecoTwinkle 6s ease-in-out infinite 3s;
}

.routine-page--gas .deco__leaf-3 {
  font-size: 2.2rem; top: 50%; left: 4%;
  color: var(--gas-gold);
  animation: gasDecoFloatSm 8s ease-in-out infinite 1.5s;
}

/* Steps decorations — same opacity, subtler through smaller size */
.routine-page--gas .deco__sun-2 {
  font-size: 5rem; top: 4%; right: 3%;
  color: var(--gas-gold);
  animation: gasDecoFloat 12s ease-in-out infinite;
}

.routine-page--gas .deco__leaf-4 {
  font-size: 2rem; top: 10%; left: 5%;
  color: var(--blush-deep);
  animation: gasDecoFloatSm 9s ease-in-out infinite 1s;
}

.routine-page--gas .deco__sparkle-g3 {
  font-size: 1.8rem; bottom: 15%; right: 6%;
  color: var(--lavender);
  animation: gasDecoTwinkle 5s ease-in-out infinite 2s;
}

.routine-page--gas .deco__plant-2 {
  font-size: 1.8rem; bottom: 10%; left: 6%;
  color: var(--sky);
  animation: gasDecoFloatSm 10s ease-in-out infinite 3s;
}

.routine-page--gas .deco__wind-2 {
  font-size: 3.5rem; bottom: 25%; left: 3%;
  color: var(--blush);
  animation: gasDecoDrift 16s ease-in-out infinite 2s;
}

/* End decorations */
.routine-page--gas .deco__sun-3 {
  font-size: 10rem; top: 3%; right: 2%;
  color: var(--gas-gold);
  animation: gasDecoFloat 14s ease-in-out infinite;
}

.routine-page--gas .deco__tree-2 {
  font-size: 7rem; bottom: 5%; left: 3%;
  color: var(--blush-deep);
  animation: gasDecoFloat 16s ease-in-out infinite 2s;
}

.routine-page--gas .deco__flower-2 {
  font-size: 3rem; top: 10%; left: 5%;
  color: var(--gas-gold);
  animation: gasDecoTwinkle 5s ease-in-out infinite 1s;
}

.routine-page--gas .deco__leaf-5 {
  font-size: 2.4rem; top: 30%; right: 8%;
  color: var(--sky);
  animation: gasDecoFloatSm 9s ease-in-out infinite 3s;
}

.routine-page--gas .deco__sparkle-g4 {
  font-size: 2.2rem; bottom: 15%; right: 6%;
  color: var(--lavender);
  animation: gasDecoTwinkle 6s ease-in-out infinite 2s;
}

.routine-page--gas .deco__butterfly-1 {
  font-size: 2.6rem; top: 20%; left: 12%;
  color: var(--gas-gold-soft);
  animation: gasDecoTwinkle 7s ease-in-out infinite 4s;
}

.routine-page--gas .deco__wind-3 {
  font-size: 5rem; top: 50%; left: 3%;
  color: var(--blush);
  animation: gasDecoDrift 18s ease-in-out infinite 1s;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .routine-page--gas .deco__icon {
    transform: scale(0.65);
  }
}