/* The patient app's own look (18 Sep 2026) — clean white with orange accents.
 *
 * Dr. Ranadheer: "make it look premium and more like an app like Swiggy and Zomato, so people
 * are used to it — the tabs, the UI flow, the fonts." So: white cards on a very light grey
 * ground, generous spacing, big orange buttons, a fixed five-tab bar at the bottom.
 *
 * It is read on a cheap 390px Android phone in bright daylight, so: strong contrast, nothing
 * thinner than 600 weight on grey, no body text under 15px and nothing at all under 13px.
 * Nothing here is shared with the staff app (static/style.css) — this file styles /app only.
 *
 * Fonts are the phone's own: Roboto and Noto Sans Telugu are on every Android, Segoe UI and
 * Nirmala UI on Windows. No webfont, no CDN — the app has to open on a weak connection.
 */
:root {
  --orange:#F75601;            /* the action colour */
  --orange-dark:#C33F00;       /* orange text on white */
  --orange-soft:#FFF1E8;
  --blue:#0267C2;              /* secondary / inks */
  --blue-soft:#EAF2FC;
  --green:#0F7B4F; --green-soft:#E6F5EE;
  --amber:#8A5300; --amber-soft:#FFF6E3;
  --red:#C1243C; --red-soft:#FDECEF;
  --bg:#F4F5F7; --card:#FFFFFF; --line:#E4E7EC;
  --text:#14181F; --muted:#5A6472;
  --shadow:0 1px 2px rgba(20,24,31,.06), 0 8px 24px rgba(20,24,31,.05);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", "Nirmala UI",
         "Noto Sans", system-ui, sans-serif;
  --bar:64px;
  --pad:16px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:rgba(247,86,1,.12); }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font:400 16px/1.5 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.te { line-height:1.62; }
[hidden] { display:none !important; }
img, svg { max-width:100%; }

/* ------------------------------------------------------------------ app shell */
.top { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top); }
.top-in { display:flex; align-items:center; gap:10px; padding:10px var(--pad); max-width:560px; margin:0 auto;
  min-height:60px; }
.logo { flex:none; width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--line);
  object-fit:contain; }
.who-top { flex:1; min-width:0; }
.who-top .h { display:block; font-weight:800; font-size:16px; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.who-top .s { display:block; font-weight:600; font-size:13px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.lang-btn { flex:none; font:inherit; font-weight:800; font-size:14px; color:var(--blue); background:var(--blue-soft);
  border:0; border-radius:999px; min-height:44px; padding:0 16px; cursor:pointer; }

main { padding:var(--pad) var(--pad) calc(var(--bar) + 36px + env(safe-area-inset-bottom)); max-width:560px;
  margin:0 auto; }
main.plain { padding-bottom:40px; }

/* ------------------------------------------------------------------ bottom tabs */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -2px 14px rgba(20,24,31,.06);
  padding-bottom:env(safe-area-inset-bottom); }
.tabs-in { display:flex; max-width:560px; margin:0 auto; }
.tab { flex:1 1 0; min-width:0; background:none; border:0; font:inherit; cursor:pointer; color:var(--muted);
  padding:6px 2px 7px; min-height:var(--bar); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; }
.tab svg { width:23px; height:23px; flex:none; }
.tab span { font-size:13px; font-weight:700; line-height:1.45; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.tab.on { color:var(--orange); }
.tab.on span { font-weight:800; }

/* ------------------------------------------------------------------ pieces */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px;
  margin:0 0 12px; box-shadow:var(--shadow); }
.card.flush { padding:0; overflow:hidden; }
.screen-title { font-size:23px; font-weight:800; letter-spacing:-.02em; margin:2px 0 14px; }
.card h2 { font-size:17px; font-weight:800; margin:0; letter-spacing:-.01em; }
.card h3 { font-size:15.5px; font-weight:800; margin:0; }
.row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.muted { color:var(--muted); font-size:14px; font-weight:500; }
.lead { color:var(--muted); font-size:14.5px; font-weight:500; margin:6px 0 0; }
.hint { color:var(--muted); font-size:13.5px; font-weight:500; margin:10px 0 0; }
.err { color:var(--red); font-weight:700; font-size:14px; margin-top:10px; }

.pill { display:inline-block; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:800;
  background:#EEF0F4; color:#39414E; white-space:nowrap; }
.pill.ok { background:var(--green-soft); color:var(--green); }
.pill.now { background:var(--orange-soft); color:var(--orange-dark); }
.pill.wait { background:var(--amber-soft); color:var(--amber); }
.pill.info { background:var(--blue-soft); color:var(--blue); }

.btn { font:inherit; font-weight:800; font-size:16px; border:0; border-radius:14px; min-height:52px;
  padding:14px 18px; background:var(--orange); color:#fff; width:100%; display:flex; align-items:center;
  justify-content:center; gap:8px; text-align:center; text-decoration:none; cursor:pointer; margin-top:12px; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.55; }
.btn.blue { background:var(--blue); }
.btn.ghost { background:#fff; color:var(--blue); border:1.5px solid var(--line); }
.btn.small { min-height:46px; font-size:14.5px; padding:10px 14px; border-radius:12px; }
.btn.auto { width:auto; display:inline-flex; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.btn-row .btn { flex:1 1 44%; width:auto; }

label { display:block; font-weight:800; font-size:15px; margin-top:16px; }
input, textarea { font:inherit; font-size:16px; width:100%; border:1.5px solid #D6DAE1; border-radius:14px;
  padding:14px; margin-top:8px; background:#fff; color:var(--text); min-height:52px; }
input:focus, textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,86,1,.16); }
input.big { font-size:20px; font-weight:800; letter-spacing:.04em; }
input.code { letter-spacing:.42em; text-align:center; }

/* refresh line at the top of every tab */
.refresh-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 12px; }
.refresh-line .when { font-size:13px; font-weight:700; color:var(--muted); }
.refresh { font:inherit; font-size:13.5px; font-weight:800; color:var(--blue); background:#fff;
  border:1px solid var(--line); border-radius:999px; min-height:44px; padding:0 16px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; }
.refresh svg { width:16px; height:16px; }
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* pull-to-refresh curtain */
.ptr { position:fixed; left:0; right:0; top:0; z-index:15; display:flex; justify-content:center;
  pointer-events:none; transition:opacity .15s; opacity:0; }
.ptr b { margin-top:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:13.5px; font-weight:800; color:var(--blue); box-shadow:var(--shadow); }

/* ------------------------------------------------------------------ hero: where you are now */
.hero { background:linear-gradient(180deg,#FFF6F0 0%,#FFFFFF 62%); border:1px solid #F6D9C6; }
.hero .cap { font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-dark); }
.hero .main { display:flex; align-items:center; gap:14px; margin-top:10px; }
.hero .tok { flex:none; min-width:78px; text-align:center; background:#fff; border:1.5px solid #F6C9AE;
  border-radius:16px; padding:8px 8px 7px; }
.hero .tok b { display:block; font-size:30px; font-weight:800; color:var(--orange); line-height:1.1;
  letter-spacing:-.02em; }
.hero .tok.many b { font-size:19px; }
.hero .tok small { display:block; font-size:13px; font-weight:800; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; }
.hero .what { flex:1; min-width:0; }
.hero .what b { display:block; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.hero .what .sub { display:block; font-size:14px; font-weight:600; color:var(--muted); margin-top:2px; }
.hero .wait { display:flex; align-items:baseline; gap:8px; margin-top:12px; flex-wrap:wrap; }
.hero .wait .n { font-size:26px; font-weight:800; letter-spacing:-.02em; }

/* ------------------------------------------------------------------ steps */
.steps { list-style:none; margin:12px 0 0; padding:0; }
.step { display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.step:first-child { border-top:0; padding-top:2px; }
.dot { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-size:14px; font-weight:800; background:#C3CAD5; margin-top:1px; }
.dot.done { background:var(--green); } .dot.now { background:var(--orange); } .dot.stop { background:var(--red); }
.step .body { flex:1; min-width:0; }
.step b { display:block; font-size:15.5px; font-weight:700; }
.step .at { font-size:13.5px; font-weight:700; color:var(--muted); }

/* ------------------------------------------------------------------ people */
.person { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff;
  color:var(--text); border:1px solid var(--line); border-radius:18px; padding:14px; margin:0 0 10px;
  box-shadow:var(--shadow); min-height:76px; font:inherit; cursor:pointer; }
.person.on { border-color:var(--orange); box-shadow:0 0 0 1.5px var(--orange), var(--shadow); }
.person .av { flex:none; width:46px; height:46px; border-radius:50%; background:var(--orange-soft);
  color:var(--orange-dark); display:grid; place-items:center; font-weight:800; font-size:17px; }
.person .who { flex:1; min-width:0; }
.person .name { display:block; font-weight:800; font-size:16.5px; letter-spacing:-.01em; }
.person .sub { display:block; color:var(--muted); font-size:13.5px; font-weight:600; }
.person .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.person .chips .pill { white-space:normal; }
.person .tok { flex:none; min-width:58px; text-align:center; font-weight:800; color:var(--orange);
  font-size:22px; }
.person .tok small { display:block; font-size:13px; color:var(--muted); letter-spacing:.06em; font-weight:800;
  text-transform:uppercase; }
.person .go { flex:none; color:#98A2B3; font-size:22px; font-weight:700; }

/* ------------------------------------------------------------------ list rows (More) */
.rows { margin:0; padding:0; list-style:none; }
.link-row { display:flex; align-items:center; gap:12px; width:100%; background:#fff; border:0;
  border-top:1px solid var(--line); padding:15px 16px; font:inherit; font-size:16px; font-weight:700;
  color:var(--text); text-align:left; cursor:pointer; min-height:58px; text-decoration:none; }
.link-row:first-child { border-top:0; }
/* Where the browser's own "add to home screen" button is. Shown in place of a prompt we were
   never given, so it has to read as instructions rather than as another thing to tap. */
.install-help { list-style:none; background:var(--blue-soft,#eef3fb); padding:12px 16px 14px;
                border-top:1px solid rgba(0,0,0,.06); }
.install-help p { margin:0 0 7px; font-size:14px; line-height:1.45; }
.install-help p:last-child { margin-bottom:0; }
.install-help .muted { color:#5b6673; font-size:13px; }
.link-row .ico { flex:none; width:34px; height:34px; border-radius:11px; background:var(--blue-soft);
  color:var(--blue); display:grid; place-items:center; }
.link-row .ico svg { width:19px; height:19px; }
.link-row .ico.warm { background:var(--orange-soft); color:var(--orange-dark); }
.link-row .lbl { flex:1; min-width:0; }
.link-row .lbl small { display:block; font-size:13px; font-weight:600; color:var(--muted); }
.link-row .go { flex:none; color:#98A2B3; font-size:20px; font-weight:700; }
.link-row.danger { color:var(--red); }
.link-row.danger .ico { background:var(--red-soft); color:var(--red); }

/* ------------------------------------------------------------------ tests */
.test { border:1px solid var(--line); border-radius:14px; padding:13px 14px; margin-top:10px; }
.test:first-child { margin-top:12px; }
.test .t-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.test .tname { font-weight:800; font-size:15.5px; flex:1; min-width:0; }
.track { display:flex; gap:4px; margin-top:12px; }
.track i { flex:1; height:7px; border-radius:6px; background:#E4E7EC; }
.track i.on { background:var(--green); } .track i.cur { background:var(--orange); }
.track-l { display:flex; justify-content:space-between; gap:4px; margin-top:5px; }
.track-l span { font-size:13px; font-weight:700; color:var(--muted); flex:1; text-align:center; }
.track-l span:first-child { text-align:left; } .track-l span:last-child { text-align:right; }
.where { margin-top:8px; font-weight:700; font-size:14px; color:var(--orange-dark); }
.where.ok { color:var(--green); }

/* wide things scroll inside their own box, never the page */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:12px;
  scrollbar-color:#B9C0CC transparent; }
.scroll-x::-webkit-scrollbar { height:8px; }
.scroll-x::-webkit-scrollbar-thumb { background:#B9C0CC; border-radius:8px; }
.scroll-x::-webkit-scrollbar-track { background:#EEF0F4; border-radius:8px; }
table { border-collapse:collapse; width:100%; min-width:320px; font-size:14.5px; }
th, td { text-align:left; padding:9px 8px; border-top:1px solid var(--line); vertical-align:top; }
th { font-size:13px; font-weight:800; color:var(--muted); border-top:0; }
td.flag { color:var(--red); font-weight:800; }
.flag-word { font-size:13px; font-weight:800; white-space:nowrap; }

/* ------------------------------------------------------------------ money */
.due { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.due .amt { font-size:27px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.qr { display:block; width:200px; height:200px; margin:14px auto 0; border-radius:14px; border:1px solid var(--line);
  background:#fff; padding:6px; }
.acct .r { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 0;
  border-top:1px solid var(--line); }
.acct .r:first-of-type { border-top:0; }
.acct .r b { font-weight:700; font-size:15px; }
.acct .r .v { font-weight:800; font-size:16px; white-space:nowrap; }
.acct .r.total .v { font-size:22px; }
.acct .r.bal { border-top:0; margin-top:8px; background:var(--orange-soft); border-radius:14px; padding:12px 14px; }
.acct .r.bal .v { color:var(--orange-dark); font-size:21px; }
.acct .r.bal.good { background:var(--green-soft); } .acct .r.bal.good .v { color:var(--green); }

/* every bill, and paying by UPI (patient_app_bills.js, 19 Sep 2026) */
.sub-title { font-size:17px; font-weight:800; margin:4px 0 10px; }
.paycard { border-left:4px solid var(--orange); }
.paycard .btn { margin-top:12px; }
.billlist { margin-top:8px; }
.billrow { border-top:1px solid var(--line); padding:4px 0 10px; }
.billrow:first-child { border-top:0; }
.billrow .btn.small { margin-top:2px; }
.billtap { font:inherit; color:inherit; background:none; border:0; width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:10px 0 6px; min-width:0; }
.bk { flex:none; min-width:58px; text-align:center; font-size:12.5px; font-weight:800; border-radius:10px;
  padding:6px 6px; background:var(--blue-soft); color:var(--blue); }
.bk.k-pharmacy { background:var(--green-soft); color:var(--green); }
.bk.k-lab { background:#F1EAFB; color:#6B3FB5; }
.bk.k-ip { background:var(--orange-soft); color:var(--orange-dark); }
.bmid { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.bmid b { font-size:14.5px; font-weight:800; overflow-wrap:anywhere; }
.bmid small { color:var(--muted); font-size:13px; font-weight:600; }
.bend { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.bamt { font-size:16px; font-weight:800; white-space:nowrap; }
.bend .pill { font-size:12px; padding:4px 10px; white-space:nowrap; }
.pill.bad { background:var(--red-soft); color:var(--red); }
.banner.info { background:var(--blue-soft); color:var(--blue); border-color:#C9DDF5; }
.banner.ok { background:var(--green-soft); color:var(--green); border-color:#BFE3D0; }
.acct-lines { margin-top:8px; }
.acct-lines .r.line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0;
  border-top:1px solid var(--line); font-size:14.5px; font-weight:600; }
.acct-lines .r.line:first-child { border-top:0; }
.acct-lines .r.line > span:first-child { min-width:0; overflow-wrap:anywhere; }
.acct-lines .r.line small { display:block; color:var(--muted); font-size:12.5px; }
.acct-lines .r.line .v { font-weight:800; white-space:nowrap; }
.upi-go { font-size:18px; min-height:58px; }
.utr-row { display:flex; gap:8px; align-items:stretch; margin-top:6px; }
.utr-row input { flex:1 1 auto; min-width:0; }
.utr-row .btn { flex:none; margin:0; }

/* ------------------------------------------------------------------ why these tests */
.ex { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.ex:first-of-type { border-top:0; }
.ex .e-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ex p { margin:8px 0 0; font-size:15px; }
.ex p.te { color:#2E3542; }
.ex video { width:100%; border-radius:14px; margin-top:12px; background:#000; }
.intro { background:#F7F9FC; border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:12px; }
.intro .for { font-weight:800; font-size:14.5px; color:var(--blue); }

/* ------------------------------------------------------------------ ECG */
.ecg { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.ecg:first-of-type { border-top:0; padding-top:0; margin-top:12px; }
.shots { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.shots a { width:104px; height:74px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#F7F9FC; display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--red);
  text-decoration:none; }
.shots img { width:100%; height:100%; object-fit:cover; }

/* ------------------------------------------------------------------ rating */
.stars { display:flex; gap:8px; justify-content:center; margin:14px 0 2px; }
.stars button { width:52px; height:52px; padding:0; margin:0; border-radius:14px; background:#fff;
  color:#C3CAD5; border:1.5px solid var(--line); font-size:24px; cursor:pointer; }
.stars button.on { color:#E8A005; border-color:#E8A005; background:#FFFBF0; }
.rated { text-align:center; } .rated .s { color:#E8A005; font-size:22px; letter-spacing:2px; }

/* ------------------------------------------------------------------ empty states + skeletons */
.empty { text-align:center; padding:30px 18px; }
.empty .ico { width:56px; height:56px; margin:0 auto 12px; border-radius:18px; background:var(--blue-soft);
  color:var(--blue); display:grid; place-items:center; }
.empty .ico svg { width:28px; height:28px; }
.empty b { display:block; font-size:17px; font-weight:800; }
.empty p { margin:8px 0 0; font-size:14.5px; font-weight:500; color:var(--muted); }
.sk { background:linear-gradient(90deg,#EDEFF3 25%,#F6F7F9 37%,#EDEFF3 63%); background-size:400% 100%;
  animation:sk 1.3s ease-in-out infinite; border-radius:9px; height:14px; }
@keyframes sk { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
.sk.t { height:20px; width:58%; } .sk.w { width:88%; } .sk.h { width:38%; }
.sk-row { display:flex; gap:12px; align-items:center; }
.sk-row .sk.av { width:46px; height:46px; border-radius:50%; flex:none; }
.sk-stack > * { margin-top:10px; }

/* ------------------------------------------------------------------ toast + banners */
.toasts { position:fixed; left:12px; right:12px; bottom:calc(var(--bar) + 14px + env(safe-area-inset-bottom));
  z-index:40; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast { max-width:520px; background:#1D2430; color:#fff; border-radius:14px; padding:13px 16px; font-size:14.5px;
  font-weight:700; box-shadow:0 10px 30px rgba(20,24,31,.28); animation:rise .18s ease-out; }
.toast.bad { background:#8F1226; }
@keyframes rise { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.banner { background:var(--amber-soft); color:var(--amber); border:1px solid #F1D9A8; border-radius:14px;
  padding:12px 14px; font-weight:700; font-size:14px; margin-bottom:12px; }
.banner.bad { background:var(--red-soft); color:var(--red); border-color:#F3C3CC; }
.slip { display:flex; gap:12px; align-items:center; background:var(--orange-soft); border:1px solid #F8DCC8;
  border-radius:14px; padding:12px; margin-top:16px; font-size:13.5px; font-weight:600; }
.slip .mock { flex:none; border:1.5px dashed #E9A27E; border-radius:10px; padding:7px 9px; font-weight:800;
  color:var(--text); background:#fff; line-height:1.25; text-align:center; font-size:13px; }
.slip .mock em { display:block; font-style:normal; color:var(--orange); font-size:17px; letter-spacing:.1em; }
.foot { text-align:center; font-size:13px; font-weight:600; color:var(--muted); margin:16px 0 0; }
.lang-pick { display:flex; gap:10px; margin-top:12px; }
.lang-pick button { flex:1; font:inherit; font-size:16px; font-weight:800; min-height:52px; border-radius:14px;
  border:1.5px solid var(--line); background:#fff; color:var(--text); cursor:pointer; }
.lang-pick button.on { border-color:var(--orange); background:var(--orange-soft); color:var(--orange-dark);
  box-shadow:0 0 0 1.5px var(--orange); }

/* ------------------------------------------------------------------ the diet card (18 Sep) */
.dayline { font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-dark); margin:14px 0 8px; }
.meals { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.meal { display:flex; gap:12px; padding:11px 13px; border-top:1px solid var(--line); }
.meal:first-child { border-top:0; }
.meal .when { flex:0 0 33%; min-width:0; }
.meal .when b { display:block; font-size:14.5px; font-weight:800; }
.meal .when small, .meal .what small { display:block; font-size:13px; font-weight:600; color:var(--muted); }
.meal .what { flex:1; min-width:0; font-size:15px; }
.meal .what em { display:block; font-style:normal; font-weight:700; color:var(--orange-dark); font-size:14px; }
.foods { margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.foods.good { border-color:#BFE3CF; background:var(--green-soft); }
.foods.bad { border-color:#F4C6CE; background:var(--red-soft); }
.foods b, .foods > summary { font-size:15px; font-weight:800; }
.foods > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.foods ul { margin:8px 0 0; padding-left:20px; }
.foods li { font-size:14.5px; margin:3px 0; }
/* the week, one day per page (patient_app_mine.js, 19 Sep 2026): the pages slide inside their
   own box — the page itself never scrolls sideways */
.daypager { margin-top:14px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dp-label { font-size:17px; font-weight:800; text-align:center; flex:1; }
.dp-arrow { flex:none; width:46px; height:46px; border-radius:14px; border:1.5px solid var(--line); background:#fff;
  color:var(--orange-dark); font:inherit; font-size:26px; font-weight:800; line-height:1; cursor:pointer; }
.dp-arrow[disabled] { opacity:.3; cursor:default; }
.dp-arrow:focus-visible, .dp-dot:focus-visible, .dp-view:focus-visible { outline:3px solid rgba(247,86,1,.35); outline-offset:2px; }
.dp-view { overflow:hidden; margin-top:10px; border-radius:14px; touch-action:pan-y; }
.dp-track { display:flex; transition:transform .32s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.dp-page { flex:0 0 100%; min-width:0; }
.dp-page .dayline { margin-top:0; }
.dp-today { color:var(--orange-dark); }
.dp-dots { display:flex; justify-content:center; gap:4px; margin-top:10px; }
.dp-dot { width:26px; height:26px; border:0; background:none; padding:0; cursor:pointer; position:relative; }
.dp-dot::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:#D6DAE1; transition:width .2s, background .2s; }
.dp-dot.on::after { width:18px; margin-left:-9px; border-radius:6px; background:var(--orange); }
.dp-hint { text-align:center; margin-top:4px; }
@media (prefers-reduced-motion: reduce) { .dp-track { transition:none; } }
details.rest { margin-top:14px; }
details.rest > summary { cursor:pointer; font-weight:800; font-size:15px; padding:10px 0; min-height:44px;
  display:flex; align-items:center; }

/* ------------------------------------------------------------------ my readings */
.readings { margin-top:12px; }
.reading { border-top:1px solid var(--line); padding:12px 0; }
.reading:first-child { border-top:0; padding-top:2px; }
.r-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.r-head b { font-size:15px; font-weight:800; }
.r-body { margin-top:5px; font-size:15px; font-weight:600; }
.r-note { margin-top:4px; font-size:13.5px; color:var(--muted); font-weight:500; }
.linky { font:inherit; font-size:14px; font-weight:800; color:var(--blue); background:none; border:0;
  padding:10px 0; min-height:44px; cursor:pointer; text-decoration:none; display:inline-block; }
.linky.danger { color:var(--red); margin-left:16px; }
.spark { display:flex; align-items:flex-end; gap:6px; height:88px; margin-top:12px; }
.spark i { flex:1; background:var(--orange); border-radius:6px 6px 0 0; min-height:8px; }
.spark i:last-child { background:var(--orange-dark); }
.pair { display:flex; align-items:center; gap:10px; }
.pair input { flex:1; }
.pair span { font-size:20px; font-weight:800; color:var(--muted); }
select { font:inherit; font-size:16px; width:100%; min-height:52px; border:1.5px solid #D6DAE1;
  border-radius:14px; padding:13px; margin-top:8px; background:#fff; color:var(--text); }
input[type="file"] { padding:12px; font-size:15px; }
input[type="date"], input[type="datetime-local"] { font-size:16px; }

/* ------------------------------------------------------------------ my reports */
.files { margin-top:12px; }
.filerow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line);
  padding:12px 0; }
.filerow:first-child { border-top:0; }
.filerow .ico { flex:none; width:36px; height:36px; border-radius:11px; background:var(--blue-soft);
  color:var(--blue); display:grid; place-items:center; }
.filerow .ico svg { width:19px; height:19px; }
.filerow .lbl { flex:1 1 52%; min-width:0; }
.filerow .acts { flex:0 0 auto; margin-left:auto; display:flex; gap:16px; align-items:center; }
.filerow .lbl b { display:block; font-size:15px; font-weight:800; overflow-wrap:anywhere; }
.filerow .lbl small { display:block; font-size:13px; font-weight:600; color:var(--muted); }
.progress { height:10px; border-radius:6px; background:#E4E7EC; overflow:hidden; margin-top:14px; }
.progress i { display:block; height:100%; background:var(--orange); transition:width .2s; }

/* ------------------------------------------------------------------ discharge summary */
.sumf { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.sumf b { font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--blue); }
.sumf p { margin:5px 0 0; font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }


/* ------------------------------------------------------------------ the prescription sheet
   Her copy of what the doctor wrote (patient_app_rx.js). It is laid out like the printed sheet so
   that "Save or share" - which hands it to the phone's own print, and so to Save as PDF - gives
   her something that looks like the paper she is used to. */
.rx-sheet { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 10px; }
.rx-head { text-align: center; border-bottom: 2px solid var(--orange, #F26522); padding-bottom: 8px; margin-bottom: 12px; }
.rx-head h2 { margin: 0; font-size: 19px; }
.rx-head .sub { color: var(--muted); font-size: 13px; }
.rx-who { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; margin-bottom: 8px; }
.rx-sec { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
          color: var(--muted); font-weight: 800; }
.rx-med { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.rx-med b { font-size: 17px; }
.rx-med .how { font-size: 15px; margin-top: 2px; }
.rx-med .note { color: var(--muted); font-size: 14px; }
.rx-line { font-size: 15px; margin: 4px 0; }
.rx-sign { margin-top: 18px; text-align: right; font-size: 14px; }
.rx-foot { margin-top: 14px; color: var(--muted); font-size: 12px; text-align: center; }

/* Printing (or saving as PDF): the sheet alone, none of the app around it. */
@media print {
  .tabs, .topbar, .toasts, .rx-hide, .banner { display: none !important; }
  body { background: #fff; }
  .rx-sheet { border: none; border-radius: 0; padding: 0; margin: 0; }
}

/* An empty state with a picture rather than a glyph (22 Sep 2026).
   The illustrations are different shapes, so the height is what is fixed and the width follows -
   a fixed width would squash the tall ones. They are decoration: `alt` is empty, they load lazily,
   and a phone that never fetches one still reads the same heading and the same sentence. */
.empty.has-art img.art {
  display: block;
  margin: 2px auto 14px;
  height: 116px;
  width: auto;
  max-width: 200px;
}
@media (max-width: 359px) {
  .empty.has-art img.art { height: 96px; }
}

/* The day a visit happened, beside its title - shown only when it is not today (25 Sep 2026). */
.row-head h2 .when { font-size:14px; font-weight:700; color:var(--muted); margin-left:6px; }