main {
  max-width: 40rem;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--muted); margin: 0 0.45rem; }

.subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 1.75rem;
  max-width: 30rem;
}

/* Pattern picker */
.patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.pattern-btn {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 1.1rem;
  background: var(--btn);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.pattern-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.pattern-btn.is-active {
  background: var(--pick-bg);
  border-color: var(--pick-border);
}

.pattern-name {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}

.pattern-detail {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Your own timing */
.custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
  margin: -1.2rem 0 2rem;
}
.custom-row[hidden] { display: none; }

.custom-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.custom-field input {
  width: 4.2rem;
  min-height: 48px;
  padding: 0 0.4rem;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--btn);
  border: 2px solid var(--border);
  border-radius: 12px;
}
.custom-field input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.custom-note {
  flex-basis: 100%;
  text-align: center;
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The breathing orb */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0 2rem;
}

.orb-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A soft halo. While a session runs, JS drives its size and opacity from the
   same breath as the orb — a second, independent rhythm would beat against
   the one you are trying to settle into. Idle, it drifts on its own at the
   current pattern's period (set by JS) rather than a fixed cycle. */
.aura {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 220, 0.28) 0%, rgba(255, 200, 220, 0) 70%);
  animation: aura 8s ease-in-out infinite;
  pointer-events: none;
}
.aura.is-guided { animation: none; }

@keyframes aura {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

/* Shown only while holding, where the orb is deliberately still and there
   would otherwise be nothing at all to follow. It sweeps rather than counts. */
.hold-ring {
  position: absolute;
  width: 264px;
  height: 264px;
  transform: rotate(-90deg);   /* begin the sweep at the top */
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hold-ring.is-on { opacity: 1; }

.hold-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 0.7;
  opacity: 0.7;
}
/* a little more presence than the rest of the page's soft furnishings: while
   a hold runs this is the only thing on screen that is moving */
.hold-arc {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.9;
}

.orb {
  position: relative;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff2f7 0%, #ffb8d2 28%, #ff93ba 65%, #f876a6 100%);
  box-shadow:
    0 0 70px 10px rgba(255, 150, 188, 0.55),
    inset 0 -14px 30px rgba(220, 95, 145, 0.35),
    inset 0 12px 26px rgba(255, 255, 255, 0.45);
  transform: scale(1);
  will-change: transform;
  /* the orb doubles as a giant start/stop button */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.orb:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 10px;
}

/* Gentle idle float when not actively guiding a breath. */
.orb.is-idle {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* The phase sits below the orb, not inside it: inside, it rode the orb's
   0.75x-1.8x transform, so the words changed size and went soft as you
   breathed. Down here it stays crisp, fits however long the label is, and
   takes its colour from the page rather than from the always-pink orb. */
.orb-phase {
  margin: 1rem 0 0;
  min-height: 1.7rem;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Controls */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* rows carry their own 48px height now, so a tighter gap reads right */
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
  border-radius: 999px;
  min-height: 48px;
  padding: 0.7rem 2.4rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Session length pills */
.lengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.lengths-label {
  color: var(--muted);
  font-size: 0.9rem;
  margin-right: 0.25rem;
}

.length-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.9rem;
  background: var(--btn);
  border: 2px solid var(--border);
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.length-btn:hover {
  border-color: var(--primary);
}

.length-btn.is-active {
  background: var(--pick-bg);
  border-color: var(--pick-border);
}

.sound-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px; /* comfy tap target for small fingers */
  padding: 0 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.sound-toggle input {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.cycles {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1.25rem;
}

/* Expandable "why this helps" */
.why {
  max-width: 32rem;
  margin: 2.5rem auto 0;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.why summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.why summary::-webkit-details-marker { display: none; }

.why summary::after {
  content: "\203A";
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.why[open] summary::after {
  transform: rotate(90deg);
}

.why-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink);
  line-height: 1.6;
  font-size: 0.95rem;
  animation: fade-in 0.4s ease;
}

.why-body p {
  margin: 0 0 0.85rem;
}

.why-list {
  margin: 0 0 0.85rem;
  padding-left: 1.1rem;
}

.why-list li {
  margin-bottom: 0.5rem;
}

.why-note {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Settle the whole page in gently */
main {
  animation: fade-in 0.5s ease;
}

/* Small screens: keep the stage inside the viewport */
@media (max-width: 380px) {
  .orb-wrap { width: 300px; height: 300px; }
  .aura { width: 250px; height: 250px; }
  .hold-ring { width: 236px; height: 236px; }
}

/* Honor reduced-motion preferences. The hold ring stays — it is the only
   indication that a hold is progressing, so removing it would leave a blank
   screen for as long as eight seconds. */
@media (prefers-reduced-motion: reduce) {
  .aura,
  .orb.is-idle,
  main,
  .why-body {
    animation: none;
  }
  .pattern-btn:hover { transform: none; }
}