/* Make Me Happy: midnight blue and soft gold, calm and roomy. */
.mh{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#1A2160 0%,var(--bg) 62%);min-height:70vh}
.mh section{padding-block:0}
.mh-wrap{position:relative;z-index:1;max-width:46rem;padding-block:28px 56px}
.mh-sky{position:absolute;inset:0;pointer-events:none;z-index:0}
.mh-sky span{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-hi);opacity:.35;box-shadow:0 0 10px 2px rgba(230,207,156,.35)}
.mh-sky span:nth-child(1){left:8%;top:12%}.mh-sky span:nth-child(2){left:22%;top:38%;width:3px;height:3px}
.mh-sky span:nth-child(3){left:35%;top:8%}.mh-sky span:nth-child(4){left:52%;top:26%;width:2px;height:2px}
.mh-sky span:nth-child(5){left:68%;top:10%}.mh-sky span:nth-child(6){left:84%;top:30%;width:3px;height:3px}
.mh-sky span:nth-child(7){left:92%;top:58%}.mh-sky span:nth-child(8){left:12%;top:70%;width:2px;height:2px}
.mh-sky span:nth-child(9){left:30%;top:86%}.mh-sky span:nth-child(10){left:60%;top:76%;width:3px;height:3px}
.mh-sky span:nth-child(11){left:76%;top:90%;width:2px;height:2px}.mh-sky span:nth-child(12){left:46%;top:52%;width:2px;height:2px}
@media (prefers-reduced-motion:no-preference){
  .mh-sky span{animation:mh-float 14s ease-in-out infinite alternate}
  .mh-sky span:nth-child(odd){animation-duration:19s;animation-delay:-6s}
  .mh-sky span:nth-child(3n){animation-duration:23s;animation-delay:-11s}
}
@keyframes mh-float{0%{transform:translateY(0);opacity:.2}50%{opacity:.55}100%{transform:translateY(-36px);opacity:.25}}

.mh-bar-top{display:flex;justify-content:flex-end;margin-bottom:12px}
.mh-needhelp{min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid rgba(243,169,150,.55);background:rgba(243,169,150,.08);color:#F7C9BC;font:600 .9rem var(--sans);cursor:pointer}
.mh-needhelp:hover{background:rgba(243,169,150,.16)}

.mh-view{display:grid;gap:28px}
.mh-eyebrow{font:600 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mh-lede{font-size:1.15rem;color:var(--text);line-height:1.6}
.mh-fine{font-size:.9rem;color:var(--mist)}
.mh-h2{font-size:clamp(1.7rem,5.6vw,2.4rem);line-height:1.15}
.mh-h3{font-size:1.3rem;line-height:1.25}
.mh-h4{font:600 1rem/1.3 var(--sans);margin:0}
.mh h4{font:600 1rem/1.3 var(--sans);margin:18px 0 8px;color:var(--gold-hi)}
.center{text-align:center;justify-content:center}
.mh-back{margin:0}.mh-back a{color:var(--mist);text-decoration:none;font-size:.95rem}.mh-back a:hover{color:var(--gold-hi)}

.mh-hero{display:grid;gap:18px;text-align:center;padding-block:28px 8px!important}
.mh-hero h1{font-size:clamp(2.3rem,8vw,3.6rem)}
.mh-panel{display:grid;gap:18px;background:rgba(24,31,78,.72);border:1px solid var(--line-soft);border-radius:24px;padding:clamp(20px,5vw,36px);backdrop-filter:blur(6px)}
.mh-panel.wide{max-width:none}
.mh-panel > p{margin:0}
.mh-prompt{font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--gold-hi)}
.mh-step{font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* buttons */
.mh-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mh-row.nav{margin-top:6px;padding-top:16px;border-top:1px solid var(--line-soft)}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.35rem;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);font:600 1rem/1.25 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s}
.mh-btn:hover{background:rgba(201,169,106,.12)}
.mh-btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.mh-btn.gold:hover{background:var(--gold-hi)}
.mh-btn.ghost{border-color:var(--line)}
.mh-btn.lg{min-height:56px;padding-inline:2rem;font-size:1.08rem;box-shadow:0 8px 30px -8px rgba(201,169,106,.55)}
.mh-btn.sm{min-height:40px;padding:.4rem 1rem;font-size:.9rem}
.mh-btn[disabled]{opacity:.5;cursor:default}
.mh-link{background:none;border:0;min-height:44px;padding:0 .4rem;color:var(--mist);font:inherit;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mh-link:hover{color:var(--gold-hi)}
@media (prefers-reduced-motion:no-preference){.mh-btn.lg:hover{transform:translateY(-1px)}}

/* cards */
.mh-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.mh-card{position:relative;display:grid;gap:8px;align-content:start;padding:20px;border-radius:18px;border:1px solid var(--line-soft);background:rgba(16,21,58,.75);color:var(--text);text-decoration:none;transition:border-color .2s,background-color .2s}
a.mh-card:hover{border-color:var(--gold);background:rgba(32,40,95,.85)}
.mh-card p{color:var(--mist);font-size:.95rem;margin:0}
.mh-card.soon{opacity:.85;border-style:dashed}
.mh-tag{justify-self:start;font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem}
.mh-soon{display:grid;gap:12px}
.mh-ic{width:28px;height:28px;fill:none;stroke:var(--gold-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mh-ic.lg{width:44px;height:44px}
.mh-grid.mini{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mh-card.mini{grid-template-columns:auto 1fr;align-items:center;padding:12px 14px;font-size:.95rem}
.mh-card.mini .mh-ic{width:22px;height:22px}
.mh-grid.acts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mh-card.act{padding:16px;gap:6px}
.mh-card.act .mh-ic{width:24px;height:24px}
.mh-card.act.done{border-color:rgba(154,215,176,.45)}
.mh-num{position:absolute;top:12px;right:14px;font:600 .75rem var(--sans);color:var(--faint)}
.mh-tick{position:absolute;bottom:12px;right:14px;color:var(--ok);font-weight:600}
.mh-group{display:grid;gap:10px;margin-top:10px}
.mh-group h2{display:flex;align-items:center;gap:8px}
.mh-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mh-tabs a{text-decoration:none}
.mh-tabs a[aria-current=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* emotions */
.mh-emotions{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mh-emo{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border-radius:16px;border:1px solid var(--line-soft);background:rgba(16,21,58,.8);color:var(--text);font:500 1rem/1.35 var(--sans);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.mh-emo:hover{border-color:var(--gold)}
.mh-emo[aria-pressed=true]{border-color:var(--gold);background:rgba(201,169,106,.16);box-shadow:inset 0 0 0 1px var(--gold)}
.mh-emoji{font-size:1.6rem;line-height:1}
.mh-emotions.small{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mh-after{display:grid;gap:16px}

/* chips */
.mh-chips{display:flex;flex-wrap:wrap;gap:8px}
.mh-chip{min-height:44px;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:rgba(16,21,58,.7);color:var(--text);font:500 .95rem/1.3 var(--sans);text-align:left;cursor:pointer;display:inline-flex;align-items:center}
.mh-chip:hover{border-color:var(--gold)}
.mh-chip[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.mh-chip.sm{min-height:38px;padding:.3rem .8rem;font-size:.88rem}
.mh-choices{display:grid;gap:10px}
.mh-choice{min-height:52px;padding:.7rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:rgba(16,21,58,.8);color:var(--gold-hi);font:500 1rem/1.35 var(--sans);text-align:left;cursor:pointer}
.mh-choice:hover{border-color:var(--gold);background:rgba(32,40,95,.85)}

/* inputs */
.mh textarea,.mh input[type=text]{width:100%;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--line);background:rgba(10,14,38,.7);color:var(--text);font:400 1rem/1.55 var(--sans);resize:vertical}
.mh textarea:focus,.mh input[type=text]:focus{outline:2px solid var(--gold-hi);outline-offset:1px}
.mh ::placeholder{color:var(--faint)}
.mh-write,.mh-tool{display:grid;gap:10px}
.mh-own{margin-top:10px}
.mh-q{display:grid;gap:6px;font-weight:500}
.mh-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500;cursor:pointer}
.mh-check input{width:22px;height:22px;accent-color:var(--gold)}

/* notes and support */
.mh-note{display:grid;gap:10px;padding:16px 18px;border-radius:16px;background:rgba(201,169,106,.08);border:1px solid var(--line)}
.mh-safety{padding:12px 16px;border-radius:14px;border-left:3px solid var(--gold);background:rgba(201,169,106,.07);font-size:.95rem}
.mh-risk{display:grid;gap:10px;padding:18px;border-radius:16px;background:#FBF1EC;color:#3A1D17;border:1px solid #F3A996}
.mh-risk h2{font-size:1.35rem;color:#3A1D17}
.mh-risk a{color:#8A2E1B;font-weight:600}
.mh-risk .mh-fine{color:#6B4038}
.mh-help{margin:0;padding-left:1.2rem;display:grid;gap:6px}
.mh-help .urgent{font-weight:600}
.mh-support{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(5,7,20,.72)}
.mh-sheet{display:grid;gap:12px;max-width:34rem;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:24px;border-radius:22px;background:#FBF7EE;color:var(--warm-ink)}
.mh-sheet h2{font-size:1.6rem;color:var(--warm-ink)}
.mh-sheet a{color:#6B4E12;font-weight:600}
.mh-sheet .mh-fine{color:var(--warm-mist)}
.mh-sheet .mh-btn{justify-self:start;color:var(--warm-ink);border-color:var(--warm-ink)}
body.mh-lock{overflow:hidden}
.mh-disclaimer{margin-top:28px;font-size:.85rem;color:var(--faint);text-align:center}
.mh-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* progress */
.mh-dots-progress{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.mh-dots-progress li{flex:1;height:4px;border-radius:4px;background:var(--line-soft)}
.mh-dots-progress li.on{background:var(--gold-hi)}
.mh-dots-progress li.done{background:var(--gold)}
.mh-five-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;margin:0;padding:0}
.mh-five-bar li{height:6px;border-radius:6px;background:var(--line-soft)}
.mh-five-bar li.on{background:var(--gold-hi);box-shadow:0 0 12px rgba(230,207,156,.6)}
.mh-five-bar li.done{background:var(--gold)}

/* breathing */
.mh-breathe{display:grid;gap:14px;justify-items:center;text-align:center;padding:10px 0}
.mh-breath-wrap{width:220px;height:220px;display:grid;place-items:center}
.mh-breath-c{width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F2E2BC,#C9A96A 55%,#8A6F3A);box-shadow:0 0 50px 8px rgba(201,169,106,.35);transition-property:width,height;transition-timing-function:ease-in-out}
.mh-breath-c.in{width:100%;height:100%}
.mh-breath-c.out{width:46%;height:46%}
.mh-breathe.still .mh-breath-c{transition:none!important;width:70%;height:70%}
.mh-breathe.still .mh-breath-c.in{box-shadow:0 0 60px 16px rgba(230,207,156,.5)}
.mh-cue{font-family:var(--serif);font-size:1.3rem;min-height:2em;color:var(--gold-hi)}
.mh-bar{width:100%;max-width:280px;height:4px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.mh-bar span{display:block;height:100%;width:0;background:var(--gold);transition:width 1s linear}

/* timer */
.mh-timer{display:grid;gap:14px;justify-items:center;padding:6px 0}
.mh-ring-wrap{position:relative;width:150px;height:150px}
.mh-ring{width:100%;height:100%;transform:rotate(-90deg)}
.mh-ring circle{fill:none;stroke-width:6}
.mh-ring .bg{stroke:var(--line-soft)}
.mh-ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.mh-time{position:absolute;inset:0;display:grid;place-items:center;font:500 2rem var(--serif);color:var(--text)}
.mh-timer.done .mh-time{color:var(--ok)}

/* grounding */
.mh-ground{display:grid;gap:14px}
.mh-sense{display:grid;gap:8px}
.mh-sense strong{color:var(--gold-hi);font-size:1.2rem;margin-right:4px}
.mh-dots{display:flex;gap:10px;flex-wrap:wrap}
.mh-dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:transparent;cursor:pointer;transition:background-color .2s}
.mh-dot[aria-pressed=true]{background:var(--gold);border-color:var(--gold-hi)}

/* sequences (tension, stretch) */
.mh-seqbox{display:grid;gap:12px}
.mh-seq{margin:0;padding-left:1.3rem;display:grid;gap:6px;color:var(--mist)}
.mh-seq li.on{color:var(--gold-hi);font-weight:600}
.mh-steps{margin:0;padding-left:1.3rem;display:grid;gap:8px}
.mh-phrases{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mh-phrases li{font-family:var(--serif);font-size:1.25rem;line-height:1.4;padding:12px 16px;border-left:2px solid var(--gold);background:rgba(201,169,106,.06);border-radius:0 12px 12px 0}
.mh-quote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.5;color:var(--gold-hi);padding:8px 0 8px 18px;border-left:2px solid var(--gold)}

/* brain dump */
.mh-sortrow{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.mh-sortrow > p{font-weight:500}
.mh-plan{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.mh-plan > div{padding:14px;border-radius:14px;background:rgba(16,21,58,.7);border:1px solid var(--line-soft)}
.mh-plan h4{margin-top:0}
.mh-plan ul{margin:0;padding-left:1.1rem}

/* activity screen */
.mh-acthead{display:flex;gap:14px;align-items:center}
.mh-actbody{display:grid;gap:18px}
.mh-actbody:empty{display:none}
.mh-helped{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line-soft)}
.mh-done-mark{color:var(--ok);font-weight:600}

/* sounds */
.mh-sounds{display:grid;gap:10px}
.mh-sound{display:grid;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line-soft)}
.mh-sound audio{width:100%}

/* companion */
.mh-chat{display:grid;gap:12px}
.mh-msg{display:grid;gap:10px;max-width:92%;padding:14px 16px;border-radius:18px;line-height:1.55}
.mh-msg.bot{justify-self:start;background:rgba(32,40,95,.9);border:1px solid var(--line-soft);border-bottom-left-radius:6px}
.mh-msg.me{justify-self:end;background:var(--gold);color:var(--ink);border-bottom-right-radius:6px;font-weight:500}
@media (prefers-reduced-motion:no-preference){.mh-msg{animation:mh-in .35s ease-out}}
@keyframes mh-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* final screen */
.mh-final{position:relative;text-align:center;justify-items:center;overflow:hidden}
.mh-final > *{position:relative}
.mh-final .mh-glow{position:absolute;inset:auto;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(230,207,156,.35),transparent 65%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.mh-final .mh-glow{animation:mh-glow 6s ease-in-out infinite alternate}}
@keyframes mh-glow{from{transform:scale(.9);opacity:.7}to{transform:scale(1.1);opacity:1}}

@media (max-width:520px){
  .mh-wrap{padding-block:18px 40px}
  .mh-row .mh-btn{flex:1 1 auto}
  .mh-row.nav .mh-link{flex-basis:100%;text-align:center}
  .mh-breath-wrap{width:180px;height:180px}
  .mh-emotions,.mh-emotions.small{grid-template-columns:1fr}
}

/* ---------------- stage 2: the private space ---------------- */
.mh-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mh-demo{padding:12px 16px;border-radius:14px;background:rgba(243,169,150,.1);border:1px dashed rgba(243,169,150,.6);color:#F7D6CC;font-size:.92rem}
.mh-status{min-height:1.2em;font-size:.95rem;color:var(--gold-hi)}
.mh-status.bad{color:var(--err)}
.mh-points{margin:0;padding-left:1.2rem;display:grid;gap:6px;color:var(--mist)}
.mh-form{display:grid;gap:16px}
.mh-form fieldset{margin:0;padding:14px 16px 16px;border:1px solid var(--line-soft);border-radius:16px;display:grid;gap:10px}
.mh-form legend{padding:0 6px;font-weight:600;color:var(--gold-hi)}
.mh-field{display:grid;gap:6px}
.mh-field > label{font-weight:500}
.mh input[type=email],.mh input[type=password],.mh select{width:100%;min-height:48px;padding:.6rem 1rem;border-radius:14px;border:1px solid var(--line);background:rgba(10,14,38,.7);color:var(--text);font:400 1rem/1.4 var(--sans)}
.mh input[type=email]:focus,.mh input[type=password]:focus,.mh select:focus{outline:2px solid var(--gold-hi);outline-offset:1px}
.mh input[type=file]{color:var(--mist);font:inherit;max-width:100%}
.mh input[type=file]::file-selector-button{min-height:44px;margin-right:12px;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);font:600 .95rem var(--sans);cursor:pointer}
.mh-opts{display:flex;flex-wrap:wrap;gap:8px}
.mh-opts.col{flex-direction:column}
.mh-opt{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:.55rem .9rem;border-radius:14px;border:1px solid var(--line-soft);background:rgba(16,21,58,.6);cursor:pointer;line-height:1.4}
.mh-opt:has(input:checked){border-color:var(--gold);background:rgba(201,169,106,.12)}
.mh-opt input{margin:.15rem 0 0;width:20px;height:20px;flex:none;accent-color:var(--gold)}
.mh progress{width:100%;height:8px;accent-color:var(--gold)}
.mh-sec{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line-soft)}
.mh-sec h2{display:flex;align-items:center;gap:8px}
.mh-sec.danger{border-top-color:rgba(243,169,150,.35)}
.mh-btn.danger{border-color:rgba(243,169,150,.6);color:#F7C9BC}
.mh-btn.danger:hover{background:rgba(243,169,150,.12)}
.mh-row.between{justify-content:space-between}
.mh-usage{display:grid;gap:6px}
.mh-bar.wide{max-width:none}
.mh-itemform{padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(10,14,38,.55)}
.mh-items{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mh-items > p{grid-column:1/-1}
.mh-item{display:grid;gap:10px;align-content:start;padding:16px;border-radius:18px;border:1px solid var(--line-soft);background:rgba(16,21,58,.8)}
.mh-item.dream{border-color:rgba(201,169,106,.35)}
.mh-item-body{display:grid;gap:8px}
.mh-item-body p{margin:0;font-size:.97rem}
.mh-media{width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#05071a}
.mh-player{display:grid;gap:8px}
.mh-player audio,.mh-recorder audio,.mh-moment audio{width:100%}
.mh-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.mh-tags:empty{display:none}
.mh-tag.soft{color:var(--gold-hi);border-color:rgba(230,207,156,.35)}
.mh-tag.ok{color:var(--ok);border-color:rgba(154,215,176,.5)}
.mh-item-actions{gap:6px}
.mh-quote-sm{font-family:var(--serif);font-size:1.1rem;line-height:1.45;white-space:pre-wrap}
.mh-next{color:var(--gold-hi)}
.mh-recorder{display:grid;gap:8px;padding:12px;border-radius:14px;border:1px dashed var(--line)}
.mh-journal{display:grid;gap:12px;margin-top:8px}
.mh-entry{display:grid;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--line-soft);background:rgba(16,21,58,.7)}
.mh-entry-text{white-space:pre-wrap;margin:0}
.mh-moment{display:grid;gap:12px;justify-items:center;text-align:center;width:100%}
.mh-moment .mh-media{max-height:60vh}
.mh-history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mh-history li{padding:10px 14px;border-radius:12px;background:rgba(16,21,58,.6)}
.mh-msg .mh-moment{text-align:left;justify-items:start}
@media (max-width:520px){.mh-items{grid-template-columns:1fr}.mh-item-actions .mh-btn{flex:1 1 auto}}
/* grid children may shrink below their content's natural width (long file names, media players) */
.mh-view > *,.mh-panel > *,.mh-sec > *,.mh-form > *,.mh-field > *,.mh-tool > *,.mh-items > *,.mh-item > *,.mh-item-body > *,.mh-form fieldset > *,.mh-recorder > *,.mh-entry > *,.mh-moment > *{min-width:0}
.mh-opt span{min-width:0;overflow-wrap:anywhere}

.mh-coffee{display:grid;gap:10px;justify-items:center;text-align:center;padding:16px;border-radius:16px;border:1px dashed var(--line);color:var(--mist);font-size:.93rem}
.mh-coffee p{margin:0}