/* Sara Vyayam - the home exercise plan (patient_app_vyayam.js, 5 Oct 2026).
   The screen he approved: white page in Sara Aahaar's own glass (its .aa shell and its .aa-top,
   .aa-round and .aa-glass are reused as they are), and LIGHT ORANGE BEHIND THE PERSON in each
   picture - the pictures are cut on white, so the tile is the colour and the picture is laid on it
   with multiply. */
body.vy-on #top, body.vy-on #tabs, body.vy-on .pc-fab, body.vy-on .ptr { display:none !important; }
body.vy-on { background:#FFFFFF; }
body.vy-on main { padding-top:0; padding-bottom:0; }
.vy.aa { padding-bottom:calc(40px + env(safe-area-inset-bottom)); }

/* ---- the ring and the week */
.vy-dial { padding:18px 14px 14px; margin-top:14px; }
.vy-dial .row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vy-ring { position:relative; width:132px; height:132px; flex:none; }
.vy-ring svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.vy-ring .in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.vy-ring .in b { font-size:30px; font-weight:800; letter-spacing:-.02em; color:#141B2D; }
.vy-ring .in small { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6B7691; margin-top:3px; }
.vy-side { flex:1; text-align:center; }
.vy-side b { display:block; font-size:26px; font-weight:800; color:#141B2D; }
.vy-side small { display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#6B7691; margin-top:2px; }
.vy-week { display:flex; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid rgba(20,27,45,.07); }
.vy-week button { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:36px; min-height:48px; padding:2px 0; border:0; background:none;
  font:inherit; font-size:11.5px; font-weight:700; color:#6B7691; cursor:pointer; }
.vy-week button:disabled { cursor:default; opacity:.55; }
.vy-week i { width:26px; height:26px; border-radius:50%; background:rgba(20,27,45,.06); display:grid; place-items:center; color:#fff; }
.vy-week i svg { width:14px; height:14px; }
.vy-week .done i { background:#E2570F; }
.vy-week .today i { background:#fff; box-shadow:inset 0 0 0 2.5px #E2570F; }
.vy-week .today, .vy-week .shown { color:#141B2D; }
.vy-week .shown i { outline:2px solid rgba(226,87,15,.35); outline-offset:2px; }

/* ---- what is this patient's own */
.vy-see { margin-top:12px; padding:13px 14px; border-radius:20px; background:#FFF6E9; border:1px solid #F3D29B; }
.vy-see b { display:block; font-size:15px; font-weight:800; color:#7A4A05; line-height:1.35; }
.vy-see b + b { margin-top:7px; }
.vy-see.first { margin-top:16px; padding:18px 16px; background:#FFF1F1; border-color:#F3B5B7; }
.vy-see.first b { font-size:17px; color:#8F1D1D; }
.vy-see p.now { margin:10px 0 0; font-size:15px; font-weight:700; color:#8F1D1D; line-height:1.4; }
.vy-see a.red { background:#B3261E; border-color:#B3261E; color:#fff; margin-right:8px; }
.vy-again { margin-top:16px; padding:20px 16px 16px; }
.vy-again h2 { margin:0; font-size:21px; font-weight:800; color:#141B2D; letter-spacing:-.02em; }
.vy-again p { margin:8px 0 0; font-size:15px; font-weight:600; color:#3A465F; line-height:1.45; }
.vy-again small { display:block; margin-top:8px; font-size:13px; font-weight:600; color:#6B7691; }
.vy-again .vy-start { margin-top:16px; }
.vy-other { display:block; width:100%; margin-top:10px; min-height:50px; border-radius:18px; border:1.5px solid #E6E9F0; background:#fff;
  font:inherit; font-size:15.5px; font-weight:800; color:#253049; cursor:pointer; }
.vy-see button { display:block; margin-top:12px; min-height:44px; padding:0 14px; border-radius:999px; border:1.5px solid #E6C9A0; background:#fff;
  font:inherit; font-size:14.5px; font-weight:800; color:#7A4A05; cursor:pointer; }
.vy-see a { display:inline-flex; align-items:center; gap:7px; margin-top:9px; min-height:44px; padding:0 14px; border-radius:999px; background:#fff;
  border:1px solid #F3D29B; color:#7A4A05; font-size:14px; font-weight:800; text-decoration:none; }
.vy-see a svg { width:17px; height:17px; }
.vy-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 2px 2px; }
.vy-chips span { font-size:13px; font-weight:700; color:#8A3A0B; background:#FFF0E4; border:1px solid #FAD7BD; border-radius:999px; padding:7px 12px; }

/* ---- one exercise */
.vy-row { padding:12px; margin-top:12px; }
.vy-row .vy-top { display:flex; align-items:center; gap:12px; }
.vy-pic { flex:none; width:88px; height:88px; border-radius:20px; background:linear-gradient(160deg,#FFEBDA,#FFDDC2); display:grid; place-items:center; overflow:hidden; }
.vy-pic img { display:block; width:88px !important; height:88px !important; max-width:none !important; object-fit:contain !important; object-position:center !important;
  padding:5px; box-sizing:border-box; border-radius:0 !important; transform:none !important; mix-blend-mode:multiply; }
.vy-txt { flex:1; min-width:0; display:block; text-align:left; border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
.vy-txt .cap { display:block; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#C2501A; }
.vy-txt b { display:block; font-size:17px; font-weight:800; color:#141B2D; line-height:1.25; margin-top:2px; }
.vy-txt small { display:block; font-size:14px; font-weight:600; color:#55617C; margin-top:2px; }
.vy-how { display:inline-block; margin-top:5px; font-size:13px; font-weight:800; color:#C2501A; }
.vy-txt[aria-expanded="true"] .vy-how { display:none; }
.vy-check { flex:none; width:46px; height:46px; border-radius:50%; border:2.5px solid #E7C3A9; background:#fff; color:transparent; display:grid; place-items:center; padding:0; cursor:pointer; }
.vy-check svg { width:22px; height:22px; opacity:0; }
.vy-check:disabled { cursor:default; opacity:.5; }
.vy-row.done .vy-check { background:#E2570F; border-color:#E2570F; color:#fff; box-shadow:0 6px 14px rgba(226,87,15,.3); }
.vy-row.done .vy-check svg { opacity:1; }
.vy-row.done .vy-txt b { color:#55617C; }
.vy-row.done .vy-pic { opacity:.75; }
.vy-steps { margin:12px 2px 2px; padding-top:12px; border-top:1px solid rgba(20,27,45,.07); }
.vy-steps ol { margin:0; padding:0; list-style:none; counter-reset:s; }
.vy-steps li { counter-increment:s; position:relative; padding:0 0 9px 34px; font-size:15px; font-weight:600; color:#253049; line-height:1.4; }
.vy-steps li::before { content:counter(s); position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:50%; background:#FFE3CC; color:#8A3A0B;
  font-size:13px; font-weight:800; display:grid; place-items:center; }
.vy-steps p { margin:2px 0 0; font-size:14px; font-weight:600; color:#55617C; }
.vy-steps p b { color:#141B2D; }
.vy-steps p.stop b { color:#B3261E; }
.vy-restday { margin-top:12px; padding:22px 16px; text-align:center; }
.vy-restday b { font-size:17px; font-weight:800; color:#141B2D; }

/* ---- stop */
.vy-stop { margin-top:16px; padding:14px; border-radius:22px; background:#FFF1F0; border:1px solid #F6C9C5; }
.vy-stop h3 { margin:0 0 10px; font-size:15px; font-weight:800; color:#B3261E; }
.vy-stop .list { display:flex; flex-wrap:wrap; gap:8px; }
.vy-stop .list span { font-size:14.5px; font-weight:800; color:#7A1712; background:#fff; border:1px solid #F6C9C5; border-radius:999px; padding:8px 13px; }
.vy-stop .do { margin:11px 0 0; font-size:15px; font-weight:800; color:#7A1712; }
.vy-stop .call { margin-top:12px; width:100%; min-height:48px; border-radius:16px; background:#B3261E; color:#fff !important; font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.vy-stop .call svg { width:19px; height:19px; }
.vy-rest { margin:14px 4px 0; font-size:13.5px; font-weight:600; color:#55617C; line-height:1.45; }
.vy-rest b { color:#141B2D; }

/* ---- the questions */
.vy-q { padding:15px 14px; margin-top:12px; }
.vy-q h3 { margin:0 0 11px; font-size:16.5px; font-weight:800; color:#141B2D; line-height:1.35; }
.vy-opts { display:flex; flex-wrap:wrap; gap:8px; }
.vy-opts.two { display:grid; grid-template-columns:1fr 1fr; }
.vy-opt { min-height:46px; padding:8px 15px; border-radius:16px; border:1.5px solid #E6E9F0; background:#fff; font:inherit; font-size:15px; font-weight:700; color:#253049;
  cursor:pointer; text-align:center; }
.vy-opt.on { background:#FFF0E4; border-color:#E2570F; color:#8A3A0B; }
.vy-opt.none { color:#55617C; }
.vy-num { width:120px; min-height:46px; padding:6px 14px; border-radius:16px; border:1.5px solid #E6E9F0; font:inherit; font-size:18px; font-weight:700; color:#141B2D; }
.vy-start { display:block; width:100%; min-height:54px; margin-top:18px; border:0; border-radius:18px; background:#E2570F; color:#fff !important; font:inherit; font-size:17px;
  font-weight:800; cursor:pointer; box-shadow:0 10px 22px rgba(226,87,15,.3); }

/* ---- the card on Home */
.vy-home { min-height:108px; }
/* the app's own light orange on Home, beside Sara Aahaar's light green. It was light blue from 5 Oct 2026;
   "make it orange" (Dr. Ranadheer, 7 Oct 2026) - no blue is left in the patient app. The picture sits on a
   white tile so it does not sink into the orange card. */
#vy-home.gh-glass { background:linear-gradient(160deg,#FFF7F2 0%,#FFE9DB 100%) !important; border-color:#F6D4BE !important; }
.gh-sec b .vy-name { color:#C2480A; }
.vy-home-pic { position:absolute; right:12px; top:12px; width:84px; height:84px; border-radius:18px; background:linear-gradient(160deg,#FFFFFF,#FFF6EF); overflow:hidden; pointer-events:none; }
.vy-home-pic img { display:block; width:84px; height:84px; object-fit:contain; padding:4px; box-sizing:border-box; mix-blend-mode:multiply; }
.vy-home .gh-food-top { padding-right:92px; }
.vy-home .gh-food-t em { white-space:nowrap; }
.vy-home .gh-food-new em { white-space:normal; }      /* a sentence, beside the picture: it wraps, it does not run under it */
.vy-home > .gh-food-t { display:block; padding-right:92px; }

/* Telugu is set a little smaller, so it does not stand taller than the English beside it */
body.te .vy-txt b { font-size:16px; }
body.te .vy-steps li { font-size:14px; }
body.te .vy-chips span, body.te .vy-stop .list span { font-size:13px; }
body.te .vy-q h3 { font-size:15.5px; }
body.te .vy-opt { font-size:14px; }

@media (prefers-reduced-motion: no-preference) {
  .vy-check, .vy-opt { transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
}