/* ============================================================
   Moor — soft lavender, violet ink, a breath of water
   (palette matched to the Momentum PWA)
   ============================================================ */

:root{
  --paper:        #FAF5FF;   /* lightest lavender — app background */
  --paper-raised: #FFFFFF;   /* clean cards / raised surfaces      */
  --paper-sunk:   #EFE7FA;   /* wells / tracks                     */
  --ink:          #4C3D66;   /* deep violet — primary text         */
  --ink-soft:     #8B7CA8;   /* muted violet-grey                  */
  --line:         #E7DBF7;   /* hairlines                          */
  --wash:         #8B5CF6;   /* calm violet — the breath colour    */
  --wash-deep:    #6D28D9;
  --wash-glow:    #C4B5FD;
  --ember:        #FB7185;   /* soft rose — acute action only      */
  --ember-soft:   #FECDD3;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --shadow: 0 1px 2px rgba(76,61,102,.05), 0 10px 30px -18px rgba(76,61,102,.30);
  --ease: cubic-bezier(.4, 0, .2, 1);

  --pad: clamp(20px, 5.5vw, 34px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{ height:100%; }

body{
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(196,181,253,.22), transparent 60%),
    radial-gradient(900px 600px at -10% 108%, rgba(251,113,133,.12), transparent 60%);
}

/* ---------- Screen routing ---------- */
.screen{
  position:relative; z-index:1;
  display:none;
  min-height:100dvh;
  max-width:560px; margin:0 auto;
  padding:max(env(safe-area-inset-top), 22px) var(--pad) calc(env(safe-area-inset-bottom) + 28px);
}
.screen.is-active{ display:block; animation:rise .5s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* shared display type */
.eyebrow,.step-eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wash-deep); font-weight:600;
}

/* ============ HOME ============ */
.home-head{ margin:6px 0 26px; }
.home-head .eyebrow{
  display:block;
  font-size:clamp(2.6rem, 12vw, 3.4rem);
  letter-spacing:.06em; font-weight:700; line-height:1;
  margin-bottom:.4rem;
}
.home-sub{ color:var(--ink-soft); font-size:1.02rem; max-width:34ch; }

/* panic / acute button */
.panic{
  position:relative; width:100%; border:none; cursor:pointer;
  display:flex; align-items:center; gap:16px;
  padding:20px 22px; margin-bottom:34px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, #A78BFA, #6D28D9);
  color:#FFFFFF; text-align:left;
  box-shadow:0 14px 34px -16px rgba(109,40,217,.55);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.panic:active{ transform:scale(.985); }
.panic-pulse{
  position:absolute; right:-30px; top:50%; width:160px; height:160px;
  translate:0 -50%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), transparent 62%);
  animation:panicPulse 3.4s var(--ease) infinite;
}
@keyframes panicPulse{ 0%,100%{ transform:scale(.85); opacity:.55; } 50%{ transform:scale(1.12); opacity:.85; } }
.panic-label{ position:relative; display:flex; flex-direction:column; gap:3px; }
.panic-lead{ font-size:1.28rem; font-weight:600; letter-spacing:-.01em; }
.panic-sub{ font-size:.9rem; opacity:.92; }

/* groups */
.group{ margin-bottom:28px; }
.group-title{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 30, "opsz" 30;
  font-weight:440; font-size:1.18rem; margin-bottom:12px; color:var(--ink);
}
.cards{ display:grid; gap:12px; }

.card{
  display:flex; flex-direction:column; gap:5px;
  text-align:left; cursor:pointer;
  padding:17px 18px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:active{ transform:scale(.99); }
.card:hover{ border-color:var(--wash-glow); }
.card-name{ font-size:1.08rem; font-weight:600; letter-spacing:-.01em; }
.card-meta{ font-size:.82rem; color:var(--wash-deep); font-weight:500; }
.card-note{ font-size:.9rem; color:var(--ink-soft); }

/* footer */
.home-foot{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
#open-settings{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper-raised);
  color:var(--wash-deep); font-weight:600;
  box-shadow:var(--shadow);
}
#open-settings:hover{ background:var(--paper-sunk); color:var(--wash-deep); border-color:var(--wash-glow); }
#open-settings svg{ width:18px; height:18px; flex:none; }
.disclaimer{ margin-top:14px; font-size:.8rem; color:var(--ink-soft); line-height:1.55; max-width:46ch; }

/* ============ shared controls ============ */
.back{
  position:relative; z-index:2;
  width:44px; height:44px; margin:-4px 0 8px -8px;
  border:none; background:transparent; color:var(--ink-soft);
  font-size:1.5rem; cursor:pointer; border-radius:50%;
  transition:background .2s var(--ease);
}
.back:hover{ background:var(--paper-sunk); }

.primary{
  border:none; cursor:pointer;
  padding:15px 30px; border-radius:999px;
  background:var(--wash); color:#FFFFFF;
  font-family:inherit; font-size:1.05rem; font-weight:600; letter-spacing:.01em;
  box-shadow:0 12px 26px -14px rgba(109,40,217,.55);
  transition:transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}
.primary:active{ transform:scale(.97); }
.primary:hover{ background:var(--wash-deep); }
.primary:disabled{ opacity:.4; cursor:default; box-shadow:none; }

.ghost{
  border:none; cursor:pointer; background:transparent;
  color:var(--ink-soft); font-family:inherit; font-size:.98rem; font-weight:600;
  padding:13px 18px; border-radius:999px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.ghost:hover{ color:var(--ink); background:var(--paper-sunk); }

:focus-visible{ outline:2.5px solid var(--wash-deep); outline-offset:3px; border-radius:6px; }

/* ============ BREATHING PLAYER ============ */
.breath{ display:none; flex-direction:column; min-height:100dvh; }
.breath.is-active{ display:flex; }
.breath-head{ text-align:center; margin-bottom:6px; }
.breath-name{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 36, "opsz" 40;
  font-weight:430; font-size:1.5rem;
}
.breath-count{ color:var(--ink-soft); font-size:.9rem; margin-top:2px; }

.stage{
  flex:1; display:grid; place-items:center; position:relative;
  min-height:340px; margin:8px 0;
}
.stage > *{ grid-area:1 / 1; }

.ring{ width:min(78vw, 300px); height:min(78vw, 300px); transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--line); stroke-width:2; }
.ring-fill{
  fill:none; stroke:var(--wash); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:691.15; stroke-dashoffset:691.15;
  transition:stroke-dashoffset 1s linear;
}

/* rising / falling tide — breathing visual for 4-7-8 & physiological sigh */
.tide{
  width:min(58vw, 220px); height:min(58vw, 220px);
  border-radius:50%; overflow:hidden; position:relative;
  background:var(--paper-sunk);
  box-shadow:inset 0 6px 22px -8px rgba(76,61,102,.30), inset 0 0 0 1px var(--line);
}
.tide-liquid{
  position:absolute; left:-25%; bottom:0; width:150%; height:100%;
  background:linear-gradient(to top, var(--wash-deep), var(--wash) 55%, var(--wash-glow));
  border-radius:44% 46% 0 0 / 14% 14% 0 0;
  transform:translateY(62%); /* resting level ~38% full */
  transition:transform 1s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* two slow-turning blobs ripple the surface */
.tide-liquid::before, .tide-liquid::after{
  content:""; position:absolute; left:50%; top:-58%;
  width:200%; aspect-ratio:1; transform:translateX(-50%);
  border-radius:43%; background:rgba(255,255,255,.14);
  animation:tideWave 7s linear infinite;
}
.tide-liquid::after{
  border-radius:47%; background:rgba(255,255,255,.08);
  animation-duration:11s; animation-direction:reverse;
}
@keyframes tideWave{ from{ rotate:0deg; } to{ rotate:360deg; } }

/* box breathing visual */
.box{ width:min(74vw, 290px); height:min(74vw, 290px); display:none; overflow:visible; }
.breath.is-box .ring, .breath.is-box .tide{ display:none; }
.breath.is-box .box{ display:block; }
.box-track{ fill:none; stroke:var(--line); stroke-width:2.5; }
.box-fill{
  fill:none; stroke:var(--wash); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:720; stroke-dashoffset:720;
  transition:stroke-dashoffset 4s linear;
}
.box-dot{
  fill:var(--wash-deep);
  filter:drop-shadow(0 0 7px var(--wash-glow));
  transition:cx 4s linear, cy 4s linear;
}

.phase{
  align-self:end; margin-bottom:-46px;
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 46, "opsz" 40;
  font-weight:380; font-size:1.5rem; color:var(--ink);
  text-align:center; pointer-events:none;
  transition:opacity .5s var(--ease);
}

.breath-controls{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; }
.hint{ text-align:center; color:var(--ink-soft); font-size:.9rem; margin-top:14px; max-width:32ch; margin-inline:auto; }

/* ============ STEP SCREENS (senses / pmr / move) ============ */
.step-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:10px; }
.step-progress{ color:var(--ink-soft); font-size:.85rem; margin-top:14px; }
.step-prompt{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 40, "opsz" 72;
  font-weight:400; font-size:clamp(1.7rem, 7vw, 2.2rem); line-height:1.12;
  margin:.4rem 0; letter-spacing:-.01em; max-width:18ch;
}
.step-hint{ color:var(--ink-soft); font-size:.98rem; max-width:30ch; margin-bottom:6px; }
.step-controls{ margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:8px; }

/* 5-4-3-2-1 dots */
.dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:30px; }
.dot{
  width:54px; height:54px; border-radius:50%; cursor:pointer;
  border:2px solid var(--wash); background:transparent;
  font-size:1.1rem; color:var(--wash-deep); font-weight:600;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.dot:active{ transform:scale(.9); }
.dot.filled{
  background:var(--wash); color:#FFFFFF; border-color:var(--wash);
  transform:scale(1.04);
}

/* categories */
.cat-pick{ text-align:center; }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:26px; }
.cat-chip{
  padding:16px 14px; cursor:pointer;
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--r-md); font-family:inherit; font-size:1rem; font-weight:600;
  color:var(--ink); box-shadow:var(--shadow);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.cat-chip:active{ transform:scale(.97); }
.cat-chip:hover{ border-color:var(--wash-glow); }
.cat-run{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:10px; }
.cat-run[hidden]{ display:none; }
.tally{
  font-family:"Fraunces", Georgia, serif; font-variation-settings:"opsz" 144;
  font-weight:400; font-size:5.5rem; line-height:1; color:var(--wash); margin:18px 0;
}
.orb-tap{
  width:180px; height:180px; border-radius:50%; cursor:pointer; border:none;
  background:radial-gradient(circle at 40% 36%, var(--wash-glow), var(--wash) 62%, var(--wash-deep));
  color:#FFFFFF; font-family:inherit; font-size:1.02rem; font-weight:600;
  box-shadow:0 18px 44px -18px rgba(109,40,217,.6);
  transition:transform .12s var(--ease);
}
.orb-tap:active{ transform:scale(.93); }

/* small rings (pmr / move) */
.ring-small{ position:relative; display:grid; place-items:center; margin:24px 0; }
.ring-small.big{ margin:30px 0; }
.ring-small svg{ width:170px; height:170px; transform:rotate(-90deg); }
.ring-small.big svg{ width:210px; height:210px; }
.ring-small .ring-fill{
  stroke-dasharray:326.73; stroke-dashoffset:326.73;
  transition:stroke-dashoffset 1s linear;
}
.pmr-timer, .move-timer{
  position:absolute; font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"opsz" 90; font-weight:400; font-size:2.4rem; color:var(--ink);
}
.move-timer{ font-size:2.7rem; }
.pmr-cue{
  font-size:1.05rem; color:var(--wash-deep); font-weight:600; min-height:1.5em; margin-top:4px;
}

/* ============ SETTINGS SHEET ============ */
.sheet{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(60,47,89,.34); backdrop-filter:blur(2px);
  animation:fade .25s var(--ease);
}
.sheet[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.sheet-panel{
  width:100%; max-width:560px;
  background:var(--paper-raised);
  border-radius:24px 24px 0 0;
  padding:26px var(--pad) calc(env(safe-area-inset-bottom) + 26px);
  box-shadow:0 -20px 50px -20px rgba(60,47,89,.42);
  animation:slideUp .35s var(--ease);
}
@keyframes slideUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet-title{
  font-family:"Fraunces", Georgia, serif; font-variation-settings:"SOFT" 36;
  font-weight:430; font-size:1.4rem; margin-bottom:14px;
}
.toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:1.05rem; cursor:pointer; border-bottom:1px solid var(--line);
}
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.toggle .track{
  width:50px; height:30px; border-radius:999px; background:var(--paper-sunk);
  position:relative; transition:background .25s var(--ease); flex:none;
}
.toggle .track::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#FFF; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .25s var(--ease);
}
.toggle input:checked + .track{ background:var(--wash); }
.toggle input:checked + .track::after{ transform:translateX(20px); }
.toggle input:focus-visible + .track{ outline:2.5px solid var(--wash-deep); outline-offset:3px; }
.sheet-note{ font-size:.85rem; color:var(--ink-soft); margin:16px 0 20px; }
.sheet-panel .primary{ width:100%; }

/* ============ motion / a11y ============ */
@media (prefers-reduced-motion: reduce){
  .tide-liquid::before, .tide-liquid::after{ animation:none; }
  .panic-pulse{ animation:none; }
  .screen.is-active{ animation:none; }
  *{ scroll-behavior:auto !important; }
}