/* Wellbeing: quiet surfaces, readable controls, and one clear next action. */
.view.wb{background:var(--bg)}
.view.wb .card{
  background:var(--surface); border-color:var(--line);
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
}
.view.wb .view-head{gap:12px; flex-wrap:wrap}
.view.wb .wellbeing-heading{display:grid; grid-template-columns:minmax(0,1fr); gap:3px}
.view.wb .wellbeing-heading .view-title-row{margin:0}
.view.wb .view-head h2{font-family:var(--font-display); letter-spacing:-.035em; font-size:calc(30px * var(--ts,1))}
.view.wb .wb-lead{flex-basis:100%; max-width:65ch; margin:0 0 6px; color:var(--ink-2); line-height:1.65; font-size:calc(14px * var(--ts,1))}
.view.wb .view-head .wb-lead{margin-top:0}
.view.wb > .wb-lead{margin:-5px 0 22px}
.view.wb .panel-head h3{font-size:calc(17px * var(--ts,1)); letter-spacing:-.02em}
.view.wb .wb-card-note{margin:-2px 0 18px; color:var(--muted); font-size:calc(12.5px * var(--ts,1)); line-height:1.6; max-width:54ch}
.view.wb .wb-section{margin-top:26px}
.view.wb .wb-section-head{display:grid; gap:4px; margin-bottom:12px}
.view.wb .wb-section-head h3{margin:0; font-family:var(--font-display); font-size:calc(19px * var(--ts,1)); letter-spacing:-.02em}
.view.wb .wb-section-head p{margin:0; max-width:62ch; color:var(--muted); font-size:calc(12.5px * var(--ts,1)); line-height:1.55}
#view-calm .calm-split{--side:340px; gap:20px}
#view-calm .calm-checkin-grid{--side:360px; gap:16px}
#view-calm .calm-checkin-grid .glass-mood{margin-bottom:0}
#view-calm .breathing-card{padding:24px; min-width:0}
#view-calm .breath-stage{gap:20px; padding:22px 0; min-height:420px}
#view-calm .orb{
  width:min(280px,65vw); height:min(280px,65vw); border:1px solid var(--line);
  background:var(--surface-2); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
#view-calm .orb .ring{inset:12%; border-color:var(--rest); opacity:.22}
#view-calm .orb .core{background:var(--rest); opacity:.14; box-shadow:none; width:120px; height:120px}
#view-calm .breath-reading{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none}
#view-calm .breath-reading .orb-txt{position:static; display:block; font-size:calc(20px * var(--ts,1)); color:var(--ink)}
#breathSeconds{font-family:var(--font-display); font-size:calc(42px * var(--ts,1)); font-variant-numeric:tabular-nums; line-height:1.1; color:var(--ink)}
.breathing-card:has(#breathBtn[aria-pressed="false"]) #breathSeconds{font-family:var(--font-ui); font-size:calc(12px * var(--ts,1)); color:var(--muted)}
#view-calm #orbCount{font-family:var(--font-ui); font-size:calc(12px * var(--ts,1))}
#view-calm #breathHint{line-height:1.65}
#view-calm .checkin-card{padding:20px}
#view-calm .checkin-card label{display:flex; justify-content:space-between; gap:10px}
#view-calm .checkin-card output{font-family:var(--font-ui); color:var(--ink-2); font-size:calc(12px * var(--ts,1))}
#view-calm #checkinSliders{gap:18px!important}
#view-calm #checkinSliders input{accent-color:var(--rest); min-height:28px}
#view-calm .grounding-card{border-left:3px solid var(--rest)}
.view.wb :is(button,a,input,summary):focus-visible{outline:2px solid var(--accent); outline-offset:4px}
body:has(.view.wb.on) .group-tab{min-height:44px; padding:10px 18px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
body:has(.view.wb.on) .group-tab.on{background:var(--ink); border-color:var(--ink); color:var(--surface)}
[data-motion="reduce"] #view-calm .orb .core{transition:none!important}
@media (prefers-reduced-motion:reduce){#view-calm .orb .core{transition:none!important}}
[data-contrast="high"] #view-calm .orb .ring{opacity:1}
@media(max-width:1100px){
  #view-calm .calm-split{--side:300px}
}
@media(max-width:760px){
  #view-calm .gm-faces{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px}
  #view-calm .gm-face{min-width:0; padding:8px 2px}
  #view-calm .gm-l{font-size:calc(10px*var(--ts,1)); white-space:nowrap}
  .view.wb .view-head h2{font-size:calc(26px * var(--ts,1))}
  .view.wb .wb-section{margin-top:22px}
  #view-calm .breathing-card{padding:18px}
  #view-calm .breath-stage{min-height:380px; padding:16px 0}
  body:has(.view.wb.on) .group-tabs{gap:6px; padding-left:12px; padding-right:12px}
  body:has(.view.wb.on) .group-tab{padding:10px 14px}
}
@media(max-width:450px){
  #view-calm .orb{width:220px; height:220px}
  #view-calm .orb .core{width:100px; height:100px}
  #view-calm .breath-stage{min-height:350px}
}