/* The glass look for Reports, Bills, Rx, Readings, Medicine reminders (docs/PATIENT_APP_THEME.md). Loaded after patient_app_glass.css.
 *
 * Rebuilt, not recoloured (3 Oct 2026): a title row at the top of each screen, one glass card per
 * report / bill / prescription / reminder, a caps label over a bold main line and a soft second line,
 * status as a small solid pill, one thick orange button per card at most, everything else white glass.
 * Every class here starts gr- (the old app owns .card .btn .pill .row ...). The markup is in
 * patient_app.js (Reports, Bills), patient_app_bills.js (PA_GR helpers + bills), patient_app_rx.js,
 * patient_app_mine.js (readings, my reports) and patient_app_meds.js.
 */

/* ------------------------------------------------------------------ the title row */
.gr-head { display:flex; align-items:center; gap:12px; margin:4px 2px 16px; min-height:48px; }
.gr-head-t { flex:1; min-width:0; }
.gr-head h1 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.035em; line-height:1.15; color:var(--g-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-head small { display:block; margin-top:3px; font-size:13.5px; font-weight:500; color:var(--g-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.te .gr-head h1 { font-size:24px; }

/* small round-ended glass buttons: Back, Refresh, Open, View, Remove */
.gr-quiet { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; min-height:44px; padding:0 16px; border-radius:999px;
  background:rgba(255,255,255,.82); border:1px solid var(--g-edge); color:var(--g-acc); font-size:14px; font-weight:600; text-decoration:none;
  box-shadow:0 6px 14px rgba(16,24,40,0.05); cursor:pointer; white-space:nowrap; font-family:inherit; }
.gr-quiet svg { width:17px; height:17px; stroke-width:2.3; }
.gr-quiet.mini { min-height:38px; padding:0 14px; font-size:13.5px; }
.gr-quiet.danger { color:#B23A1E; }
.gr-quiet .spin { animation:gr-spin .9s linear infinite; }
@keyframes gr-spin { to { transform:rotate(360deg); } }

/* THE thick orange: one per card */
.gr-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:14px; padding:0 18px; border:0; border-radius:999px;
  background:var(--g-orange); color:#fff; font-size:15.5px; font-weight:600; letter-spacing:-.01em; text-decoration:none; cursor:pointer; font-family:inherit;
  box-shadow:0 10px 22px rgba(238,90,14,0.13); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-btn svg { width:20px; height:20px; flex:none; stroke-width:2.4; }
.gr-btn.auto { width:auto; display:inline-flex; }
/* "Why this test?" beside a test's name (11 Oct 2026): a quiet pill; with one of the hospital's films, the play mark. */
.gr-why { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:10px 0 2px; padding:0 16px 0 14px; border-radius:999px;
  border:1px solid rgba(238,90,14,.32); background:#FFF7F0; color:#B8430A; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease; }
.gr-why.film { padding-left:6px; }
.gr-why .gr-play { flex:none; width:32px; height:32px; color:var(--g-orange, #EE5A0E); }
.gr-why:active { transform:scale(.97); }
/* ...and with the film's own picture: a cinema tile ("like Netflix Amazon type", 11 Oct 2026) - the picture right
   across (a made cover with the film's question on it, or a frame of the film), a dark fade along the bottom for
   the tile's own words, a round white play button, the length in the corner. Dark on purpose, and warm.
   static/patient_app_film.js draws it and moves it. */
.gr-cinebox { position:relative; margin:12px 0 4px; border-radius:20px; overflow:hidden; background:#1A1410; isolation:isolate;
  box-shadow:0 16px 30px rgba(20,26,36,.24), 0 2px 6px rgba(20,26,36,.12);
  transition:height .64s cubic-bezier(.3,1.32,.5,1), box-shadow .3s ease; }
.gr-why.cine { position:relative; display:block; width:100%; height:148px; margin:0; padding:0; border:0; border-radius:0; overflow:hidden;
  background:#1A1410; color:#fff; text-align:left; transition:transform .18s ease; isolation:isolate; }   /* its picture and fade sit behind its words, inside it */
.gr-why.cine:active { transform:scale(.985); }
.gr-cine-pic { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 38%; z-index:-2; }
.gr-cine-fade { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,12,9,.06) 0%, rgba(16,12,9,0) 34%, rgba(16,12,9,.52) 68%, rgba(16,12,9,.88) 100%); }
.gr-cinebox::after { content:""; position:absolute; inset:0; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none; }
.gr-cine-len { position:absolute; top:10px; right:10px; padding:3px 8px; border-radius:8px; background:rgba(16,12,9,.62); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; transition:opacity .2s ease; }
/* the play button: dark glass with a lit orange ring (his pick of four shown - glossy orange, pearl white, clear
   glass, this one) */
.gr-cine-go { position:absolute; right:14px; bottom:14px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; box-sizing:border-box;
  background:rgba(18,14,11,.62); color:#fff; border:2.5px solid #F0661B;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 0 0 4px rgba(240,102,27,.28), 0 10px 22px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.22);
  transition:transform .46s cubic-bezier(.3,1.5,.5,1), opacity .24s ease; }
.gr-cine-go svg { width:26px; height:26px; margin-left:2px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.gr-cine-t { position:absolute; left:16px; right:76px; bottom:16px; display:flex; flex-direction:column; gap:2px; transition:opacity .2s ease; }
.gr-cine-t b { font-size:16px; font-weight:700; letter-spacing:-.005em; line-height:1.2; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); }
/* It opens where it is ("open and collapse like liquid, like premium feel"): the player pours out of the play button
   - a circle growing from it (--spout, set by the script) until it fills the card - while the card stretches to the
   film's height and settles with a soft overshoot. Closing pours it back. */
.gr-cinebox.open { box-shadow:0 22px 44px rgba(20,26,36,.34), 0 2px 8px rgba(20,26,36,.16); }
.gr-cine-open { position:absolute; left:0; right:0; top:0; z-index:2; background:#15120F; color:#fff;
  -webkit-clip-path:circle(0px at var(--spout, 100% 100%)); clip-path:circle(0px at var(--spout, 100% 100%));
  transition:clip-path .52s cubic-bezier(.55,0,.3,1), -webkit-clip-path .52s cubic-bezier(.55,0,.3,1); }
.gr-cinebox.open .gr-cine-open { -webkit-clip-path:circle(150% at var(--spout, 100% 100%)); clip-path:circle(150% at var(--spout, 100% 100%));
  transition:clip-path .64s cubic-bezier(.2,.7,.2,1), -webkit-clip-path .64s cubic-bezier(.2,.7,.2,1); }
.gr-cinebox.open .gr-cine-go { transform:scale(2.6); opacity:0; }
.gr-cinebox.open .gr-cine-t, .gr-cinebox.open .gr-cine-len { opacity:0; }
/* once it has settled the card is simply as tall as what is in it (a phone turned on its side, the words wrapping) */
.gr-cinebox.set .gr-cine-open { position:relative; -webkit-clip-path:none; clip-path:none; }
.gr-cinebox.set .gr-why.cine { display:none; }
/* what pours out is warm and lit from the middle, not a black hole; the film's first frame comes over it at once
   (the cover is a wide picture - it is not laid into the tall player) */
.gr-cine-screen { position:relative; background:radial-gradient(ellipse 80% 60% at 50% 42%, #4A2A14 0%, #23160D 55%, #120C08 100%); }
.gr-cine-screen .gs-video { display:block; width:100%; height:100%; max-height:none; margin:0; border-radius:0; box-shadow:none; object-fit:contain; background:transparent; }
.gr-cine-x { position:absolute; top:8px; right:8px; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background:rgba(20,16,12,.55); color:#fff; display:grid; place-items:center; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; }
.gr-cine-x svg { width:22px; height:22px; }
.gr-cine-words { margin:0; padding:14px 16px 16px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.92);
  opacity:0; transform:translateY(8px); transition:opacity .3s ease .28s, transform .4s cubic-bezier(.2,.8,.2,1) .28s; }
.gr-cinebox.open .gr-cine-words { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .gr-cinebox, .gr-why.cine, .gr-cine-open, .gr-cinebox.open .gr-cine-open, .gr-cine-go, .gr-cine-t, .gr-cine-len, .gr-cine-words { transition:none !important; }
  .gr-why.cine:active { transform:none; }
}
.gr-why-one { margin-top:12px; }
.gr-why-one .gs-video { margin-top:0; max-height:70vh; }
.gr-why-one p { margin:14px 0 0; font-size:16px; line-height:1.55; color:var(--g-ink); }
@media (prefers-reduced-motion: reduce) { .gr-why:active { transform:none; } }
.gr-btn.quiet { background:rgba(255,255,255,.86); color:var(--g-acc); border:1px solid var(--g-edge); box-shadow:0 6px 14px rgba(16,24,40,0.05); }
.gr-btn:active, .gr-quiet:active, .gr-tap:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) { .gr-btn:active, .gr-quiet:active, .gr-tap:active { transform:none; } .gr-quiet .spin { animation:none; } }

/* ------------------------------------------------------------------ cards */
.gr-card { position:relative; background:var(--g-glass); border:1px solid var(--g-edge); border-radius:26px; box-shadow:var(--g-shadow); padding:16px 16px;
  margin:0 0 12px; -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); color:var(--g-ink); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .gr-card { background:rgba(255,255,255,.88); } }
.gr-card.dash { border:1.5px dashed rgba(var(--fl-o-rgb),.35); background:rgba(255,255,255,.45); box-shadow:none; }
.gr-cap { display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g-acc); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.te .gr-cap { letter-spacing:.02em; }
.gr-main { display:block; margin-top:4px; font-size:17.5px; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--g-ink); }
.gr-soft { display:block; margin-top:3px; font-size:13.5px; font-weight:500; color:var(--g-soft); line-height:1.4; }
.gr-note { margin:10px 0 0; font-size:13.5px; font-weight:500; color:var(--g-soft); line-height:1.45; }
.gr-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gr-row > .gr-cap { flex:1; min-width:0; }
.gr-h { margin:0; font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink); }

/* the section heads, and the small day heads under them */
.gr-sec { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 4px 10px; }
.gr-sec b { font-size:19px; font-weight:600; letter-spacing:-.025em; color:var(--g-ink); }
.gr-sec:first-child { margin-top:4px; }
.gr-day { display:flex; align-items:center; gap:10px; margin:14px 6px 8px; font-size:13px; font-weight:600; color:var(--g-soft); letter-spacing:.02em; }
.gr-day::after { content:""; flex:1; height:1px; background:var(--g-rail); }

/* a card that is one big button: picture chip, words, then the status and a chevron */
.gr-tap { display:flex; align-items:center; gap:13px; width:100%; padding:0; margin:0; border:0; background:none; text-align:left; color:inherit;
  font-family:inherit; cursor:pointer; min-height:48px; }
.gr-mid { flex:1; min-width:0; }
.gr-mid .gr-soft { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-mid .gr-main { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.gr-end { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.gr-chev { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.82);
  border:1px solid var(--g-edge); color:var(--g-acc); flex:none; }
.gr-chev svg { width:17px; height:17px; stroke-width:2.4; }
.gr-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--g-rail); }

/* the icon on its solid round chip - blue, orange, blue... (Home's tiles) */
.gr-ico { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:none; border-radius:50%; color:#fff;
  background:var(--fl-o); box-shadow:0 8px 16px rgba(var(--fl-o-rgb),.3); }
.gr-ico.o { background:var(--g-orange); box-shadow:0 8px 16px rgba(238,90,14,0.12); }
.gr-ico svg { width:22px; height:22px; stroke-width:2.1; }

/* status: small SOLID pills */
.gr-pill { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; color:#fff; background:var(--fl-o); box-shadow:0 4px 10px rgba(var(--fl-o-rgb),.22); flex:none; }
.gr-pill.due { background:var(--g-orange); box-shadow:0 4px 10px rgba(238,90,14,0.10); }
.gr-pill.wait { background:var(--g-ink); box-shadow:0 4px 10px rgba(12,21,38,.2); }
.gr-pill.bad { background:linear-gradient(135deg, #E8603F 0%, #C23A1C 100%); box-shadow:0 4px 10px rgba(194,58,28,.24); }

/* the doctor: photo (or initials) beside the name, a soft line under it */
.gr-doc { display:grid; grid-template-columns:40px 1fr; column-gap:10px; align-items:center; margin-top:12px; min-width:0; }
.gr-doc .doc-chip { display:contents; background:none; border:0; }
.gr-doc .doc-chip img, .gr-doc .doc-chip .ini { grid-row:1 / span 2; width:40px; height:40px; border-radius:50%; border:2px solid #fff; object-fit:cover;
  box-shadow:0 6px 14px rgba(16,24,40,0.09); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:600; color:var(--g-acc);
  background:linear-gradient(145deg, #FFFFFF, #D5E6FB); margin:0; }
.gr-doc .doc-chip b { align-self:end; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--g-ink); line-height:1.2; max-width:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-doc small { grid-column:2; align-self:start; font-size:13px; font-weight:500; color:var(--g-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-doc.solo .doc-chip b { align-self:center; }
.gr-doc.solo .doc-chip img, .gr-doc.solo .doc-chip .ini { grid-row:1; }

/* banners (claim waiting, running bill, all paid) inside the glass look */
.gr-banner { display:block; margin:0 0 12px; padding:13px 16px; border-radius:20px; font-size:14px; font-weight:500; line-height:1.4;
  background:rgba(255,255,255,.7); border:1px solid var(--g-edge); color:var(--g-ink); box-shadow:0 6px 14px rgba(16,24,40,0.04); }
.gr-banner.ok, .gr-banner.info { background:rgba(var(--fl-o-rgb),.12); color:var(--fl-o-dk); border-color:rgba(var(--fl-o-rgb),.18); }
.gr-banner.bad { background:rgba(217,72,43,.14); color:#8E2A14; border-color:rgba(217,72,43,.2); }
/* "Bill paid", "all bills are paid" - the green round with the tick (10 Oct 2026: "In the app also"). The part
   is the staff app's (done_tick.css); here it wears this app's colours: its words in the app's ink, a button
   of it orange. The tick itself stays green - green is "done" at the desk and on the phone alike. */
.gr-done { --done-accent:var(--fl-o); --done-ink:var(--g-ink); --done-muted:var(--g-soft); }
.gr-banner.ok.gr-done, .gr-paid { background:rgba(255,255,255,.78); color:var(--g-ink); border:1px solid var(--g-edge); }
.gr-paid { margin:0 0 12px; padding:11px 16px; border-radius:20px; box-shadow:0 6px 14px rgba(16,24,40,0.04); }
.gr-done .done-title { font-size:16px; }
.gr-done .done-lines { padding:0; }
.gr-done .done-lines li { font-size:13px; list-style:none; margin:0; }

/* ------------------------------------------------------------------ Reports: today's tests */
.gr-track { display:flex; gap:6px; margin-top:14px; }
.gr-track i { flex:1; height:6px; border-radius:99px; background:var(--g-rail); }
.gr-track i.on { background:var(--fl-o); }
.gr-track i.cur { background:var(--g-orange); }
.gr-track-l { display:flex; gap:6px; margin-top:7px; }
.gr-track-l span { flex:1; min-width:0; font-size:12.5px; font-weight:500; color:var(--g-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-track-l span.on { color:var(--g-ink); font-weight:600; }
.gr-where { margin-top:10px; font-size:14px; font-weight:600; color:#B4470B; line-height:1.4; }
.gr-where.ok { color:var(--fl-o-dk); }

/* reports done here: flagged results as small words under the name */
.gr-flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gr-flags span { height:26px; padding:0 10px; border-radius:999px; display:inline-flex; align-items:center; font-size:12.5px; font-weight:600;
  background:rgba(217,72,43,.12); color:#8E2A14; white-space:nowrap; }

/* uploaded and ECG */
.gr-ecg-shots { display:flex; gap:10px; margin-top:12px; overflow-x:auto; }
.gr-ecg-shots a { display:block; flex:1 0 100%; max-width:100%; border-radius:18px; overflow:hidden; border:1px solid var(--g-edge); background:#fff;
  box-shadow:0 8px 18px rgba(16,24,40,0.06); }
.gr-ecg-shots a:not(:only-child) { flex-basis:78%; }
.gr-ecg-shots img { display:block; width:100%; height:150px; object-fit:cover; }
.gr-ecg-shots .pdf { display:flex; align-items:center; justify-content:center; height:110px; font-size:20px; font-weight:600; color:var(--g-acc); text-decoration:none; }

/* ------------------------------------------------------------------ one report: result rows */
.gr-res-h { display:flex; justify-content:space-between; margin:14px 0 2px; padding-bottom:8px; border-bottom:1px solid var(--g-rail); }
.gr-res-h span { font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g-acc); }
body.te .gr-res-h span { letter-spacing:.02em; }
.gr-res { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--g-rail); }
.gr-res:last-child { border-bottom:0; padding-bottom:2px; }
.gr-res-n { min-width:0; flex:1; }
.gr-res-n b { display:block; font-size:15.5px; font-weight:600; color:var(--g-ink); line-height:1.25; }
.gr-res-n small { display:block; margin-top:2px; font-size:13px; font-weight:500; color:var(--g-soft); }
.gr-res-v { text-align:right; flex:none; max-width:52%; }
.gr-res-v b { display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink); font-variant-numeric:tabular-nums; line-height:1.2; }
.gr-res-v b small { font-size:12.5px; font-weight:500; color:var(--g-soft); letter-spacing:0; }
.gr-res.flag .gr-res-v b { color:#B23A1E; }
.gr-res-v .gr-pill { margin-top:5px; height:24px; padding:0 10px; font-size:12px; }
.gr-foot { margin:6px 6px 0; font-size:13.5px; font-weight:500; color:var(--g-soft); text-align:center; line-height:1.45; }

/* ------------------------------------------------------------------ Bills */
.gr-big { display:block; font-size:38px; font-weight:600; letter-spacing:-.045em; line-height:1.05; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.gr-amt { display:block; margin-top:3px; font-size:24px; font-weight:600; letter-spacing:-.035em; line-height:1.15; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.gr-due-l { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:12px; }
.gr-due-l small { font-size:14px; font-weight:500; color:var(--g-soft); padding-bottom:6px; }
.gr-due-card { border:1px solid rgba(255,150,71,.55); box-shadow:0 18px 40px rgba(238,90,14,0.06); }
.gr-lines { margin-top:8px; }
.gr-line { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--g-rail); font-size:15px; font-weight:500; color:var(--g-ink); }
.gr-line:last-child { border-bottom:0; }
.gr-line > span:first-child { min-width:0; }
.gr-line small { display:block; font-size:13px; font-weight:500; color:var(--g-soft); margin-top:1px; }
.gr-line .v { flex:none; font-weight:600; font-variant-numeric:tabular-nums; }
.gr-line.total { margin-top:4px; padding-top:14px; border-top:1.5px solid rgba(12,21,38,.18); border-bottom:0; font-weight:600; }
.gr-line.total .v { font-size:22px; letter-spacing:-.03em; }
.gr-bal { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:13px 16px; border-radius:18px;
  background:rgba(255,150,71,.18); font-size:15px; font-weight:600; color:#7A3A0C; }
.gr-bal .v { font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.gr-bal.good { background:rgba(var(--fl-o-rgb),.12); color:var(--fl-o-dk); }

/* paying */
.gr-step { display:flex; align-items:center; gap:10px; }
.gr-step i { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; flex:none; font-style:normal;
  font-size:15px; font-weight:600; color:#fff; background:var(--fl-o); }
.gr-step.o i { background:var(--g-orange); }
.gr-qr { display:block; width:220px; max-width:70%; margin:16px auto 6px; padding:12px; background:#fff; border-radius:22px; border:1px solid var(--g-edge);
  box-shadow:0 10px 22px rgba(16,24,40,0.06); }
.gr-utr { display:flex; gap:8px; align-items:center; margin-top:8px; }
.gr-utr input { flex:1; min-width:0; height:52px; font-size:18px; font-weight:600; letter-spacing:.04em; border-radius:16px; }
.gr-card label { display:block; margin-top:12px; font-size:14px; font-weight:600; color:var(--g-ink); }
.gr-err { margin-top:8px; font-size:14px; font-weight:600; color:#B23A1E; }
.gr-err:empty { display:none; }

/* ------------------------------------------------------------------ Rx */
.gr-rx-sheet.rx-sheet { border-radius:24px; border:1px solid var(--g-edge); box-shadow:var(--g-shadow); background:#fff; }

/* ------------------------------------------------------------------ Readings */
.gr-read { padding:13px 0; border-bottom:1px solid var(--g-rail); }
.gr-read:first-child { padding-top:2px; }
.gr-read:last-child { border-bottom:0; padding-bottom:2px; }
.gr-read-h { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gr-read-h b { font-size:15px; font-weight:600; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.gr-vals { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:7px; }
.gr-vals span { font-size:13.5px; font-weight:500; color:var(--g-soft); white-space:nowrap; }
.gr-vals span b { font-size:16px; font-weight:600; color:var(--g-ink); margin-left:3px; font-variant-numeric:tabular-nums; }
.gr-read .gr-quiet { margin-top:10px; }
.gr-form .gr-pair { display:flex; align-items:center; gap:8px; }
.gr-form .gr-pair input { flex:1; min-width:0; }
.gr-form .gr-pair span { font-size:20px; font-weight:600; color:var(--g-soft); }
.gr-form input, .gr-form select { width:100%; margin-top:6px; box-sizing:border-box; }
.gr-form .gr-pair input { margin-top:6px; }
/* A date box that writes dd/mm/yyyy on every phone (12 Oct 2026). It IS the phone's date box - one touch opens
   the calendar - but a phone writes the date in its own language's order (10/12/2026 for 12 October on a phone set to
   American English), so the box's own writing is made clear glass and ours lies over it (patient_app_mine.js). */
.gr-form .gr-date { position:relative; margin-top:6px; }
/* the day and the time side by side: two equal halves (as flex items the bare wrapper came out narrower than the
   time box, which carries its own padding) */
.gr-form .gr-halves { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.gr-form .gr-date input[type=date] { margin-top:0; display:block; color:transparent; }
.gr-form .gr-date input[type=date]::-webkit-datetime-edit { opacity:0; }
.gr-form .gr-date input[type=date]::-webkit-date-and-time-value { opacity:0; }
.gr-form .gr-date .gr-date-show { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; padding-left:15px;
  font-style:normal; font-size:16px; font-weight:500; color:var(--g-ink); pointer-events:none; white-space:nowrap; }
.gr-form .gr-date .gr-date-show.none { color:var(--g-soft); font-weight:400; }
.gr-form .gr-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.gr-form .gr-two .gr-btn { margin-top:0; }

/* ------------------------------------------------------------------ Medicine reminders */
.gr-med { display:flex; align-items:center; gap:12px; }
.gr-med .gr-mid .gr-main { margin-top:0; font-size:16.5px; }
.gr-med .gr-mid .gr-soft { white-space:normal; }
.gr-med .gr-btn, .gr-med .gr-quiet { flex:none; margin-top:0; width:auto; min-height:44px; padding:0 16px; font-size:14px; }
.gr-times { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.gr-times label { display:flex; align-items:center; gap:10px; margin:0; min-height:56px; padding:8px 12px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.78); border:1px solid var(--g-edge); box-shadow:0 4px 10px rgba(16,24,40,0.03); font-size:14.5px; font-weight:600; color:var(--g-ink); }
.gr-times label small { display:block; font-size:12.5px; font-weight:500; color:var(--g-soft); }
.gr-times input { width:20px; height:20px; min-height:0; flex:none; margin:0; padding:0; accent-color:var(--fl-o-dk); }
.gr-times label:has(input:checked) { background:var(--g-ink); border-color:var(--g-ink); color:#fff; }
.gr-times label:has(input:checked) small { color:rgba(255,255,255,.8); }
.gr-days { display:flex; align-items:center; gap:10px; }
/* her own time for each part of the day (6 Oct 2026): the part's name over its clock, two to a row */
.gr-clock { display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; margin-top:12px; }
.gr-clock label { display:block; margin:0; font-size:14px; font-weight:600; color:var(--g-ink); }
.gr-clock input { margin-top:5px; font-variant-numeric:tabular-nums; }
.gr-days input { width:96px !important; flex:none; }

/* ------------------------------------------------------------------ my reports (upload) */
.gr-progress { height:8px; margin-top:12px; border-radius:99px; background:var(--g-rail); overflow:hidden; }
.gr-progress i { display:block; height:100%; border-radius:99px; background:var(--g-ring); }
.gr-file-acts { display:flex; gap:8px; flex:none; }

/* ------------------------------------------------------------------ the diet card says more than food (4 Oct 2026) */
.foods.todo { border-color:#F6D3BD; background:var(--fl-o-soft); }
.foods.todo b { color:var(--fl-o-dk); }
.foods.todo ul { list-style:none; padding-left:0; }
.foods.todo li { position:relative; padding:7px 0 7px 26px; margin:0; border-top:1px solid rgba(166,62,7,.12); font-size:15px; line-height:1.45; }
.foods.todo li:first-child { border-top:0; }
.foods.todo li::before { content:""; position:absolute; left:2px; top:13px; width:12px; height:7px; border-left:2.5px solid var(--fl-o);
  border-bottom:2.5px solid var(--fl-o); transform:rotate(-45deg); }
.foods.why { background:#fff; }
.foods.why ul { list-style:none; padding-left:0; }
.foods.why li { padding:8px 0; margin:0; border-top:1px solid var(--line); }
.foods.why li b { display:block; font-size:15px; font-weight:600; }
.foods.why li span { display:block; font-size:14px; line-height:1.45; color:#5B6474; margin-top:2px; }
.foods.caution { border-color:#F2D48A; background:#FFF8E1; }
.foods.caution b { color:#8A5A00; }
.foods.alert { border-color:#F4C6CE; background:#FDECEF; margin-top:16px; }
.foods.alert b { color:#B4233A; }
.foods.caution p, .foods.alert p { margin:6px 0 0; font-size:14.5px; line-height:1.5; }

/* ------------------------------------------------------------------ the diet page with pictures (4 Oct 2026)
   "It looks very plain ... add the images we have already ... elegant and premium." Flat white and the one
   orange, as the rest of the app: the photographs carry the colour. */
.dpic { flex:none; position:relative; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#FFF3EA; }
.dpic img { width:112%; height:112%; max-width:none; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(80,40,10,.18)); }
.dpic.n2 img { position:absolute; }
.dpic.n2 img:first-child { left:-8%; top:-8%; width:84%; height:84%; }
.dpic.n2 img:last-child { right:-12%; bottom:-10%; width:66%; height:66%; }
.dpic.ic { color:var(--fl-o); }
.dpic.ic svg { width:46%; height:46%; }

/* the day's meals: a line of pictures down the page */
.dmeals { position:relative; margin-top:8px; }
.dmeals::before { content:""; position:absolute; left:31px; top:40px; bottom:40px; width:2px; background:#F6D3BD; }
.dm { position:relative; display:flex; align-items:center; gap:16px; padding:11px 0; }
.dm-body { min-width:0; flex:1; }
.dm-body small { display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fl-o-dk); }
.dm-body b { display:block; margin-top:2px; font-size:16px; font-weight:600; line-height:1.3; color:#141A24; }
.dm-body em { display:block; font-style:normal; font-size:14px; font-weight:500; color:var(--fl-o-dk); }
.dm-body i { display:inline-block; margin-top:5px; padding:2px 10px; border-radius:999px; background:#F3F4F6; color:#4B5563;
  font-style:normal; font-size:12.5px; font-weight:600; }
body.te .dm-body small { letter-spacing:0; font-size:12.5px; }

/* water */
/* water is blue (his word, 4 Oct 2026) - the one place on the page that is not orange */
.dwater { display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px 16px; border-radius:20px; background:#EAF3FF; }
.dwater > i { flex:none; display:grid; place-items:center; width:52px; height:52px; }
.dwater > i svg { width:100%; height:100%; filter:drop-shadow(0 5px 7px rgba(30,123,230,.28)); }
.dwater small { display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#1559B0; }
.dwater b { display:block; margin-top:1px; font-size:15.5px; font-weight:600; line-height:1.35; color:#141A24; }

/* eat and avoid: picture tiles, three across */
.dtiles { margin-top:22px; }
.dtiles h3, .dwhy h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:17px; font-weight:700; color:#141A24; }
.dtiles h3 i { flex:none; position:relative; width:24px; height:24px; border-radius:50%; background:#2E9E5B; }
.dtiles.bad h3 i { background:#D9412F; }
.dtiles.good h3 i::after { content:""; position:absolute; left:7px; top:7px; width:9px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg); }
.dtiles.bad h3 i::before, .dtiles.bad h3 i::after { content:""; position:absolute; left:6px; top:11px; width:12px; height:2.5px; border-radius:2px; background:#fff; transform:rotate(45deg); }
.dtiles.bad h3 i::after { transform:rotate(-45deg); }
.dt-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 8px; margin-top:14px; }
.dt-grid.folded .dt:nth-child(n+10) { display:none; }
.dt { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; min-width:0; }
.dt .dpic { width:82px; height:82px; }
.dt b { font-size:13.5px; font-weight:500; line-height:1.3; color:#2A3346; overflow-wrap:anywhere; }
.dtiles.good .dpic { background:#EAF6EF; }
.dtiles.bad .dpic { background:#FDECEF; }
.dtiles.bad .dpic img { filter:grayscale(.3) drop-shadow(0 4px 6px rgba(80,40,10,.16)); }
.dtiles.bad .dpic.ic { color:#D9412F; }
.dtiles.good .dpic.ic { color:#2E9E5B; }
/* fruits and vegetables by name: three rows a kind - can eat, only a little, do not eat */
.dfv { margin-top:24px; }
.dfv h3 { margin:0; font-size:17px; font-weight:700; color:#141A24; }
.fv-row { margin-top:12px; padding:12px 10px 16px; border-radius:20px; background:#F1F9F4; }
.fv-row.some { background:#FFF6E3; }
.fv-row.bad { background:#FDF0F2; }
.fv-tag { display:inline-flex; align-items:center; min-height:26px; padding:0 12px; border-radius:999px; background:#23824A; color:#fff; font-size:12.5px; font-weight:700; }
.fv-row.some .fv-tag { background:#A66300; }
.fv-row.bad .fv-tag { background:#C8321F; }
.fv-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 6px; margin-top:12px; }
.fv-grid .dt { gap:6px; }
.fv-grid .dt .dpic { width:76px; height:76px; background:#fff; }
.fv-grid .dt b { font-size:13.5px; overflow-wrap:break-word; }
.fv-grid .dt small { font-size:12px; font-weight:600; line-height:1.25; color:#8A5200; }
.fv-row.bad .dpic img { filter:grayscale(.3) drop-shadow(0 4px 6px rgba(80,40,10,.16)); }
.fv-row.bad .dpic.ic { color:#C8321F; }
.fv-row.good .dpic.ic, .fv-row.some .dpic.ic { color:#2E9E5B; }
.dt-more { display:block; width:100%; min-height:44px; margin-top:8px; border:0; background:none; color:var(--fl-o-dk); font-size:14.5px; font-weight:600; cursor:pointer; }

/* why these foods help: cards to swipe */
.dwhy { margin-top:24px; }
.dwhy-row { display:flex; gap:12px; margin:12px -18px 0; padding:4px 18px 12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.dwhy-row::-webkit-scrollbar { display:none; }
.dwhy-row article { flex:0 0 72%; scroll-snap-align:start; padding:16px; border-radius:22px; background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.06); }
.dwhy-row .dpic { width:76px; height:76px; }
.dwhy-row b { display:block; margin-top:12px; font-size:15.5px; font-weight:600; line-height:1.3; color:#141A24; }
.dwhy-row p { margin:5px 0 0; font-size:14px; line-height:1.45; color:#5B6474; }

/* when to see the doctor */
.dalert { margin-top:24px; padding:16px; border-radius:22px; background:#FDECEF; border:1px solid #F4C6CE; }
.dalert h3 { display:flex; align-items:center; gap:10px; margin:0; font-size:16.5px; font-weight:700; line-height:1.3; color:#B4233A; }
.dalert h3 svg { flex:none; width:26px; height:26px; }
.dalert ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px; }
.dalert li { position:relative; padding-left:18px; font-size:15px; line-height:1.4; color:#141A24; }
.dalert li::before { content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:#D9412F; }
.dalert p { margin:12px 0 0; font-size:14.5px; font-weight:600; line-height:1.45; color:#B4233A; }

/* the pictures arrive rather than being there */
.dm .dpic img, .dt .dpic img, .dwhy-row .dpic img { animation:dPop .5s cubic-bezier(.2,.9,.3,1.2) both; }
.dm:nth-child(2) .dpic img, .dt:nth-child(2) .dpic img { animation-delay:.05s; }
.dm:nth-child(3) .dpic img, .dt:nth-child(3) .dpic img { animation-delay:.1s; }
.dm:nth-child(4) .dpic img, .dt:nth-child(4) .dpic img { animation-delay:.15s; }
.dm:nth-child(5) .dpic img, .dt:nth-child(5) .dpic img { animation-delay:.2s; }
.dm:nth-child(6) .dpic img, .dt:nth-child(6) .dpic img { animation-delay:.25s; }
.dm:nth-child(n+7) .dpic img, .dt:nth-child(n+7) .dpic img { animation-delay:.3s; }
@keyframes dPop { from { opacity:0; transform:scale(.6) rotate(-18deg); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .dpic img { animation:none !important; } }
/* each day's page keeps its pictures to itself, and the day's name is not shaved by the pager's edge */
.dp-page { overflow:hidden; }
.dp-page .dayline { padding-left:3px; }
.dmeals { padding-left:8px; }
.dmeals::before { left:39px; }
/* a line that is water: the same blue drop, on a pale blue round */
.dpic.drop { background:#EAF3FF; }
.dpic.drop svg { width:74%; height:74%; filter:drop-shadow(0 4px 6px rgba(30,123,230,.25)); }
.dtiles.good .dpic.drop, .dtiles.bad .dpic.drop { background:#EAF3FF; }

/* ------------------------------------------------------------------ The receipt (6 Oct 2026)
 * A paid bill: a printer slot, and the receipt coming down out of it (patient_app_bills.js,
 * receipt()). .print is on while it prints; --gone is how long ago the print began, as a negative
 * delay, so a redraw in the middle carries on instead of starting again. */
.rc { position:relative; margin:2px 0 14px; }
.rc-slot { position:relative; z-index:2; height:28px; margin:0 2px; border-radius:14px;
  background:linear-gradient(180deg,#FBFCFE 0%,#D5DAE4 42%,#99A2B2 58%,#E3E7EE 100%);
  box-shadow:0 8px 16px rgba(16,24,40,.16), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(16,24,40,.12); }
.rc-slot::after { content:""; position:absolute; left:26px; right:26px; bottom:6px; height:5px; border-radius:3px; background:#2B3342; }
.rc-slot i { position:absolute; right:13px; top:8px; width:8px; height:8px; border-radius:50%; background:#2FB56A; box-shadow:0 0 0 3px rgba(47,181,106,.18); }
.rc-feed { position:relative; z-index:1; overflow:hidden; margin:-11px 20px 0; padding:0 8px 26px; }
.rc-paper { position:relative; background:#FFFDFA; border:1px solid #E4E7ED; border-top:0; border-radius:0 0 24px 24px; padding:24px 18px 20px;
  text-align:center; box-shadow:0 12px 16px -8px rgba(16,24,40,.22); color:var(--g-ink); }
.rc-logo { display:block; width:54px; height:54px; margin:0 auto 10px; border-radius:50%; object-fit:contain; background:#fff; border:1px solid var(--g-edge); padding:6px; }
.rc-name { display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.rc-kind { display:block; margin-top:3px; font-size:13.5px; font-weight:500; color:var(--g-soft); }
.rc-tear { position:relative; margin:18px -18px 16px; border-top:2px dashed #D3D8E1; }
.rc-tear::before, .rc-tear::after { content:""; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%; background:var(--g-page); border:1px solid #E4E7ED; }
.rc-tear::before { left:-11px; } .rc-tear::after { right:-11px; }
.rc-grid { display:grid; grid-template-columns:1fr auto; gap:14px 12px; text-align:left; }
.rc-cell { min-width:0; }
.rc-cell.r { text-align:right; }
.rc-cell small { display:block; margin-bottom:3px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--g-soft); }
body.te .rc-cell small { letter-spacing:.02em; text-transform:none; }
.rc-cell b { display:block; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; word-break:break-word; overflow-wrap:anywhere; line-height:1.25; }
.rc-cell b.rc-amt { font-size:26px; letter-spacing:-.035em; line-height:1.05; }
.rc-cell .gr-pill { height:26px; padding:0 12px; font-size:12.5px; }
.rc-by { margin-top:16px; padding:11px 14px; border-radius:16px; background:#F3F5F8; text-align:left; }
.rc-by b { display:block; font-size:15px; font-weight:600; }
.rc-by small { display:block; margin-top:1px; font-size:13px; font-weight:500; color:var(--g-soft); font-variant-numeric:tabular-nums; word-break:break-word; overflow-wrap:anywhere; }
.rc-thanks { display:block; margin-top:16px; font-size:15px; font-weight:600; color:var(--g-acc); }
.rc.print .rc-paper { animation:rc-print 2100ms linear both; animation-delay:var(--gone); }
.rc.print .rc-slot i { animation:rc-lamp 2100ms linear both; animation-delay:var(--gone); }
/* three strokes of the feed, each easing to a short rest, as a counter printer does */
@keyframes rc-print {
  0%, 9% { transform:translateY(-102%); animation-timing-function:cubic-bezier(.3,0,.3,1); }
  33%, 38% { transform:translateY(-66%); animation-timing-function:cubic-bezier(.3,0,.3,1); }
  62%, 67% { transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  100% { transform:translateY(0); }
}
@keyframes rc-lamp {
  0%, 20%, 40%, 60%, 80% { background:var(--fl-o); box-shadow:0 0 0 3px rgba(var(--fl-o-rgb),.2); }
  10%, 30%, 50%, 70% { background:var(--fl-o-lt); box-shadow:0 0 0 1px rgba(var(--fl-o-rgb),.1); }
  94%, 100% { background:#2FB56A; box-shadow:0 0 0 3px rgba(47,181,106,.18); }
}
.rc-burst { position:absolute; left:50%; top:16px; width:0; height:0; z-index:3; pointer-events:none; }
.rc-burst i { position:absolute; left:-4px; top:-5px; width:8px; height:11px; border-radius:2px; opacity:0;
  animation:rc-bit 1150ms cubic-bezier(.15,.7,.3,1) both; animation-delay:calc(2000ms + var(--d) + var(--gone)); }
.rc-burst i:nth-child(3n) { width:7px; height:7px; border-radius:50%; }
@keyframes rc-bit {
  0% { opacity:0; transform:translate(0,0) rotate(0deg) scale(.4); }
  12% { opacity:1; }
  70% { opacity:1; }
  100% { opacity:0; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1); }
}
/* a narrow phone: the paper takes more of the width, so a long bill number keeps to two lines */
@media (max-width: 350px) {
  .rc-feed { margin:-11px 6px 0; }
  .rc-paper { padding-left:14px; padding-right:14px; }
  .rc-tear { margin-left:-14px; margin-right:-14px; }
  .rc-cell b.rc-amt { font-size:23px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc.print .rc-paper, .rc.print .rc-slot i { animation:none; }
  .rc-burst { display:none; }
}

/* ------------------------------------------------------------------ My results (rel270, 2 Nov 2026; static/patient_app_results.js)
 * Vitals | Lab results: a pill-shaped two-way switch, then ONE white card per test or vital. Warm orange only - the page's own
 * orange, a pale orange track, the green only for the usual range that is shaded behind a chart. Classes start rs-. */
.rs-tabs { display:flex; gap:4px; padding:4px; margin:0 0 14px; border-radius:999px; background:#FFE9DC; }
.rs-tab { flex:1; min-width:0; min-height:44px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:#8A430A;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rs-tab[aria-selected="true"] { background:var(--g-orange, #F26522); color:#fff; box-shadow:0 4px 10px rgba(238,90,14,.18); }
.rs-tab:focus-visible, .rs-earlier summary:focus-visible, .rs-all summary:focus-visible, .rs-retry .gr-btn:focus-visible { outline:3px solid #8A430A; outline-offset:2px; }
.rs-panel:focus { outline:none; }
.rs-panel > .gr-btn { margin:0 0 14px; }

.rs-card { margin:0 0 12px; padding:16px; border:1px solid #F3E3D6; border-radius:18px; background:#fff; color:var(--g-ink); }
.rs-name { margin:0; font-size:13px; font-weight:600; line-height:1.35; color:var(--g-soft); overflow-wrap:anywhere; }
.rs-top { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin-top:6px; }
.rs-v { display:flex; align-items:baseline; gap:6px; min-width:0; }
.rs-v b { font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.15; color:var(--g-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.rs-v.txt b { font-size:20px; letter-spacing:-.01em; }
.rs-v small { font-size:13px; font-weight:500; color:var(--g-soft); }
.rs-pill { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.25; }
.rs-pill i { font-style:normal; font-size:13px; }
.rs-pill.ok { background:#EAF3DE; color:#27500A; }
.rs-pill.out { background:#FFE9DC; color:#8A430A; }
.rs-when { margin:4px 0 0; font-size:12.5px; font-weight:500; color:var(--g-soft); }
.rs-chart { display:block; width:100%; max-width:440px; height:auto; margin:10px auto 2px; overflow:visible; }
.rs-band { fill:#BFE0A0; fill-opacity:.7; }
.rs-line { fill:none; stroke:var(--g-orange, #F26522); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-opacity:.7; }
.rs-dot { fill:#fff; stroke:var(--g-orange, #F26522); stroke-width:2; }
.rs-dot.now { fill:var(--g-orange, #F26522); }
.rs-chart text { font-family:inherit; font-size:10.5px; font-weight:500; fill:#5B6474; }
.rs-chart .rs-val-l.now { font-weight:700; fill:var(--g-ink); }
.rs-foot { display:flex; align-items:baseline; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid #F3E3D6;
  font-size:13px; font-weight:500; color:var(--g-soft); }
.rs-foot span:last-child { margin-left:auto; text-align:right; font-weight:600; color:#8A430A; }
.rs-earlier, .rs-all { margin-top:10px; }
.rs-earlier summary, .rs-all summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--g-acc); }
.rs-all { margin:2px 0 14px; }
.rs-earlier summary, .rs-all summary { justify-content:space-between; list-style:none; }
.rs-earlier summary::-webkit-details-marker, .rs-all summary::-webkit-details-marker { display:none; }
.rs-earlier summary::after, .rs-all summary::after { content:""; flex:none; width:8px; height:8px; margin:0 6px 3px 10px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.rs-earlier[open] summary::after, .rs-all[open] summary::after { transform:rotate(-135deg); margin-bottom:-3px; }
.rs-all summary { padding:0 4px; }
.rs-earlier ul { margin:0; padding:0; list-style:none; }
.rs-earlier li { display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; padding:9px 0; border-top:1px solid #F3E3D6; font-size:13px; color:var(--g-soft); }
.rs-earlier li b { margin-left:auto; font-size:14.5px; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.rs-earlier li b small { font-size:11.5px; font-weight:500; color:var(--g-soft); }
.rs-earlier li .rs-pill { min-height:24px; padding:2px 9px; font-size:11.5px; }
.rs-note { margin-top:6px; }
.rs-retry { margin-top:2px; }
body.te .rs .gr-head h1 { line-height:1.45; }          /* Telugu letters have marks below the line: the title is not cut off */
body.te .rs-v.cmp b { font-size:21px; }
body.te .rs-name { font-size:12.5px; }
body.te .rs-pill { font-size:12px; }
body.te .rs-tab { font-size:14px; }
body.te .rs-foot { font-size:12.5px; }
@media (prefers-reduced-motion: reduce) { .rs-tab { transition:none; } }