/* Calmer Pass colors taken from the original teal, lavender, peach coffee mascot.
   Visual changes only; medical intake, evidence and sessions are untouched. */
:root {
 --canvas:#fff9f5;--paper:#fffdfa;--ink:#245a5c;--muted:#68777a;
 --navy:#286b6a;--teal:#379b95;--teal-soft:#e7f6f0;
 --purple:#aa98d5;--purple-deep:#7562a3;--purple-soft:#f2ebfc;
 --line:#eaded8;--peach:#f7c6b5;--danger:#b42318;--danger-soft:#fff0ee;
 --warning:#8a5a10;--warning-soft:#fff7e6;
 --shadow:0 16px 40px rgba(65,86,83,.065);
}
body{color:var(--ink);background:linear-gradient(145deg,#fff9f4,#fffdf9 36%,#fff1eb 72%,#f7f0fd)}
.topbar{color:var(--ink);background:linear-gradient(100deg,#fff9f2,#f5edfd 53%,#ffeadf);box-shadow:0 5px 22px rgba(92,91,96,.08)}
.brand-mark{border-color:#afd9d1;background:#e8f8f2;color:#286d6d}
.brand-subtitle{color:#667b7a}
.device-badge{color:#426d70;background:#ffffffaa;border-color:#e4d5e6}
.hero::before{display:none!important}
.session-card{display:none!important}
.card{background:#fffdfa;border-color:var(--line)}
.intake-card{background:linear-gradient(155deg,#fffdfa,#fff9f5 49%,#fff4ee)}
.section-heading,.result-intro{background:linear-gradient(105deg,#fffdf9,#f6effd 54%,#ffece1)}
.section-heading{padding:20px;border-radius:18px}
.result-reference{background:#387b78;color:#fff}
.button-primary{color:#fff!important;background:#347f79!important}
.button-secondary{background:#fffaf7!important;border-color:#cbbde3!important}
.condition-details{background:#f7f2fd;border-color:#e7d9f6}
.result-band>h3{color:#286d6d;background:linear-gradient(95deg,#f2eafa,#fff0e7)}
.eyebrow,.evidence-group h4{color:#367a74}
label{color:#315c60}
input[type="text"],input[type="month"],select,textarea{background:#fffefa;border-color:#d9d4ce}
.topbar-inner{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.cp-mascot-toggle{
 font:700 .83rem Inter,"Segoe UI",Arial,sans-serif;min-height:40px;
 padding:8px 15px;border-radius:999px;white-space:nowrap;
 border:1px solid #b6a6d7;background:#fffdfa;color:#286b6a;cursor:pointer;
 box-shadow:0 3px 8px rgba(75,81,83,.045);
}
.cp-mascot-toggle:hover,.cp-mascot-toggle:focus-visible{background:#f2ebfc;border-color:#7662a5}
@media(min-width:1100px){
 .topbar-inner .cp-mascot-toggle{margin-left:auto}
 .shell .hero{padding-right:275px;min-height:235px}
}
@media(min-width:800px) and (max-width:1099px){
 .shell .hero{padding-right:215px;min-height:190px}
}
@media(max-width:799px){
 .shell .hero{padding-right:112px;min-height:160px}
 .cp-mascot-toggle{font-size:.75rem;padding:8px 10px}
}
/* Both positions are anchored in the document, never fixed or floating. */
.hero.cp-mascot-anchor,.field.cp-mascot-anchor,.results-card.cp-mascot-anchor{position:relative}
.cp-mascot{
 position:absolute;z-index:2;pointer-events:none;
 background:transparent;border:0;box-shadow:none;
}
.cp-mascot-art{position:relative;width:100%;filter:drop-shadow(0 10px 12px rgba(37,90,92,.1))}
.cp-mascot img{display:block;width:100%;height:auto;object-fit:contain}
.cp-mascot-hero{width:230px;right:10px;top:0}
.cp-mascot-question{width:70px;right:3px;top:-20px}
.field>label{padding-right:80px}
.results-card.cp-mascot-anchor .cp-mascot{top:5px;right:5px}
.cp-mascot[hidden]{display:none!important}
body.cp-mascot-hidden .cp-mascot{display:none!important}
/* Eyelids and steam can animate while the card itself remains perfectly still. */
.cp-eyelid{
 position:absolute;top:29%;width:12%;height:8.5%;border-radius:45%;
 background:#bdece6;border-bottom:2px solid #27535a;
 transform:scaleY(0);transform-origin:center;
 animation:cpBlink 5.4s linear infinite;pointer-events:none
}
.cp-eyelid-left{left:24%}.cp-eyelid-right{left:49.5%}
@keyframes cpBlink{
 0%,15%,17%,66%,69%,71%,100%{transform:scaleY(0)}
 16%,68%,70%{transform:scaleY(1)}
}
.cp-steam{
 position:absolute;right:8%;top:29%;height:10%;width:7%;
 border-left:2px solid rgba(255,255,255,.85);border-radius:60%;
 opacity:0;animation:cpSteam 3s ease-out infinite
}
.cp-steam-two{right:12%;animation-delay:1.4s}
@keyframes cpSteam{
 0%{transform:translateY(5px) scale(.75);opacity:0}
 25%{opacity:.55}100%{transform:translateY(-13px) scale(1.1);opacity:0}
}
@media(max-width:799px){
 .cp-mascot-hero{width:128px;right:0;top:8px}
 .cp-mascot-question{width:51px;right:2px;top:-9px}
 .field>label{padding-right:59px}
 .results-card.cp-mascot-anchor .cp-mascot{width:50px}
}
@media(prefers-reduced-motion:reduce){
 .cp-eyelid,.cp-steam{animation:none!important}
}
@media print{
 .cp-mascot,.cp-mascot-toggle{display:none!important}
}

/* Keep the companion in a dedicated lane, never over text inputs or dropdown arrows. */
.form-grid .field, .condition-details .field{padding-right:82px;position:relative}
.form-grid .field>label, .condition-details .field>label{padding-right:0}
.field.cp-mascot-anchor .cp-mascot-question{right:8px;top:-3px;width:66px}
.results-card.cp-mascot-anchor .cp-mascot-question{right:14px;top:7px;width:65px}
@media(max-width:799px){
  .form-grid .field, .condition-details .field{padding-right:58px}
  .field.cp-mascot-anchor .cp-mascot-question{right:5px;top:0;width:48px}
}

/* Small first-party music switch in header; no floating player or Suno links. */
.cp-music-control{display:flex;align-items:center;gap:9px;flex-wrap:wrap;position:relative}
.cp-music-toggle{min-height:40px;border-radius:999px;padding:8px 13px;border:1px solid #a8d3cc;background:#eff9f3;color:#255f5d;font-weight:800;font-size:.83rem;cursor:pointer;white-space:nowrap}
.cp-music-toggle[aria-pressed="true"]{background:#397f79;color:white;border-color:#397f79}
.cp-music-toggle:hover{border-color:#5caaa2}
.cp-music-volume{display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;color:#496b68;margin:0}
.cp-music-volume input{width:82px;height:22px;accent-color:#a694d1;cursor:pointer}
.cp-music-status:empty{display:none}
.cp-music-status{font-size:.7rem;color:#9d342d;max-width:170px}
.cp-music-toggle:focus-visible,.cp-music-volume input:focus-visible{outline:3px solid #75cac0;outline-offset:3px}
@media(max-width:680px){.cp-music-control{width:100%;gap:7px}.cp-music-toggle{min-height:38px}.cp-music-volume input{width:80px}}
@media print{.cp-music-control{display:none!important}}

/* 8-second transparent WebM sip loop. Stay anchored at a question, never float.
   The exact original mascot image remains visible until the animation loads. */
.cp-mascot-art{position:relative;width:100%;aspect-ratio:590/694}
.cp-mascot-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:transparent;opacity:0;pointer-events:none}
.cp-mascot-fallback{position:absolute;inset:0;width:100%;height:100%!important;object-fit:contain}
.cp-mascot.cp-video-ready .cp-mascot-video{opacity:1}
.cp-mascot.cp-video-ready .cp-mascot-fallback{visibility:hidden}
@media(prefers-reduced-motion:reduce){
 .cp-mascot-video{display:none!important}
 .cp-mascot-fallback{visibility:visible!important}
}

/* Mascot clip keeps its Google Flow sound optional and separate from Calm Drifting. */
.cp-mascot-sound{
  min-height:40px; padding:8px 13px; border-radius:999px;
  border:1px solid #b8a4d3; color:#64518c; background:#faf2ff;
  font-size:.8rem; font-weight:800; white-space:nowrap; cursor:pointer;
}
.cp-mascot-sound[aria-pressed="true"]{background:#397f79;color:white;border-color:#397f79}
.cp-mascot-sound:hover{border-color:#77629e}
.cp-mascot-sound:focus-visible{outline:3px solid #75cac0;outline-offset:2px}
.cp-mascot-sound[hidden]{display:none!important}
@media print{.cp-mascot-sound{display:none!important}}

/* iOS Safari cannot reliably render transparent VP9 WebM: show original art. */
.cp-mascot.cp-ios-still .cp-mascot-video{display:none!important;opacity:0!important}
.cp-mascot.cp-ios-still .cp-mascot-fallback{visibility:visible!important}

/* Transparent animated WebP works on current iPhone Safari and Home Screen apps.
   Keep the still art if mobile animation fails or reduced motion is enabled. */
.cp-mascot-ios-animated{display:none!important}
.cp-mascot.cp-ios-still .cp-mascot-ios-animated{
  display:block!important;position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:transparent;z-index:1
}
.cp-mascot.cp-ios-still .cp-mascot-fallback{visibility:hidden!important}
.cp-mascot.cp-ios-still.cp-ios-animation-unavailable .cp-mascot-ios-animated{display:none!important}
.cp-mascot.cp-ios-still.cp-ios-animation-unavailable .cp-mascot-fallback{visibility:visible!important}
@media(prefers-reduced-motion:reduce){
 .cp-mascot.cp-ios-still .cp-mascot-ios-animated{display:none!important}
 .cp-mascot.cp-ios-still .cp-mascot-fallback{visibility:visible!important}
}