/* ============================================================
   Wellness Portal — Client plan page
   Calm, accessible, brand-tinted. --primary / --accent are set
   inline per clinic. Designed to read easily on any device.
   ============================================================ */
:root{
  --primary:#0A7350; --accent:#14B97E;
  --paper:#F7FAF8; --paper-2:#E4EFE9; --card:#ffffff;
  --ink:#233832; --ink-soft:#51655E; --line:#CBDDD3;
  --ok-bg:#E4EFE9; --ok-ink:#0A7350; --err-bg:#fbe9e6; --err-ink:#a23a2a;
  --maxw:760px;
}
*{box-sizing:border-box}
body{margin:0}
.plan-body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
     radial-gradient(120% 60% at 50% -10%, color-mix(in srgb,var(--primary) 8%,transparent), transparent 60%),
     var(--paper);
  color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased;
}
.plan-wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,5vw,1.6rem) 3rem}

/* top brand bar */
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0 .9rem}
.plan-brand{display:flex; align-items:center; gap:.6rem}
.plan-logo{max-height:40px; max-width:160px}
.plan-dot{width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.plan-brand-name{font-weight:600; color:var(--primary); letter-spacing:.01em}
.plan-signout{font-size:.85rem; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); padding:.35rem .7rem; border-radius:20px}
.plan-signout:hover{background:#fff}

.plan-alert{border-radius:12px; padding:.85rem 1.1rem; margin:.4rem 0 1rem; font-size:.95rem}
.plan-alert.ok{background:var(--ok-bg); color:var(--ok-ink)}
.plan-alert.err{background:var(--err-bg); color:var(--err-ink)}

/* hero */
.hero{padding:1.6rem 0 1.2rem; border-bottom:1px solid var(--line)}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:600; color:var(--primary); margin:0 0 .8rem}
.hero-title{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-weight:700; font-size:clamp(2rem,6vw,2.9rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 .6rem; color:var(--primary)}
.hero-sub{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-size:clamp(1.1rem,3.4vw,1.4rem); color:var(--ink); margin:0 0 1rem; font-weight:400}
.hero-intro{color:var(--ink-soft); max-width:54ch; margin:0 0 1.3rem}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap}

/* buttons */
.plan-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-weight:600; font-size:.98rem; cursor:pointer; text-decoration:none;
  border-radius:8px; padding:.75rem 1.4rem; border:1px solid transparent; transition:.16s;
}
.plan-btn.primary{background:var(--primary); color:#fff}
.plan-btn.primary:hover{filter:brightness(1.07)}
.plan-btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.plan-btn.ghost:hover{background:#fff}

/* sticky subnav */
.subnav{
  position:sticky; top:0; z-index:10; display:flex; gap:.4rem; overflow-x:auto;
  padding:.6rem 0; margin:0 0 .4rem; background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.subnav a{
  white-space:nowrap; font-size:.85rem; color:var(--ink-soft); text-decoration:none;
  padding:.35rem .8rem; border-radius:20px; border:1px solid transparent;
}
.subnav a:hover{color:var(--primary); border-color:var(--line); background:#fff}

/* sections */
.plan-section{padding:1.9rem 0; border-bottom:1px solid var(--line)}
.plan-section:last-of-type{border-bottom:none}
.sec-h{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-weight:500; font-size:1.55rem; color:var(--primary); margin:0 0 .3rem}
.sec-sub{color:var(--ink-soft); margin:0 0 1.2rem}

/* highlight cards */
.hl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem}
.hl-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem}
.hl-label{display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; color:var(--accent); margin-bottom:.4rem}
.hl-val{margin:0; color:var(--ink)}

/* exercises */
.ex-list{list-style:none; counter-reset:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem}
.ex-item{display:grid; grid-template-columns:auto 1fr; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem}
.ex-num{
  width:2.1rem; height:2.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 16%,white); color:var(--accent); font-weight:700;
  font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-size:1.1rem;
}
.ex-body h3{margin:.1rem 0 .35rem; font-size:1.1rem; color:var(--ink)}
.ex-body p{margin:0 0 .6rem; color:var(--ink-soft)}
.ex-tags{display:flex; gap:.4rem; flex-wrap:wrap}
.tagchip{font-size:.76rem; font-weight:500; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,white); border:1px solid color-mix(in srgb,var(--primary) 18%,white); border-radius:20px; padding:.2rem .6rem}

/* nutrition */
.nut-list{display:flex; flex-direction:column; gap:.8rem}
.nut-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem}
.nut-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.nut-head h3{margin:0; font-size:1.05rem}
.nut-card p{margin:.5rem 0 0; color:var(--ink-soft)}

/* tips */
.tip-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem}
.tip-card{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:1.05rem}
.tip-tag{display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:700; margin-bottom:.35rem}
.tip-card h3{margin:0 0 .35rem; font-size:1.02rem}
.tip-card p{margin:0; color:var(--ink-soft)}

/* schedule */
.sched-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem}
.sched-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem}
.sched-card h3{margin:0 0 .5rem; font-size:1rem; color:var(--primary)}
.sched-card ul{margin:0; padding-left:1.1rem; color:var(--ink-soft)}
.sched-card li{margin:.2rem 0}

/* tracking */
.track-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.check{display:flex; align-items:flex-start; gap:.7rem; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; cursor:pointer}
.check input{width:1.2rem; height:1.2rem; margin-top:.15rem; accent-color:var(--primary); flex:0 0 auto}
.check span{color:var(--ink)}

/* notes */
.note-list{display:flex; flex-direction:column; gap:1rem}
.note-field{display:flex; flex-direction:column}
.note-label{font-weight:600; color:var(--ink)}
.note-hint{color:var(--ink-soft); font-size:.85rem; margin:.15rem 0 .35rem}
.note-field textarea{font:inherit; border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; background:var(--card); resize:vertical; color:var(--ink)}
.note-field textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,white); border-color:var(--primary)}

/* breathing */
.breathe-list{display:flex; flex-direction:column; gap:.8rem}
.breathe-card{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem}
.breathe-icon{width:2.1rem; height:2.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,white)}
.breathe-body h3{margin:.1rem 0 .35rem; font-size:1.1rem}
.breathe-body p{margin:0 0 .6rem; color:var(--ink-soft)}

/* wellbeing sliders */
.wellbeing .scale-field{margin:0 0 1.2rem}
.scale-field label{display:block; font-weight:600; color:var(--ink); margin-bottom:.5rem}
.scale-val{color:var(--primary); font-weight:700}
.scale-max{color:var(--ink-soft); font-weight:500}
.scale-field input[type=range]{width:100%; accent-color:var(--primary); height:1.6rem}
.scale-ends{display:flex; justify-content:space-between; color:var(--ink-soft); font-size:.78rem; margin-top:.1rem}

/* text block */
.text-block h3{font-size:1.05rem; margin:.6rem 0 .3rem}
.text-block p{margin:0 0 .7rem; color:var(--ink-soft)}

/* save bar */
.save-bar{position:sticky; bottom:0; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; padding:1rem; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-top:1px solid var(--line); border-radius:14px 14px 0 0}
.save-note{color:var(--ink-soft); font-size:.85rem}

/* footer */
.plan-foot{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.85rem}
.plan-foot p{margin:.3rem 0}
.plan-foot-brand{font-size:.8rem}

/* access screen */
.access-screen{min-height:62vh; display:flex; align-items:center; justify-content:center; padding:2rem 0}
.access-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:2rem; width:100%; max-width:420px; box-shadow:0 10px 40px rgba(40,50,45,.06)}
.access-card h1{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-weight:500; color:var(--primary); margin:0 0 .3rem; font-size:1.7rem}
.access-sub{color:var(--ink-soft); margin:0 0 1.3rem}
.access-card .stack{display:flex; flex-direction:column; gap:1rem}
.access-card label{font-weight:600; font-size:.9rem; display:block; color:var(--ink)}
.access-card input{width:100%; font:inherit; margin-top:.35rem; border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; background:#fff; color:var(--ink)}
.access-card input:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,white); border-color:var(--primary)}
.access-card .plan-btn{width:100%; margin-top:.3rem}

/* guided session player */
.session-player{
  position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column;
  color:#fff; padding:1.1rem clamp(1rem,5vw,2rem) 1.6rem;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--accent) 45%,transparent), transparent 60%),
    linear-gradient(160deg, var(--primary), color-mix(in srgb,var(--primary) 70%, #11201d));
}
.session-player[hidden]{display:none}
.sp-top{display:flex; align-items:center; gap:.8rem}
.sp-icon{background:rgba(255,255,255,.16); color:#fff; border:none; width:2.4rem; height:2.4rem; border-radius:50%; font-size:1rem; cursor:pointer; flex:0 0 auto}
.sp-progress{flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.22); overflow:hidden}
#spBar{height:100%; width:0; background:#fff; transition:width .4s ease}
.sp-stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem}
.sp-phase{text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; font-weight:700; opacity:.85; margin:0}
.sp-name{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-weight:500; font-size:clamp(1.6rem,7vw,2.6rem); margin:.2rem 0; line-height:1.1}
.sp-timer{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif; font-size:clamp(4.5rem,26vw,9rem); font-weight:500; line-height:1; margin:.3rem 0; min-width:2ch}
.sp-meta{opacity:.9; margin:0; font-size:1rem; max-width:34ch}
.sp-cue{font-size:1.15rem; font-weight:600; margin:.6rem 0 0; min-height:1.4em}
.sp-done{margin-top:1.2rem; background:#fff; color:var(--primary); border:none}
.sp-controls{display:flex; align-items:center; justify-content:center; gap:.7rem}
.sp-controls .plan-btn.ghost{border-color:rgba(255,255,255,.5); color:#fff}
.sp-controls .plan-btn.primary{background:#fff; color:var(--primary); min-width:7rem}

/* accessibility + motion */
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* print */
@media print{
  .plan-top,.subnav,.hero-actions,.save-bar,.plan-signout{display:none!important}
  .plan-body{background:#fff}
  .plan-section{break-inside:avoid; border-color:#ddd}
  .ex-item,.hl-card,.nut-card,.tip-card,.sched-card,.check{box-shadow:none}
}

@media (max-width:560px){
  .ex-item{grid-template-columns:auto 1fr}
}