/* =========================================================================
   Practitioner Grace  (module CSS)
   The clinic's virtual assistant: a calm launcher with an illustrated portrait ("Mini Grace"), and a chat sheet.
   Mini Grace and Teddy, the clinic's dog, take calm walks together along the very bottom edge of the page.
   Both are SVG rigs. grace.js runs the walk at the display rate (a 60 Hz fixed step) and writes only `transform`
   attributes on their joint groups (class .gm = moving group, will-change: transform) and a translate on the wrappers.
   Inherits page tokens: --yh-ink --yh-paper --yh-accent --yh-accent-2 --yh-sage
   --yh-muted --yh-radius --yh-serif --yh-sans --yh-shadow  (all with fallbacks)
   Optional page tuning tokens (set on :root or any ancestor):
     --yh-grace-bottom   distance of the launcher from the viewport bottom
     --yh-grace-left     distance of the launcher from the viewport left
     --yh-grace-z        z-index of the launcher (default 8000)
     --yh-grace-td-z     z-index of Teddy (default 6: above page content, below menus, bars and the chat)
   Layout: >= 760px  = 60 x 90px full-body launcher, home spot bottom-left; Teddy 52px tall
           <  760px  = compact 48 x 72px launcher (shrinks to 44 x 66 while scrolling, lifts off page buttons at home); Teddy 36px tall
   The chat sheet itself always sits at z-index 2147483000.
   ========================================================================= */
.ypg-root{
  --ypg-ink:var(--yh-ink,#2b1d22);
  --ypg-paper:var(--yh-paper,#fbf6f0);
  --ypg-accent:var(--yh-accent,#7a1f3d);
  --ypg-gold:var(--yh-accent-2,#c9a24b);
  --ypg-sage:var(--yh-sage,#7d9a85);
  --ypg-muted:var(--yh-muted,#6b5b61);
  --ypg-r:var(--yh-radius,16px);
  --ypg-serif:var(--yh-serif,"Cormorant Garamond",Georgia,"Times New Roman",serif);
  --ypg-sans:var(--yh-sans,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --ypg-shadow:var(--yh-shadow,0 18px 50px rgba(30,10,20,.28));
  --ypg-line:rgba(0,0,0,.10);
  --ypg-tint:#f6ecee;
  --ypg-gtint:#f8f0dc;
  font-family:var(--ypg-sans);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
@supports (background:color-mix(in srgb,red 10%,white)){
  .ypg-root{
    --ypg-tint:color-mix(in srgb,var(--ypg-accent) 9%,#fff);
    --ypg-gtint:color-mix(in srgb,var(--ypg-gold) 18%,#fff);
  }
}
/* low-specificity reset so the page's global button/input rules do not leak in */
:where(.ypg-root) *,:where(.ypg-root) *::before,:where(.ypg-root) *::after{box-sizing:border-box}
:where(.ypg-root) :where(button,input,textarea,select){font:inherit;color:inherit;margin:0;letter-spacing:normal;text-transform:none;text-shadow:none}
:where(.ypg-root) :where(button){background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
:where(.ypg-root) :where(p,h2,h3,fieldset,legend){margin:0;padding:0}
:where(.ypg-root) :where(fieldset){border:0;min-width:0}


/* ------------------------------------------------------------------ launcher */
.ypg-launch{
  position:fixed;left:var(--yh-grace-left,calc(14px + env(safe-area-inset-left,0px)));bottom:var(--yh-grace-bottom,calc(14px + env(safe-area-inset-bottom,0px)));
  z-index:var(--yh-grace-z,8000);
  --gw:60px;--gh:90px;
  width:var(--gw);height:var(--gh);
  pointer-events:none;will-change:transform;
}
.ypg-gr{position:absolute;inset:0;pointer-events:auto;display:block;cursor:pointer;border-radius:16px;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;box-shadow:none}
.ypg-gr:focus-visible{outline:3px solid var(--ypg-accent);outline-offset:3px}
.ypg-bob{position:relative;display:block;width:100%;height:100%}
.ypg-bob svg{display:block;width:100%;height:100%;overflow:visible}
.ypg-lab{display:block;position:absolute;left:66%;top:-4px;padding:3px 9px;border-radius:999px;background:var(--ypg-accent);color:var(--ypg-paper);border:1.5px solid var(--ypg-paper);font:700 11px/1 var(--ypg-sans);letter-spacing:.02em;pointer-events:none;white-space:nowrap;transition:filter .2s}
.ypg-gr:hover .ypg-lab{filter:brightness(1.15)}
.gm{will-change:transform}

/* the chat-header portrait: calm, with a slow blink. The raised hand only appears during the first-open wave. */
.ypg-eyes,.ypg-hand,.td-eye{transform-box:fill-box}
.ypg-eyes{transform-origin:50% 50%;animation:ypgBlink 6s infinite}
.td-eye{transform-origin:50% 50%;animation:ypgBlink 5.3s infinite}
.ypg-hand{transform-origin:50% 100%;opacity:0}
.is-wave .ypg-hand{animation:ypgWave 2.4s ease-in-out 1 both}
@keyframes ypgBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
@keyframes ypgWave{
  0%{opacity:0;transform:translateY(16px) rotate(0)}
  16%{opacity:1;transform:translateY(0) rotate(0)}
  28%{opacity:1;transform:rotate(-14deg)}
  42%{opacity:1;transform:rotate(10deg)}
  56%{opacity:1;transform:rotate(-12deg)}
  70%{opacity:1;transform:rotate(5deg)}
  82%{opacity:1;transform:rotate(0)}
  100%{opacity:0;transform:translateY(14px) rotate(0)}}
/* confirmation: a soft gold ring around the header portrait */
.ypg-av.is-confirm{animation:ypgRing 1.8s ease-out 1}
@keyframes ypgRing{0%{box-shadow:0 0 0 0 rgba(201,162,75,.7)}100%{box-shadow:0 0 0 14px rgba(201,162,75,0)}}

/* speech bubble: one gentle nudge per session */
.ypg-say{
  position:absolute;bottom:100%;left:0;margin-bottom:10px;width:max-content;max-width:min(220px,calc(100vw - 24px));
  padding:9px 14px;border-radius:14px;background:#fff;color:var(--ypg-ink);border:1px solid var(--ypg-accent);
  box-shadow:0 6px 18px rgba(30,10,20,.18);font:600 .86rem/1.3 var(--ypg-sans);text-align:left;
  pointer-events:none;opacity:0;transform:translateY(6px);transform-origin:var(--tail,50%) 100%;
  transition:opacity .25s,transform .25s;
}
.ypg-say::after{content:"";position:absolute;top:100%;left:var(--tail,50%);width:11px;height:11px;margin:-6px 0 0 -6px;background:#fff;border:solid var(--ypg-accent);border-width:0 1px 1px 0;transform:rotate(45deg)}
.ypg-say.on{opacity:1;transform:none}

/* ------------------------------------------------------------------ Teddy: walks beside Grace along the bottom edge */
.ypg-td{
  --th:52px;
  position:fixed;left:0;bottom:calc(var(--yh-grace-bottom,calc(14px + env(safe-area-inset-bottom,0px))) - 2px);
  z-index:var(--yh-grace-td-z,6);
  display:block;height:var(--th);width:calc(var(--th) * 1.3333);padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;
  pointer-events:none;           /* only his body takes pointer events (see svg rule below) */
  visibility:hidden;will-change:transform;cursor:pointer;
}
.ypg-td.is-ready{visibility:visible}
.ypg-td svg *{pointer-events:auto}
.ypg-td.is-scrolling svg *,.ypg-td.is-away svg *{pointer-events:none}
.ypg-td:focus-visible{outline:3px solid var(--ypg-accent);outline-offset:2px}
.ypg-td-bob{display:block;width:100%;height:100%}
.ypg-td-bob svg{display:block;width:100%;height:100%;overflow:visible}
.ypg-td .td-sit{display:none}
.ypg-td.is-sit .td-sit{display:inline}
.ypg-td.is-sit .td-stand{display:none}
.ypg-td .td-hit{display:none}

/* ------------------------------------------------------------------ scrim */
.ypg-scrim{display:none}

/* ------------------------------------------------------------------ chat sheet */
.ypg-sheet{
  position:fixed;z-index:2147483000;
  right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  width:416px;max-width:calc(100vw - 24px);
  height:min(720px,calc(100vh - 32px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ypg-paper);color:var(--ypg-ink);
  border-radius:min(var(--ypg-r),22px);border:1px solid var(--ypg-line);box-shadow:var(--ypg-shadow);
  font:400 1rem/1.45 var(--ypg-sans);
  animation:ypgPop .35s cubic-bezier(.2,.8,.2,1);
}
@supports (height:100dvh){.ypg-sheet{height:min(720px,calc(100dvh - 32px))}}
.ypg-sheet[hidden]{display:none}
@keyframes ypgPop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.ypg-hd{flex:none;display:flex;align-items:center;gap:10px;padding:12px 8px 12px 14px;background:var(--ypg-accent);color:var(--ypg-paper)}
.ypg-avs{flex:none;display:flex;align-items:center}
.ypg-av{width:46px;height:46px;border-radius:50%;background:#f3e8de;overflow:hidden;display:block;border:2px solid var(--ypg-gold);flex:none}
.ypg-av svg{display:block;width:100%;height:100%}
.ypg-av.td{background:#f3e1c6;display:grid;place-items:center}
.ypg-av.td svg{width:34px;height:34px}
.ypg-ttl{min-width:0;margin-right:auto}
.ypg-ttl b{display:block;font:600 1.2rem/1.15 var(--ypg-serif);letter-spacing:.01em}
.ypg-ttl small{display:block;font:500 .76rem/1.3 var(--ypg-sans);opacity:.88}
.ypg-ib{flex:none;border:0;padding:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:var(--ypg-paper);font:600 1.15rem/1 var(--ypg-sans);transition:background .2s}
.ypg-ib:hover{background:rgba(255,255,255,.28)}
.ypg-ib:focus-visible{outline:3px solid var(--ypg-gold);outline-offset:2px}

.ypg-log{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;scroll-padding:12px}
.ypg-m{max-width:90%;padding:11px 14px;border-radius:18px;font:400 .97rem/1.5 var(--ypg-sans);overflow-wrap:anywhere;animation:ypgIn .3s ease-out}
@keyframes ypgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ypg-m.bot{align-self:flex-start;background:#fff;color:var(--ypg-ink);border:1px solid var(--ypg-line);border-bottom-left-radius:5px}
.ypg-m.me{align-self:flex-end;background:var(--ypg-accent);color:var(--ypg-paper);border-bottom-right-radius:5px}
.ypg-m.warn{background:var(--ypg-gtint);border-color:var(--ypg-gold)}
.ypg-m.free{background:var(--ypg-tint);border:1px solid var(--ypg-line);border-left:4px solid var(--ypg-gold);font-weight:600}
.ypg-m small{display:block;margin-top:7px;font-size:.84rem;line-height:1.4;color:var(--ypg-muted);font-weight:400}
.ypg-m b{color:var(--ypg-accent)}
.ypg-m.teddy{display:flex;align-items:flex-start;gap:10px;background:#fff7ea;border-color:#ecd7b3}
.ypg-m.teddy .ypg-av.td{margin:0;flex:none;width:40px;height:40px}
.ypg-m.teddy .ypg-av.td svg{width:38px;height:38px}
.ypg-tdtxt{min-width:0}
.ypg-p{display:block}
.ypg-p+.ypg-p,.ypg-p+.ypg-ul{margin-top:8px}
.ypg-ul{margin:8px 0 0;padding:0 0 0 18px}
.ypg-ul li{margin:3px 0}
.ypg-m .ypg-row+small,.ypg-m .ypg-p+small{margin-top:9px}
.ypg-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ypg-typing{display:inline-flex;gap:4px;padding:5px 2px}
.ypg-typing i{width:7px;height:7px;border-radius:50%;background:var(--ypg-muted);animation:ypgDot 1s infinite}
.ypg-typing i:nth-child(2){animation-delay:.15s}.ypg-typing i:nth-child(3){animation-delay:.3s}
@keyframes ypgDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}

/* dock = sticky footer: quick replies / free text / disclaimer */
.ypg-dock{flex:none;border-top:1px solid var(--ypg-line);background:var(--ypg-paper);padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.ypg-sheet.ypg-kb .ypg-dock{padding-bottom:10px}
.ypg-dock [hidden]{display:none!important}
.ypg-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:calc(var(--ypg-vh,720px) * .34);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0}
.ypg-chips:empty{display:none}
.ypg-act{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.ypg-act:empty{display:none}
.ypg-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--ypg-accent);color:var(--ypg-accent);background:#fff;font:600 .93rem/1.15 var(--ypg-sans);text-align:center;transition:background .2s,color .2s}
.ypg-chip:hover,.ypg-chip[aria-pressed="true"]{background:var(--ypg-accent);color:var(--ypg-paper)}
.ypg-chip[aria-pressed="true"]::before{content:"\2713";font-weight:700}
.ypg-chip:focus-visible,.ypg-btn:focus-visible,.ypg-big:focus-visible{outline:3px solid var(--ypg-gold);outline-offset:2px}
.ypg-chip.go{background:var(--ypg-accent);color:var(--ypg-paper);flex:1 1 100%;min-height:50px;font-size:1rem}
.ypg-chip.go:hover{filter:brightness(1.12)}
.ypg-chip.soft{border-style:dashed}
.ypg-ask{display:flex;gap:8px;padding-top:8px}
.ypg-ask input{flex:1;min-width:0;min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(0,0,0,.28);background:#fff;color:var(--ypg-ink);font-size:16px;-webkit-appearance:none;appearance:none}
.ypg-ask input:focus{outline:3px solid var(--ypg-accent);outline-offset:1px;border-color:var(--ypg-accent)}
.ypg-ask button{flex:none;border:0;min-height:46px;min-width:68px;padding:0 18px;border-radius:999px;background:var(--ypg-accent);color:var(--ypg-paper);font:700 .93rem/1 var(--ypg-sans)}
.ypg-disc{margin:0;padding-top:6px;text-align:center;font:400 .72rem/1.35 var(--ypg-sans);color:var(--ypg-muted)}

.ypg-btn,.ypg-big{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:999px;font:700 1rem/1.1 var(--ypg-sans);text-align:center;text-decoration:none;border:2px solid var(--ypg-accent);background:var(--ypg-accent);color:var(--ypg-paper);cursor:pointer;transition:filter .2s}
.ypg-btn:hover,.ypg-big:hover{filter:brightness(1.12)}
.ypg-btn.sec{background:#fff;color:var(--ypg-accent)}
.ypg-btn.gold{background:var(--ypg-gold);border-color:var(--ypg-gold);color:var(--ypg-ink)}
.ypg-btn.sm{min-height:44px;padding:0 16px;font-size:.92rem}
.ypg-big{width:100%;min-height:58px;font-size:1.06rem;background:var(--ypg-accent);color:var(--ypg-paper);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ypg-big.gold{background:var(--ypg-gold);border-color:var(--ypg-gold);color:var(--ypg-ink)}
.ypg-m .ypg-big{margin-top:2px}
.ypg-m .ypg-row .ypg-btn{flex:1 1 auto}

/* contact card: how to arrange a phone consultation (nothing is collected or sent) */
.ypg-m.ypg-card{max-width:100%;width:100%;padding:14px;background:#fff;border-left:4px solid var(--ypg-gold)}
.ypg-card-h{margin:0 0 10px;font:600 1.22rem/1.2 var(--ypg-serif);color:var(--ypg-accent)}
.ypg-card .ypg-big+.ypg-big{margin-top:8px}
.ypg-big.sec{background:#fff;color:var(--ypg-accent)}
.ypg-tel{flex-direction:column;gap:3px;min-height:66px;padding:8px 18px}
.ypg-tel-l{font:700 .8rem/1.1 var(--ypg-sans);letter-spacing:.05em;text-transform:uppercase;opacity:.92}
.ypg-tel-n{font:700 1.32rem/1.1 var(--ypg-sans);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ypg-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 12px;margin:14px 0 0;padding:0;font:400 .92rem/1.4 var(--ypg-sans)}
.ypg-fact{display:contents}
.ypg-facts dt{margin:0;font-weight:700;color:var(--ypg-muted)}
.ypg-facts dd{margin:0;overflow-wrap:anywhere}
.ypg-card .ypg-row .ypg-btn{flex:0 1 auto}
.ypg-card-p,.ypg-card-sub{margin:10px 0 0}
.ypg-card-free{margin:10px 0 0;padding:8px 11px;border-radius:10px;background:var(--ypg-tint);font-weight:600}
.ypg-card-sub{font-weight:700}
.ypg-intake{columns:2;column-gap:18px;font-size:.9rem}
.ypg-intake li{break-inside:avoid}

/* ------------------------------------------------------------------ mobile: near-full-height bottom sheet */
html.ypg-lock,html.ypg-lock body{overflow:hidden!important}
@media (max-width:640px){
  .ypg-scrim{display:block;position:fixed;inset:0;z-index:2147482999;background:rgba(25,10,16,.5)}
  .ypg-scrim[hidden]{display:none}
  .ypg-sheet{
    left:0;right:0;bottom:auto;top:var(--ypg-vt,0px);width:auto;max-width:none;
    height:var(--ypg-vh,100vh);
    border-radius:20px 20px 0 0;border:0;box-shadow:0 -10px 40px rgba(25,10,16,.35);
    animation:ypgSlide .32s cubic-bezier(.2,.8,.2,1);
  }
  @supports (height:100dvh){.ypg-sheet{height:var(--ypg-vh,100dvh)}}
  .ypg-hd{padding-top:max(12px,env(safe-area-inset-top,0px))}
  .ypg-root.ypg-open .ypg-launch,.ypg-root.ypg-open .ypg-td{visibility:hidden}
}

/* ------------------------------------------------------------------ compact launcher (< 760px)
   A small 52px round portrait button along the bottom edge, safe-area aware. It collapses to a 44px avatar while
   the page scrolls and, at its home spot, lifts itself off page buttons. Teddy is smaller (~38px) and walks with her. */
@media (max-width:759.98px){
  .ypg-launch{--gw:48px;--gh:72px;transition:translate .28s ease,opacity .28s ease}
  .ypg-td{--th:36px}
  .ypg-td .td-hit{display:inline}  /* keeps Teddy's tap target at 44px or more */
  .ypg-launch.ypg-min,.ypg-launch.ypg-small{--gw:44px;--gh:66px}
  .ypg-launch.ypg-min{opacity:.78}
  .ypg-launch.ypg-peek{--gw:44px;--gh:44px}
  .ypg-launch.ypg-min .ypg-lab,.ypg-launch.ypg-small .ypg-lab,.ypg-launch.ypg-peek .ypg-lab{display:none}
  .ypg-lab{left:62%;top:-6px;padding:3px 7px;font-size:10px}
  .ypg-say.side{bottom:auto;top:0;left:calc(100% + 18px)!important;margin:0;max-width:min(210px,calc(100vw - 120px - env(safe-area-inset-left,0px)));transform:none;transform-origin:0 0}
  .ypg-say.side.on{transform:none}
  .ypg-say.side::after{top:auto;bottom:9px;left:0;margin:0 0 0 -6px;border-width:0 0 1px 1px}
}
@keyframes ypgSlide{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------------ modes */
.ypg-root.ypg-fast *,.ypg-root.ypg-fast *::before,.ypg-root.ypg-fast *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .ypg-root *,.ypg-root *::before,.ypg-root *::after{animation:none!important;transition:none!important}
}

/* chat extras: quoted statements, navigation chips */
.ypg-qh{display:block;margin:0 0 6px;font:600 1.05rem/1.25 var(--ypg-serif);color:var(--ypg-accent)}
.ypg-q{display:block;margin:0;padding:2px 0 2px 11px;border-left:3px solid var(--ypg-gold);font-style:italic}
.ypg-q+.ypg-q{margin-top:9px}
.ypg-chip.nav{background:var(--ypg-gtint);border-color:var(--ypg-gold);color:var(--ypg-ink)}
.ypg-chip.nav:hover{background:var(--ypg-accent);color:var(--ypg-paper);border-color:var(--ypg-accent)}
.ypg-chip.menu{border-color:var(--ypg-muted);color:var(--ypg-muted)}
.ypg-chip.menu:hover{background:var(--ypg-muted);color:var(--ypg-paper)}

/* peek: the round head-and-shoulders avatar (only when page buttons leave no room for the full figure) */
.ypg-launch.ypg-peek .ypg-bob{border-radius:50%;overflow:hidden;background:#f3e8de;border:2px solid var(--ypg-gold);box-shadow:0 5px 14px rgba(40,15,25,.26)}
.ypg-launch.ypg-peek .ypg-bob svg{overflow:hidden}
.ypg-launch.ypg-peek .ypg-gr{border-radius:50%}