/* The patient app, made to feel like something you would pay for (21 September 2026).
 *
 * Dr. Ranadheer, past midnight: "make our patient app all look premium... by tomorrow I should be
 * aww by seeing the UI and smooth flow and no glitches." Colours were left to me.
 *
 * So the brand stays exactly where it was - orange #F75601, blue #0267C2, the hospital's own - and
 * what changes is how they are used. Premium is not a new palette. It is restraint, depth and
 * rhythm: one saturated colour doing one job, a dark surface to make the light ones feel lit, real
 * shadow instead of a flat border, type that has a clear loudest thing on every screen, and motion
 * that arrives rather than jumps.
 *
 * This file only ever ADDS to patient_app.css. Every class it touches already exists there, so a
 * phone that fails to load this one still gets the working app underneath - which is the same
 * reason the PIN module draws its own screens. Nothing here changes what anything does.
 *
 * Still the phone's own fonts, still no CDN, still read on a cheap 390px Android in daylight: so
 * contrast is tested, not guessed, nothing on grey goes under 600 weight, and body text stays at
 * 15px and up.
 */

:root {
  /* The brand, unchanged, plus the shades a deep surface needs. */
  --orange:#F75601;
  --orange-lit:#FF7A2F;          /* the top of a gradient, never text */
  --orange-dark:#C33F00;
  /* The bottom bar and the curtain cut out of it are one surface, so one colour. */
  --curtain:#FFFFFF;
  --orange-soft:#FFF1E8;
  --blue:#0267C2;
  --blue-soft:#EAF2FC;
  --green:#0F7B4F; --green-soft:#E6F5EE;
  --amber:#8A5300; --amber-soft:#FFF6E3;
  --red:#C1243C; --red-soft:#FDECEF;

  /* Ink: the dark surface the hero sits on. Navy rather than black - black on a cheap LCD
     goes muddy, a deep navy stays rich. */
  --ink:#0E1626;
  --ink-2:#18243B;
  --ink-line:rgba(255,255,255,.12);

  --bg:#F6F7F9;
  --card:#FFFFFF;
  --line:#E9ECF1;
  --line-soft:#F1F3F7;
  --text:#101725;
  --muted:#5A6577;
  --faint:#8B95A6;

  /* Two shadows, always together: a tight one that seats the card on the page and a wide soft
     one that gives it height. One shadow alone always looks like a border. */
  --shadow:0 1px 2px rgba(16,23,37,.05), 0 10px 30px -12px rgba(16,23,37,.14);
  --shadow-lift:0 2px 6px rgba(16,23,37,.07), 0 22px 44px -18px rgba(16,23,37,.28);
  --shadow-ink:0 10px 34px -12px rgba(14,22,38,.55);

  --r-card:22px;
  --r-inner:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ the page itself */
/* A soft warm light behind the header, so the app does not open on flat grey. */
body::before {
  content:""; position:fixed; inset:0 0 auto; height:340px; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% -12%, rgba(247,86,1,.10) 0%, rgba(247,86,1,0) 62%),
    radial-gradient(90% 80% at 100% -20%, rgba(2,103,194,.09) 0%, rgba(2,103,194,0) 60%);
}
/* Only `main` needs lifting above the glow. The header is sticky and the tab bar is fixed, and
   giving either of them position:relative drops them back into the flow - which is exactly how
   the tab bar came unstuck the first time this was written. */
main { position:relative; z-index:1; }

/* ------------------------------------------------------------------ the header */
.top {
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(16,23,37,.07);
}
.top-in { min-height:64px; }
/* The logo was a small mark inside a white tile inside a white bar - three whites deep, and
   invisible (the owner, 21 Sep 2026). The mark is a transparent PNG, so it needs no tile at all:
   it just needs room. */
.logo {
  width:auto; height:46px; max-width:120px; border-radius:0; padding:0;
  background:none; border:0; box-shadow:none; object-fit:contain; object-position:left center;
}
.who-top .h { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.who-top .s { font-size:12.5px; font-weight:600; color:var(--faint); letter-spacing:.005em; }
.lang-btn {
  background:#fff; color:var(--text); border:1px solid var(--line); font-size:13.5px; font-weight:800;
  padding:0 15px; min-height:40px; box-shadow:0 1px 2px rgba(16,23,37,.05);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.lang-btn:active { transform:scale(.96); }

/* ------------------------------------------------------------------ cards */
.card {
  border-radius:var(--r-card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px;
  margin:0 0 14px;
}
.card h2 { font-size:17.5px; letter-spacing:-.022em; }
.screen-title { font-size:26px; letter-spacing:-.03em; margin:4px 0 16px; }
.muted, .lead { color:var(--muted); }

/* A quiet capital label above a block - the thing that makes a screen look composed. */
.cap, .hero .cap {
  font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}

/* ------------------------------------------------------------------ the hero */
/* The one dark surface in the app. Everything else is light, so this reads as the headline
   without needing to shout - and the token, the thing she actually came to see, is the
   biggest object on the screen. */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(152deg, var(--ink-2) 0%, var(--ink) 58%, #0A1120 100%);
  border:0;
  box-shadow:var(--shadow-ink);
  padding:20px;
}
.hero::after {
  content:""; position:absolute; right:-70px; bottom:-90px; width:230px; height:230px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(247,86,1,.42) 0%, rgba(247,86,1,0) 68%);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 40%);
}
.hero > * { position:relative; z-index:1; }
.hero .cap { color:#FFB183; }
/* Compact, and on ONE line.
 *
 * Dr. Ranadheer, 21 September 2026, looking at it in Telugu: "it is occupying more than 30% of
 * the screen and it looks awkward, it is from that edge to this edge - that won't look premium."
 * Measured: 281px of an 844px screen, 33%, against 27% in English. Telugu is taller because the
 * wait row wrapped - "సుమారు 5 నిమిషాలు" and "మీ ముందు 0 మంది" each took a line of their own.
 *
 * Three things were stacked: a label saying where you are, the token row, then a bordered row
 * with the wait. The label is gone - it named what the card obviously is, and in Telugu it was
 * the longest line on it. The wait now sits to the RIGHT of the token instead of underneath, so
 * the card is one row whatever the language does to the words. */
.hero { padding:13px 16px 11px; }
.hero .cap { display:none; }
.hero .main { gap:12px; margin-top:0; align-items:center; min-width:0; }
.hero .what { min-width:0; }
.hero .what b, .hero .what .sub { overflow-wrap:anywhere; }
.hero .tok {
  min-width:62px; padding:8px 9px 7px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.hero .tok b { font-size:26px; color:#fff; letter-spacing:-.035em; }
.hero .tok.many b { font-size:17px; }
.hero .tok small { color:rgba(255,255,255,.66); font-size:11.5px; letter-spacing:.13em; }
.hero .what b { color:#fff; font-size:16.5px; letter-spacing:-.02em; }
.hero .what .sub { color:rgba(255,255,255,.70); font-size:12.5px; font-weight:600; }
/* To the right of the token, stacked tight and right-aligned: the minutes big, the pills under
   them small. No border and no top margin - it is part of the same row now, not a second block. */
/* One thin strip, not a second block.
 *
 * Putting it in a right-hand column fixed English (27% -> 12%) and did almost nothing for Telugu,
 * which stayed at 30%: "సుమారు 5 నిమిషాలు" and "మీ ముందు 0 మంది" simply wrapped inside the
 * narrower column instead of across the card. Telugu says the same thing in more characters, so
 * the answer is not to give it less width - it is to stop the line breaking at all.
 *
 * So the wait is a single nowrap strip under the token row, small, and it scrolls sideways on the
 * rare phone too narrow for it rather than growing downwards. The words are untouched. */
.hero .wait {
  margin:9px 0 0; padding:0; border-top:0; color:rgba(255,255,255,.82);
  display:flex; flex-direction:row; align-items:center; gap:8px;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.hero .wait::-webkit-scrollbar { display:none; }
.hero .wait .n { color:#fff; font-size:14px; font-weight:800; letter-spacing:-.01em; }
.hero .wait .pill { font-size:10.5px; padding:2px 8px; flex:none; }
.hero .pill { background:rgba(255,255,255,.14); color:#fff; }

/* ------------------------------------------------------------------ the journey */
/* A rail joins the steps, so it reads as one path rather than five separate lines. */
.steps { position:relative; margin-top:16px; }
.steps::before {
  content:""; position:absolute; left:14px; top:14px; bottom:18px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--green) 0%, var(--line) 100%); opacity:.28;
}
.step { border-top:0; padding:8px 0; align-items:flex-start; }
.step:first-child { padding-top:0; }
.dot {
  width:29px; height:29px; font-size:14px; background:#fff; color:var(--faint);
  border:2px solid var(--line); box-shadow:0 0 0 4px var(--card);
}
.dot.done { background:var(--green); border-color:var(--green); color:#fff; }
.dot.stop { background:var(--red); border-color:var(--red); color:#fff; }
.dot.now {
  background:var(--orange); border-color:var(--orange); color:#fff;
  box-shadow:0 0 0 4px var(--card), 0 0 0 7px rgba(247,86,1,.18);
  animation:pulseNow 2.2s var(--ease) infinite;
}
@keyframes pulseNow {
  0%, 100% { box-shadow:0 0 0 4px var(--card), 0 0 0 7px rgba(247,86,1,.18); }
  50%      { box-shadow:0 0 0 4px var(--card), 0 0 0 12px rgba(247,86,1,.05); }
}
.step b { font-size:15.5px; font-weight:750; letter-spacing:-.01em; }
.step .at { font-size:13px; font-weight:700; color:var(--faint); }

/* ------------------------------------------------------------------ pills and buttons */
.pill { font-size:12.5px; font-weight:800; padding:6px 12px; background:#EEF1F6; color:#42506A; }
.btn {
  border-radius:16px; min-height:54px; font-size:16.5px; letter-spacing:-.01em;
  background:linear-gradient(180deg, var(--orange-lit) 0%, var(--orange) 100%);
  box-shadow:0 1px 2px rgba(196,60,0,.24), 0 10px 22px -10px rgba(247,86,1,.62);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), opacity .14s;
}
.btn:active { transform:scale(.975) translateY(1px); box-shadow:0 1px 2px rgba(196,60,0,.24); }
.btn.blue {
  background:linear-gradient(180deg,#1179D6 0%, var(--blue) 100%);
  box-shadow:0 1px 2px rgba(2,73,140,.24), 0 10px 22px -10px rgba(2,103,194,.55);
}
.btn.ghost {
  background:#fff; color:var(--text); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,23,37,.05);
}
.btn.small { min-height:46px; border-radius:13px; }

/* ------------------------------------------------------------------ rows and people */
.person {
  border-radius:var(--r-card); box-shadow:var(--shadow); padding:15px; min-height:80px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.person:active { transform:scale(.985); }
.person.on { border-color:transparent; box-shadow:0 0 0 2px var(--orange), var(--shadow-lift); }
.person .av {
  width:48px; height:48px; font-size:18px;
  background:linear-gradient(145deg,#FFE8DA 0%,#FFD6BE 100%); color:var(--orange-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.person .name { font-size:16.5px; letter-spacing:-.02em; }
.person .tok { font-size:23px; letter-spacing:-.03em; }

.link-row { min-height:60px; transition:background .14s var(--ease); border-top-color:var(--line-soft); }
.link-row:active { background:var(--line-soft); }
.link-row .ico { width:36px; height:36px; border-radius:12px; }
.link-row .lbl { font-weight:750; letter-spacing:-.01em; }
.link-row .go { color:#B6BFCD; }

/* ------------------------------------------------------------------ the tab bar */
.tabs {
  /* Solid, not frosted: the curtain above is cut from this same sheet, and a translucent bar
     with a solid notch rising out of it shows the seam. */
  background:var(--curtain);
  border-top:0;
  box-shadow:0 -8px 28px -14px rgba(16,23,37,.22);
  overflow:visible;
}
.tabs-in { position:relative; }
.tab { position:relative; gap:4px; transition:transform .16s var(--ease); color:var(--faint); transition:color .18s var(--ease); }
.tab span { font-size:11.5px; font-weight:700; letter-spacing:-.005em; }
.tab svg { width:23px; height:23px; transition:transform .22s var(--ease); }
/* ---------------------------------------------------------------- the curtain
 *
 * Dr. Ranadheer, 21 September 2026, holding up Swiggy: "see how beautifully if we enter one
 * touch there is a curtain like this and it will show up the banner. It doesn't mean that I
 * want these icons on the top - I want those icons to be in the below, but it should
 * curtainize that."
 *
 * So: Swiggy's shape, our position. The tabs stay at the bottom where his patients' thumbs
 * already are; the ACTIVE one stops being a flat icon and becomes a raised tab of the same
 * white surface, rising out of the bar with a concave shoulder on each side so the bar and
 * the tab read as one sheet of paper with a notch cut in it - not a button sitting on a strip.
 *
 * The shoulders are the whole trick. A rounded rectangle on a bar still looks stuck ON the
 * bar. The concave corners are what make it look cut FROM it: each is a 14px square holding
 * one radial gradient whose transparent quarter-circle faces outward, so the page shows
 * through the curve and white fills the rest.
 *
 * It is drawn on ::before and ::after of the tab itself, so it follows the active tab without
 * a line of JavaScript and animates by itself when the class moves. */
.tab::before {
  content:""; position:absolute; left:50%; margin-left:-38px; width:76px;
  top:-19px; bottom:-40px; border-radius:17px 17px 0 0;
  background:var(--curtain); box-shadow:0 -7px 18px -10px rgba(16,23,37,.20);
  opacity:0; transform:translateY(7px);
  transition:opacity .22s var(--ease), transform .26s var(--ease);
}
.tab::after {
  content:""; position:absolute; left:50%; margin-left:-52px; width:104px; height:14px;
  top:-19px; pointer-events:none;
  background:
    radial-gradient(circle at 0 0, transparent 14px, var(--curtain) 14.5px) left top / 14px 14px no-repeat,
    radial-gradient(circle at 100% 0, transparent 14px, var(--curtain) 14.5px) right top / 14px 14px no-repeat;
  opacity:0; transform:translateY(7px);
  transition:opacity .22s var(--ease), transform .26s var(--ease);
}
.tab.on::before, .tab.on::after { opacity:1; transform:translateY(0); }
/* The label and icon have to sit on the curtain, not under it. */
.tab > * { position:relative; z-index:1; }
.tab.on svg { transform:translateY(-1px); }
.tab.on { color:var(--orange-dark); }
.tab.on span { font-weight:800; }
.tab svg, .tab span { position:relative; }

/* ------------------------------------------------------------------ money */
.due .amt { font-size:30px; letter-spacing:-.03em; }
.acct .r.bal { border-radius:var(--r-inner); }
.qr { border-radius:var(--r-inner); box-shadow:var(--shadow); border:1px solid var(--line); }
.paycard { border-left:0; position:relative; overflow:hidden; }
.paycard::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--orange-lit), var(--orange));
}

/* ------------------------------------------------------------------ tests and readings */
.test { border-radius:var(--r-inner); border-color:var(--line); background:#FCFDFE; }
.track i { height:8px; border-radius:6px; }
.track i.cur { background:linear-gradient(90deg, var(--orange-lit), var(--orange)); }

/* ------------------------------------------------------------------ arriving, not jumping */
/* Cards come up in order rather than all at once. It costs nothing and it is most of the
   difference between an app that feels built and one that feels assembled. */
main > .card, main > .person, main > .hero, main > .rx-sheet, main > .offer {
  animation:riseIn .42s var(--ease) both;
}
main > *:nth-child(1) { animation-delay:.01s; }
main > *:nth-child(2) { animation-delay:.05s; }
main > *:nth-child(3) { animation-delay:.09s; }
main > *:nth-child(4) { animation-delay:.13s; }
main > *:nth-child(5) { animation-delay:.17s; }
main > *:nth-child(n+6) { animation-delay:.2s; }
@keyframes riseIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}

/* A skeleton that breathes, so waiting looks deliberate. */
.sk {
  background:linear-gradient(100deg, #EDF0F4 8%, #F7F9FB 34%, #EDF0F4 60%);
  background-size:220% 100%; animation:shimmer 1.35s linear infinite; border-radius:10px;
}
@keyframes shimmer { from { background-position:150% 0; } to { background-position:-50% 0; } }

/* Someone who has asked for less movement gets less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
}

/* ------------------------------------------------------------------ small screens */
/* 360px phones are still the commonest thing in the waiting room. */
@media (max-width:370px) {
  .hero .tok { min-width:74px; }
  .hero .tok b { font-size:29px; }
  .screen-title { font-size:23px; }
  .tab span { font-size:10.5px; }
  .tab::before { width:40px; }
}

/* ------------------------------------------------------------------ the name bar */
/* "The patient name bar also not great, very flat" (the owner, 21 Sep 2026). It was a logo, a
   name and a language button on white. Now the person is a face-sized initial in the hospital's
   own colours, her name is the loudest thing in the bar, and what she is here for today sits
   under it as a quiet tag rather than a run-on line of grey. */
.top-in { gap:12px; min-height:70px; }
.who-top { display:flex; align-items:center; gap:11px; }
.who-av {
  flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  font-weight:800; font-size:16.5px; letter-spacing:-.02em; color:#fff;
  background:linear-gradient(145deg, var(--orange-lit) 0%, var(--orange) 55%, #E04A00 100%);
  box-shadow:0 2px 8px -2px rgba(247,86,1,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.who-text { min-width:0; flex:1; }
.who-top .h { font-size:17.5px; line-height:1.2; }
.who-top .s {
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--orange-dark);
  background:var(--orange-soft); border-radius:999px; padding:3px 9px; max-width:100%;
}

/* ------------------------------------------------------------------ the doctor's face */
/* A name in a grey pill is a label. A face is a person, and she is about to be treated by one. */
.doc-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:4px 13px 4px 4px; box-shadow:0 1px 2px rgba(16,23,37,.05); max-width:100%; }
.doc-chip img, .doc-chip .ini {
  flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:center top;
  background:linear-gradient(145deg,#E8EEF7,#D6E2F2); color:var(--blue);
  display:grid; place-items:center; font-weight:800; font-size:12.5px;
}
.doc-chip b { font-size:13.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

/* ------------------------------------------------------------------ open and shut */
/* The drop-and-close the owner asked for. A one-row grid going 0fr -> 1fr animates a height
   nobody has measured, so a long card opens fully on a small phone instead of being clipped by
   a max-height somebody guessed. */
.card.foldable > .fold-head { cursor:pointer; user-select:none; -webkit-user-select:none;
  margin:-4px -4px 0; padding:4px; border-radius:12px; transition:background .16s var(--ease); }
.card.foldable > .fold-head:active { background:var(--line-soft); }
.fold-chev { flex:none; margin-left:auto; color:var(--faint); font-size:21px; line-height:1;
  transform:translateY(-4px); transition:transform .3s var(--ease); }
.card.is-shut .fold-chev { transform:translateY(-2px) rotate(-90deg); }
.fold-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .34s var(--ease),
  opacity .26s var(--ease), margin .34s var(--ease); opacity:1; }
.fold-in { overflow:hidden; min-height:0; }
.card.is-shut > .fold-body { grid-template-rows:0fr; opacity:0; margin-bottom:-6px; }

/* ------------------------------------------------------------------ the tab bar, less basic */
/* "The dashboard buttons home bills and all look very basic." The first answer was a soft warm
   pill behind the active tab and a wash on press. Both used up ::before and ::after, and .tab
   carried overflow:hidden - which is why the curtain above appeared clipped and orange on the
   first try. The curtain replaces the pill outright: it is a better answer to the same note,
   and it is the one he asked for after seeing Swiggy.
   Press feedback is now the tab itself giving slightly, which needs no pseudo-element. */
.tabs-in { padding:5px 4px calc(4px + env(safe-area-inset-bottom)); gap:2px; }
.tab { border-radius:14px; padding:7px 2px 6px; min-height:58px; overflow:visible; }
.tab:active { transform:scale(.955); }
.tab:active svg { transform:scale(.92); }
.tab svg { stroke-width:1.9; transition:transform .18s var(--ease); }

/* ------------------------------------------------------------------ the bar, tightened */
/* First pass put a logo, a face, a name and a tag in one 390px row and the tag was cut in half.
   The hero already says what today is, so the bar carries who she is and nothing else. */
.top-in { gap:10px; }
.logo { height:38px; max-width:84px; }
.who-av { width:38px; height:38px; border-radius:12px; font-size:15px; }
.who-top .h { font-size:16.5px; }
.who-top .s { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
  width:fit-content; }
.lang-btn { padding:0 13px; min-height:38px; font-size:13px; }

/* A heading and a doctor should share the row, not fight over it. */
.row-head { align-items:center; }
.row-head h2 { flex:1 1 auto; min-width:0; }
.row-head .doc-chip { flex:0 1 auto; min-width:0; }
.doc-chip b { max-width:112px; }

/* A title and a doctor were sharing one line and both were losing: "OP consultation" wrapped and
   the name became "Dr. Keerthipr...". The title takes the row; the doctor sits under it, whole. */
.card.fold > .row-head {
  display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:10px; row-gap:9px;
}
.card.fold > .row-head > h2 { grid-column:1; grid-row:1; }
.card.fold > .row-head > .fold-chev { grid-column:2; grid-row:1; margin-left:0; }
.card.fold > .row-head > .doc-chip { grid-column:1 / -1; grid-row:2; justify-self:start; }
.card.fold > .row-head > .doc-chip b { max-width:none; }
.card.fold > .row-head > .pill { grid-column:2; grid-row:2; justify-self:end; }

/* ------------------------------------------------------------------ the token card, in blue */
/* The first hero was dark with an orange glow behind it and it came out brown on screen, which
   the owner did not like (21 Sep 2026). Blue is the other half of the hospital's own mark, it is
   the colour people already read as medical, and it takes a gloss far better than orange does.
   Orange stays where it belongs: the thing you press. */
.hero {
  background:
    radial-gradient(120% 100% at 78% 8%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #4FB6F5 0%, #1B8FE3 34%, var(--blue) 72%, #024F97 100%);
  box-shadow:0 2px 6px rgba(2,79,151,.24), 0 20px 40px -18px rgba(2,103,194,.72);
}
/* The gloss: one bright sweep across the top, and a soft light pooling at the bottom corner. */
.hero::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 58%);
}
.hero::after {
  right:-60px; bottom:-80px; width:250px; height:250px;
  background:radial-gradient(circle, rgba(140,220,255,.50) 0%, rgba(140,220,255,0) 68%);
}
.hero .cap { color:#CDEBFF; }
.hero .tok {
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50), 0 6px 18px -8px rgba(1,50,96,.6);
}
.hero .tok b { text-shadow:0 1px 10px rgba(1,50,96,.35); }
.hero .tok small { color:rgba(255,255,255,.78); }
.hero .what .sub { color:rgba(255,255,255,.82); }
.hero .wait { border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.88); }

/* ------------------------------------------------------------------ Swiggy orange */
/* The owner asked to try it (21 Sep 2026). #FC8019 is a warmer, lighter orange than the brand's
   own #F75601 - it glows where ours goes brown, which was the complaint about the first hero.
   Put `data-hero="blue"` on <body> to go back to the blue one; both are kept, he picks. */
body:not([data-hero="blue"]) .hero {
  background:
    radial-gradient(120% 100% at 78% 6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(158deg, #FFB25C 0%, #FC8019 38%, #F26B00 74%, #DB5A00 100%);
  box-shadow:0 2px 6px rgba(190,79,0,.26), 0 20px 40px -18px rgba(252,128,25,.78);
}
body:not([data-hero="blue"]) .hero::after {
  background:radial-gradient(circle, rgba(255,214,150,.62) 0%, rgba(255,214,150,0) 68%);
}
body:not([data-hero="blue"]) .hero .cap { color:#FFF0DC; }
body:not([data-hero="blue"]) .hero .tok b { text-shadow:0 1px 10px rgba(150,60,0,.35); }

/* ------------------------------------------------------------------ what she is waiting on */
/* One step blinks: the next one that has not happened. It breathes rather than flashes - a
   waiting room is stressful enough without a strobe, and a slow pulse still catches the eye
   across a room. */
.dot.waiting {
  background:#fff; border-color:var(--orange); color:var(--orange);
  animation:waitPulse 1.9s var(--ease) infinite;
}
@keyframes waitPulse {
  0%, 100% { box-shadow:0 0 0 4px var(--card), 0 0 0 5px rgba(247,86,1,.30); }
  50%      { box-shadow:0 0 0 4px var(--card), 0 0 0 13px rgba(247,86,1,0); }
}
.step .dot.waiting + .body b { color:var(--orange-dark); }
/* A quiet "now" tag after the words, so it reads as well as blinks - somebody who cannot see
   the animation, or who has movement turned off, still knows which line is theirs. */
.step .dot.waiting + .body b::after {
  content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%;
  background:var(--orange); vertical-align:middle; animation:waitBlink 1.9s var(--ease) infinite;
}
@keyframes waitBlink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }

/* ------------------------------------------------------------------ the hero, settled */
/* The owner's verdict on the bright ones: "not good, I will go with your initial colour palette
   type only, but try any different colour in that model" (21 Sep 2026).
 *
 * The initial model was right - a deep surface with a light blooming out of one corner. What was
 * wrong was the light: orange over near-black mixes to brown. Teal does not. It stays cold and
 * clean over navy, it is the colour a hospital already owns without anyone deciding it should,
 * and it leaves the brand's orange free to mean "press this" and nothing else.
 *
 * Two more are kept in the same model, a word away on <body>: data-hero="violet" and "blue".
 * This block is last in the file on purpose, so it is the one that wins.
 */
.hero,
body[data-hero="teal"] .hero {
  background:
    radial-gradient(130% 100% at 50% -30%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(155deg, #16304A 0%, #102437 40%, #0B1A29 100%);
  box-shadow:0 2px 6px rgba(8,18,30,.30), 0 22px 44px -20px rgba(11,26,41,.80);
}
.hero::after,
body[data-hero="teal"] .hero::after {
  right:-64px; bottom:-84px; width:250px; height:250px;
  background:radial-gradient(circle, rgba(34,211,190,.50) 0%, rgba(34,211,190,.10) 45%,
                                     rgba(34,211,190,0) 70%);
}
.hero::before,
body[data-hero="teal"] .hero::before {
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 38%,
                                     rgba(255,255,255,0) 62%);
}
.hero .cap, body[data-hero="teal"] .hero .cap { color:#6FE7D2; }
.hero .tok, body[data-hero="teal"] .hero .tok {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(120,240,220,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px -10px rgba(0,0,0,.6);
}
.hero .tok b { color:#fff; text-shadow:0 2px 16px rgba(34,211,190,.30); }
.hero .tok small { color:rgba(190,235,228,.72); }
.hero .what .sub { color:rgba(214,232,240,.76); }
.hero .wait { border-top-color:rgba(255,255,255,.14); color:rgba(214,232,240,.86); }

/* Violet, same model - deeper, a little more expensive-looking, less medical. */
body[data-hero="violet"] .hero {
  background:
    radial-gradient(130% 100% at 50% -30%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(155deg, #2A2148 0%, #1D1735 42%, #120E22 100%);
  box-shadow:0 2px 6px rgba(20,12,40,.32), 0 22px 44px -20px rgba(29,23,53,.82);
}
body[data-hero="violet"] .hero::after {
  background:radial-gradient(circle, rgba(167,139,250,.52) 0%, rgba(167,139,250,0) 70%);
}
body[data-hero="violet"] .hero .cap { color:#C9B8FF; }
body[data-hero="violet"] .hero .tok { border-color:rgba(190,170,255,.30); }
body[data-hero="violet"] .hero .tok b { text-shadow:0 2px 16px rgba(167,139,250,.32); }

/* ------------------------------------------------------------------ the waiting dot, alone */
/* "Not just dot - big dot only pulsating for waiting" (the owner, 21 Sep 2026). The little
   blinking dot after the words was two things saying one thing. The step's own dot is the
   signal: bigger than the rest, and breathing. */
.step .dot.waiting + .body b::after { content:none; }
.dot.waiting {
  width:36px; height:36px; margin-top:-3px; margin-left:-3px; font-size:0;
  border-width:2.5px; border-color:var(--orange); background:#fff;
  animation:waitPulse 1.8s var(--ease) infinite;
}
/* A filled core inside the ring, so it reads as a dot and not as an empty circle. */
.dot.waiting::before {
  content:""; width:13px; height:13px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 10px rgba(247,86,1,.55);
  animation:waitCore 1.8s var(--ease) infinite;
}
@keyframes waitPulse {
  0%, 100% { box-shadow:0 0 0 4px var(--card), 0 0 0 5px rgba(247,86,1,.34); }
  50%      { box-shadow:0 0 0 4px var(--card), 0 0 0 16px rgba(247,86,1,0); }
}
@keyframes waitCore {
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(.72); }
}
/* The rail has to clear the bigger dot. */
.steps::before { left:17px; }

/* The blue one, scoped properly. The settled block above styles a bare `.hero`, so a variant has
   to name the body to outrank it - written flat the first time, which is why "blue" quietly
   rendered teal. */
body[data-hero="blue"] .hero {
  background:
    radial-gradient(120% 100% at 78% 8%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #4FB6F5 0%, #1B8FE3 34%, var(--blue) 72%, #024F97 100%);
  box-shadow:0 2px 6px rgba(2,79,151,.24), 0 20px 40px -18px rgba(2,103,194,.72);
}
body[data-hero="blue"] .hero::after {
  background:radial-gradient(circle, rgba(140,220,255,.50) 0%, rgba(140,220,255,0) 68%);
}
body[data-hero="blue"] .hero::before {
  background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 34%,
                                     rgba(255,255,255,0) 58%);
}
body[data-hero="blue"] .hero .cap { color:#CDEBFF; }
body[data-hero="blue"] .hero .tok { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.18); }
body[data-hero="blue"] .hero .tok b { text-shadow:0 1px 10px rgba(1,50,96,.35); }
body[data-hero="blue"] .hero .tok small { color:rgba(255,255,255,.78); }
body[data-hero="blue"] .hero .what .sub { color:rgba(255,255,255,.82); }

/* ------------------------------------------------------------------ the Offers tab */
/* A price list, not an advertisement: what is inside is on the card, the saving is arithmetic
   from those items, and the fasting rule is where she will read it rather than in small print
   at the counter. */
.card.offer { padding:0; overflow:hidden; }
.card.offer > * { padding-left:18px; padding-right:18px; }
.off-top { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:15px; padding-bottom:2px; }
.off-cat { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:5px 11px; }
.off-save { font-size:12.5px; font-weight:800; color:var(--green); background:var(--green-soft);
  border-radius:999px; padding:5px 11px; white-space:nowrap; }
.card.offer h2 { margin-top:10px; font-size:19px; letter-spacing:-.025em; }
.off-blurb { margin:5px 0 0; color:var(--muted); font-size:14.5px; font-weight:500; }
.off-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:12px; }
.off-price b { font-size:28px; font-weight:800; letter-spacing:-.03em; }
.off-was { color:var(--faint); font-size:16px; font-weight:700; }
.off-count { margin-left:auto; font-size:12.5px; font-weight:800; color:var(--muted);
  background:#EEF1F6; border-radius:999px; padding:4px 10px; white-space:nowrap; }
.off-items { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.off-items li { position:relative; padding-left:24px; font-size:14.5px; font-weight:600;
  color:#2C3646; }
/* A tick, drawn rather than typed, so it lines up on every phone. */
.off-items li::before {
  content:""; position:absolute; left:2px; top:5px; width:13px; height:7px;
  border-left:2.4px solid var(--green); border-bottom:2.4px solid var(--green);
  transform:rotate(-45deg); border-radius:1px;
}
.off-note { display:flex; gap:9px; align-items:flex-start; margin:14px 0 0; padding:11px 12px;
  background:var(--amber-soft); border-radius:var(--r-inner); color:var(--amber);
  font-size:13.5px; font-weight:700; line-height:1.45; }
.off-note { margin-left:18px; margin-right:18px; padding-left:12px; padding-right:12px; }
.off-bang { flex:none; width:19px; height:19px; border-radius:50%; background:var(--amber);
  color:#fff; display:grid; place-items:center; font-size:12.5px; font-weight:800; }
.card.offer .btn { margin:15px 18px 18px; width:calc(100% - 36px); }

/* ------------------------------------------------------------------ the deal, with weight */
/* "The offer tab looks flat - the price drop and savings" (the owner, 21 Sep 2026). It was three
   grey words on a row. The drop is the reason the card exists, so it gets its own block: the
   percentage on a solid orange tile, the price large beside it, and what she keeps in green
   underneath the struck-out old one. */
.off-deal {
  display:flex; align-items:center; gap:14px; margin:14px 18px 0; padding:14px 16px;
  border-radius:var(--r-inner);
  background:linear-gradient(135deg,#FFF7F2 0%, #FFF1E8 55%, #FFE9DB 100%);
  border:1px solid #FBD9C2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.card.offer > .off-deal { padding-left:16px; padding-right:16px; }
.off-pc {
  flex:none; display:grid; place-items:center; width:62px; height:62px; border-radius:17px;
  background:linear-gradient(160deg, var(--orange-lit) 0%, var(--orange) 62%, #DE4C00 100%);
  color:#fff; font-size:20px; font-weight:800; letter-spacing:-.04em; line-height:1;
  box-shadow:0 4px 14px -4px rgba(247,86,1,.72), inset 0 1px 0 rgba(255,255,255,.34);
}
.off-pc small { display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; opacity:.92; margin-top:3px; }
.off-nums { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.off-nums b { font-size:33px; font-weight:800; letter-spacing:-.045em; color:var(--text); line-height:1; }
.off-side { display:flex; flex-direction:column; gap:5px; }
.off-was { color:var(--faint); font-size:15.5px; font-weight:700; text-decoration-thickness:2px; }
.off-save {
  font-size:12.5px; font-weight:800; color:#fff; white-space:nowrap;
  background:linear-gradient(180deg,#17A163 0%, var(--green) 100%);
  border-radius:999px; padding:4px 11px;
  box-shadow:0 3px 10px -3px rgba(15,123,79,.6);
}
.off-count-row { margin-top:12px; }
.off-count { display:inline-block; }

/* ------------------------------------------------------------------ the package's own band */
/* The name of a checkup on plain white read as flat. Each card now opens with a tinted band,
   coloured by what kind of package it is, with a bar of that colour down its edge - so a list of
   six packages is scannable by colour before a word of it is read. */
.card.offer { --tint:#0267C2; --tint-soft:#EAF2FC; --tint-soft2:#F7FAFE; }
.card.offer.cat-blood   { --tint:#C1243C; --tint-soft:#FDECEF; --tint-soft2:#FFF8F9; }
.card.offer.cat-scan    { --tint:#6D4AC9; --tint-soft:#F0EBFB; --tint-soft2:#FAF8FE; }
.card.offer.cat-consult { --tint:#0F7B4F; --tint-soft:#E6F5EE; --tint-soft2:#F6FCF9; }
.card.offer.cat-other   { --tint:#5A6577; --tint-soft:#EEF1F6; --tint-soft2:#F9FAFC; }

.off-head {
  position:relative; padding:17px 18px 16px 22px; margin:0;
  background:linear-gradient(170deg, var(--tint-soft) 0%, var(--tint-soft2) 62%, #fff 100%);
  border-bottom:1px solid var(--line-soft);
}
.off-head::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 55%, #fff) 100%);
}
/* color-mix is recent; a phone without it still gets the solid bar. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .off-head::before { background:var(--tint); }
}
.card.offer .off-top { padding:0; }
.off-cat { color:var(--tint); background:rgba(255,255,255,.75); border:1px solid var(--line); }
.card.offer .off-head h2 { margin-top:11px; font-size:20px; letter-spacing:-.03em; }
.card.offer .off-head .off-blurb { margin-top:5px; }

/* ------------------------------------------------------------------ the back arrow */
.top-back {
  flex:none; width:40px; height:40px; border-radius:13px; border:1px solid var(--line);
  background:#fff; color:var(--text); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,23,37,.05);
  transition:transform .14s var(--ease), background .14s var(--ease);
}
.top-back svg { width:20px; height:20px; }
.top-back:active { transform:scale(.93); background:var(--line-soft); }
/* With a back arrow on screen the logo gives up its room first - she needs the way out more
   than she needs the mark. */
.top-back:not([hidden]) ~ .logo { display:none; }

/* ------------------------------------------------------------------ the swipe */
main { transition:transform .13s var(--ease), opacity .13s var(--ease); }
main.slide-left  { transform:translateX(-26px); opacity:.35; }
main.slide-right { transform:translateX(26px);  opacity:.35; }

/* ------------------------------------------------------------------ the page owns sideways */
/* Swiping between tabs and the browser's own swipe-to-go-back were both listening to the same
   gesture, so a swipe changed the tab and then history quietly changed it again. Containing the
   horizontal overscroll settles it: the page keeps sideways swipes, the phone keeps its edges. */
html, body { overscroll-behavior-x: contain; }

/* ------------------------------------------------------------------ Ask Sara */
/* A button that follows her, and a sheet that comes up from the bottom - the shape every phone
   already teaches. It sits above the tab bar and gets out of the way when the sheet is open. */
.ask-fab {
  position:fixed; right:14px; bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom)); z-index:28;
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font:inherit; font-weight:800; font-size:14.5px; color:#fff; padding:0 18px 0 14px; min-height:50px;
  border-radius:999px;
  background:linear-gradient(160deg, #1B8FE3 0%, var(--blue) 58%, #024F97 100%);
  box-shadow:0 4px 14px -4px rgba(2,79,151,.6), 0 14px 30px -14px rgba(2,103,194,.8);
  transition:transform .16s var(--ease), opacity .2s var(--ease);
}
.ask-fab:active { transform:scale(.95); }
body.ask-open .ask-fab { opacity:0; pointer-events:none; }
/* The spark: three dots that breathe, so it reads as "ask", not "add". */
.ask-spark { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.22);
  position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.ask-spark::before, .ask-spark::after {
  content:""; position:absolute; border-radius:50%; background:#fff;
}
.ask-spark::before { width:5px; height:5px; left:4px; top:7.5px; animation:askDot 1.5s var(--ease) infinite; }
.ask-spark::after  { width:5px; height:5px; right:4px; top:7.5px; animation:askDot 1.5s var(--ease) .3s infinite; }
@keyframes askDot { 0%,100% { opacity:.45; } 50% { opacity:1; } }

.ask-scrim { position:fixed; inset:0; z-index:40; background:rgba(10,16,28,.45);
  opacity:0; transition:opacity .24s var(--ease); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
#ask-wrap.in .ask-scrim { opacity:1; }
.ask-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:41; max-height:86vh; display:flex;
  flex-direction:column; background:var(--card); border-radius:26px 26px 0 0;
  box-shadow:0 -10px 40px -12px rgba(16,23,37,.42);
  transform:translateY(100%); transition:transform .3s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
#ask-wrap.in .ask-sheet { transform:none; }
.ask-grab { width:42px; height:4px; border-radius:99px; background:#DCE1E9; margin:9px auto 2px; }
.ask-head { display:flex; align-items:center; gap:11px; padding:8px 16px 12px; border-bottom:1px solid var(--line-soft); }
.ask-av { flex:none; width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
  font-weight:800; font-size:17px; color:#fff;
  background:linear-gradient(160deg,#1B8FE3 0%, var(--blue) 60%, #024F97 100%);
  box-shadow:0 2px 8px -2px rgba(2,79,151,.55); }
.ask-who { flex:1; min-width:0; display:flex; flex-direction:column; }
.ask-who b { font-size:16.5px; letter-spacing:-.02em; }
.ask-who small { font-size:12.5px; font-weight:600; color:var(--faint); }
.ask-x { flex:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; }

.ask-log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px;
  min-height:160px; }
.ask-hello { margin:0; color:var(--muted); font-size:14.5px; font-weight:500; }
.ask-starters { display:flex; flex-wrap:wrap; gap:8px; }
.ask-chip { font:inherit; font-size:13.5px; font-weight:700; color:var(--blue); background:var(--blue-soft);
  border:0; border-radius:999px; padding:9px 14px; cursor:pointer; }
.ask-me { align-self:flex-end; max-width:84%; background:linear-gradient(160deg,#1B8FE3,#0267C2);
  color:#fff; border-radius:18px 18px 5px 18px; padding:11px 14px; font-size:15px; font-weight:600;
  box-shadow:0 4px 14px -6px rgba(2,103,194,.7); }
.ask-sara { align-self:flex-start; max-width:88%; background:#F3F5F8; color:var(--text);
  border-radius:18px 18px 18px 5px; padding:12px 14px; font-size:15px; font-weight:500; line-height:1.5; }
.ask-sara.urgent { background:var(--red-soft); color:#8C1226; font-weight:700;
  border:1px solid #F6C6CE; }
.ask-sara .ask-call { margin-top:10px; background:linear-gradient(180deg,#D93A52,var(--red));
  box-shadow:0 4px 14px -6px rgba(193,36,60,.8); }
.ask-offer { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:10px;
  width:100%; text-align:left; font:inherit; cursor:pointer; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:14px; padding:11px 13px; }
.ask-offer b { font-size:14.5px; }
.ask-offer span { font-size:12.5px; font-weight:700; color:var(--blue); }
/* Sara thinking: three dots, not a spinner - a spinner says "broken", dots say "wait". */
.ask-sara.thinking { display:flex; gap:5px; padding:15px 16px; }
.ask-sara.thinking i { width:7px; height:7px; border-radius:50%; background:#A9B4C4;
  animation:askThink 1.2s var(--ease) infinite; }
.ask-sara.thinking i:nth-child(2) { animation-delay:.16s; }
.ask-sara.thinking i:nth-child(3) { animation-delay:.32s; }
@keyframes askThink { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }

.ask-bar { display:flex; align-items:center; gap:8px; padding:10px 14px 6px; border-top:1px solid var(--line-soft); }
.ask-bar input { flex:1; margin:0; min-height:48px; border-radius:999px; padding:12px 16px; font-size:15.5px; }
.ask-mic, .ask-send { flex:none; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; }
.ask-mic { background:var(--blue-soft); color:var(--blue); }
.ask-mic.on { background:var(--red); color:#fff; animation:waitPulse 1.6s var(--ease) infinite; }
.ask-mic svg, .ask-send svg { width:21px; height:21px; }
.ask-send { background:linear-gradient(180deg, var(--orange-lit), var(--orange)); color:#fff;
  box-shadow:0 4px 12px -5px rgba(247,86,1,.8); }
.ask-fine { margin:0; padding:2px 16px 12px; font-size:11.5px; font-weight:600; color:var(--faint);
  text-align:center; }

/* ------------------------------------------------------------------ her pregnancy */
/* The week is the thing she is asked and asks more than anything else, so it is the first thing
   on the screen and the biggest object on it. A ring rather than a bar: "32 of 40" drawn as a bar
   reads like a loading screen, and this is the best news she has. */
.card.pg-card {
  background:linear-gradient(160deg, #FFF6F9 0%, #FFF 46%);
  border-color:#F6DDE6;
}
.pg-head { display:flex; align-items:center; gap:18px; }
.pg-ring-wrap { position:relative; flex:none; width:104px; height:104px; }
.pg-ring { width:104px; height:104px; transform:rotate(-90deg); }
.pg-ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.pg-ring .pg-track { stroke:#F3E3EA; }
.pg-ring .pg-fill { stroke:url(#pgGrad); stroke:#E0568C; transition:stroke-dashoffset .7s var(--ease); }
.pg-mid { position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1; }
.pg-mid b { display:block; font-size:31px; font-weight:800; letter-spacing:-.04em; color:#A8225A; }
.pg-mid small { display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#B77E96; margin-top:3px; }
.pg-facts { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pg-facts .cap { color:#B0708C; }
.pg-facts b { font-size:19px; font-weight:800; letter-spacing:-.02em; }
.pg-togo { font-size:13.5px; font-weight:700; color:var(--muted); }

.pg-next { list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid #F4E6EC;
  display:grid; gap:11px; }
.pg-next li { display:flex; align-items:center; gap:12px; }
.pg-when { flex:none; min-width:74px; font-size:12.5px; font-weight:800; color:#A8225A;
  background:#FCEEF3; border-radius:9px; padding:6px 8px; text-align:center; }
.pg-what { min-width:0; display:flex; flex-direction:column; }
.pg-what b { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.pg-what small { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); }

/* The counter: ten dots and one big button, because that is the whole of it. */
.pg-dots { display:flex; gap:7px; margin:14px 0 10px; }
.pg-dots i { flex:1; height:11px; border-radius:99px; background:#EDEFF3; transition:background .2s var(--ease); }
.pg-dots i.on { background:linear-gradient(180deg,#F075A3,#E0568C); }
.pg-count { margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.03em; }
.pg-count small { display:block; font-size:13px; font-weight:700; color:var(--muted); letter-spacing:0; }
.btn.pg-tap { min-height:76px; font-size:19px; border-radius:20px;
  background:linear-gradient(180deg,#F075A3 0%, #E0568C 100%);
  box-shadow:0 2px 4px rgba(168,34,90,.24), 0 14px 26px -12px rgba(224,86,140,.75); }
.pg-past { list-style:none; margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--line-soft);
  display:grid; gap:8px; }
.pg-past li { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:700; }
.pg-past li span { color:var(--muted); }
.pg-past li.slow b { color:var(--red); }

/* ------------------------------------------------------------------ Sara's robot */
/* The button said "Ask" and showed three dots; the owner wanted it to say who it is and to carry
   a small robot (21 Sep 2026). Drawn in the button, not fetched: one less thing to load on a
   weak connection, and it takes the button's own colour. */
.ask-bot { position:relative; width:22px; height:22px; flex:none; }
.ask-bot svg { width:22px; height:22px; display:block; }
.ask-eye { position:absolute; top:12px; width:3.4px; height:3.4px; border-radius:50%;
  background:currentColor; animation:askBlink 4.2s steps(1,end) infinite; }
.ask-eye.l { left:6.4px; }
.ask-eye.r { right:6.4px; }
/* It blinks now and then. Not a loop that draws the eye - just enough to look alive. */
@keyframes askBlink { 0%, 92%, 100% { opacity:1; } 94%, 97% { opacity:.15; } }

/* ------------------------------------------------------------------ the week, on its own block */
/* "That block of 32 weeks and the round background - in a pink block, so it might look premium
   rather than plain white background all the screen" (the owner, 21 Sep 2026). He is right: the
   card was a faint wash and read as white. The week now sits on a block of its own colour, and
   what is coming stays on white underneath - so the card has a head and a body instead of one
   flat field. */
.card.pg-card { padding:0; overflow:hidden; background:var(--card); border-color:#F2DCE5; }
.pg-head {
  margin:0; padding:20px 18px;
  background:linear-gradient(145deg, #FFEAF2 0%, #FDDDEA 45%, #F9CEDF 100%);
  border-bottom:1px solid #F3D6E1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  position:relative; overflow:hidden;
}
/* A soft light in the corner, the same trick as the token card - it stops a flat pink looking
   like a highlighter. */
.pg-head::after {
  content:""; position:absolute; right:-54px; top:-58px; width:170px; height:170px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 68%);
}
.pg-head > * { position:relative; z-index:1; }
/* The ring needs a paler track now that it sits on pink, or it disappears into it. */
.pg-ring .pg-track { stroke:rgba(255,255,255,.72); }
.pg-ring .pg-fill { stroke:#D63F7D; }
.pg-mid b { color:#9C1B50; }
.pg-mid small { color:#B4668A; }
.pg-facts .cap { color:#A83866; }
.pg-facts b { color:#4A1730; }
.pg-togo { color:#9A6480; }

/* What is coming keeps the white, and its own breathing room. */
.pg-next { margin:0; padding:16px 18px 18px; border-top:0; }

/* ------------------------------------------------------------------ Sara herself */
/* "A Telugu girl face which looks like a modern robot, eyes blinking, so it looks premium"
   (the owner, 21 Sep 2026).
 *
 * Few shapes on purpose. She is read at 26 pixels on a phone, and the first attempt - brows, a
 * smile, a fringe, catchlights - turned to mud at that size and looked cheaper, not richer. So:
 * a silhouette of hair, a face, two eyes, a bindi, and one lit dot at the ear for the machine
 * half. The cultural cues are few and plain, the kind a hospital can put in front of anybody.
 *
 * She blinks about once every five seconds, which is roughly what people do. */
.sara { display:block; width:100%; height:100%; overflow:visible; }
.sara .s-disc  { fill:#FFF1E8; }
.sara .s-hair  { fill:#241722; }
.sara .s-face  { fill:#F2C6A3; }
.sara .s-eye   { fill:#17242F; }
.sara .s-lid   { fill:#F2C6A3; }
.sara .s-bindi { fill:#D6285A; }
.sara .s-band  { fill:none; stroke:#1B8FE3; stroke-width:1.5; stroke-linecap:round; }
.sara .s-bulb  { fill:#1B8FE3; }

/* On the blue button she needs her own light ground, and a warm dot instead of a blue one. */
.sara.on-fab .s-disc { fill:#FFFFFF; }
.sara.on-fab .s-band { stroke:#F75601; }
.sara.on-fab .s-bulb { fill:#F75601; }

/* The blink: lids drop over the eyes rather than the eyes squashing - a squashed circle reads as
   a wink, a dropped lid reads as a blink. */
.sara .s-lids { transform:translateY(-4.4px); }
.sara .s-lid  { animation:saraBlink 5.2s ease-in-out infinite; }
@keyframes saraBlink {
  0%, 93%, 100% { transform:translateY(0); }
  95.5%         { transform:translateY(4.4px); }
}
/* The dot at her ear breathes, so she reads as awake between blinks. */
.sara .s-bulb { animation:saraBulb 3.4s ease-in-out infinite; }
@keyframes saraBulb { 0%, 100% { opacity:1; } 50% { opacity:.4; } }

.ask-bot { width:28px; height:28px; }
.ask-av  { padding:0; overflow:hidden; background:none; box-shadow:none; }
.ask-av .sara { width:100%; height:100%; }

@media (prefers-reduced-motion: reduce) {
  .sara .s-lid, .sara .s-bulb { animation:none; }
}

/* ------------------------------------------------------------------ Sara, photographed */
/* The owner had an avatar made for her (21 Sep 2026) - a South Indian woman in a blue and white
   saree with a headset, hands in namaste. It is 7 KB as WebP against 59 as PNG, which is why it
   is WebP. The drawing stays underneath: it is in the page, so something is always there at once,
   and a phone that cannot fetch or cannot read the picture keeps it. */
.sara-wrap { position:relative; display:block; width:100%; height:100%; border-radius:50%;
  overflow:hidden; }
.sara-wrap .sara { position:absolute; inset:0; }
.sara-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%; opacity:0; transition:opacity .35s var(--ease); }
.sara-photo.in { opacity:1; }
.ask-av .sara-wrap { border-radius:14px; }

/* ------------------------------------------------------------------ Sara Maatru */
/* Her pregnancy, rebuilt 22 September 2026 after the owner looked at the first one and said
 * "still look feel flat". The fault was structural, not colour: six white cards of equal weight
 * stacked on grey, with no picture in any of them, so there was nothing for the eye to fall on.
 *
 * The week is now a full-bleed photograph with the ring drawn on it, the rest of the screen rises
 * over it on a lip, and the week's object arrives as a picture rather than a paragraph. That
 * overlap - one block sitting on top of another - is most of what reads as depth.
 *
 * The rose is the one this app already chose for the week block. No second palette. */
.pg-wrap { display:block; }

/* the week, edge to edge */
.pg-hero {
  position:relative; overflow:hidden; color:#fff;
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  padding:26px 20px 44px; background:#3D0A23;
}
.pg-ph { position:absolute; inset:0; background-size:cover; background-position:64% 46%; }
.pg-ph::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(110% 70% at 78% 2%, rgba(255,222,236,.30) 0%, rgba(255,222,236,0) 55%),
    linear-gradient(105deg, rgba(40,4,22,.58) 0%, rgba(40,4,22,.22) 56%, rgba(40,4,22,.04) 100%),
    linear-gradient(180deg, rgba(40,4,22,.04) 0%, rgba(40,4,22,.20) 50%, rgba(40,4,22,.72) 100%);
}
.pg-hero-in { position:relative; z-index:1; display:flex; align-items:center; gap:18px; }
.pg-hero .pg-ring-wrap { position:relative; flex:none; width:104px; height:104px; }
.pg-hero .pg-ring { width:104px; height:104px; transform:rotate(-90deg);
  filter:drop-shadow(0 6px 16px rgba(30,4,17,.45)); }
.pg-hero .pg-ring circle { fill:none; stroke-width:8; stroke-linecap:round; }
.pg-hero .pg-ring .pg-track { stroke:rgba(255,255,255,.26); }
.pg-hero .pg-ring .pg-fill { stroke:#fff; transition:stroke-dashoffset 1.1s var(--ease); }
.pg-hero .pg-mid b { font-size:35px; letter-spacing:-.05em; color:#fff; }
.pg-hero .pg-mid small { font-size:10px; letter-spacing:.16em; color:rgba(255,255,255,.76); }
.pg-facts { min-width:0; }
.pg-facts .cap { display:block; font-size:10.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.72); }
.pg-big { display:block; font-size:33px; font-weight:800; letter-spacing:-.045em; margin:4px 0 5px;
  text-shadow:0 2px 20px rgba(30,4,17,.4); }
.pg-big.at-term { font-size:27px; }
.pg-sub { display:block; font-size:13px; font-weight:700; color:rgba(255,255,255,.84); }
.pg-tri { display:inline-block; margin-top:10px; border-radius:999px; padding:6px 12px;
  font-size:11.5px; font-weight:800; color:#fff; background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* what is next rises over the picture */
.card.pg-plan {
  position:relative; z-index:2; margin-top:-22px; padding:16px 0 4px;
  box-shadow:0 2px 6px rgba(16,23,37,.07), 0 -10px 26px -18px rgba(61,10,35,.7);
}
.card.pg-plan > .cap { display:block; padding:0 16px; }
.card.pg-plan .pg-next { margin:0; padding:10px 16px 12px; border-top:0; display:grid; gap:2px; }
.card.pg-plan .pg-next li { display:flex; align-items:center; gap:13px; padding:9px 0; }
.card.pg-plan .pg-next li + li { border-top:1px solid var(--line-soft); }
/* The tiles that name a thing, in the style he sent on 22 Sep 2026 - a pack of 3D clay app
   icons. Four things make that look and none of them is a picture file: a soft rounded square, a
   light falling from the top, a shadow sitting under it, and a WHITE glyph rather than a coloured
   one. In CSS it loads instantly, takes our own colours and scales; a pack of flat PNGs does
   none of those. */
.pg-kind, .pg-due-ic, .pg-sg {
  --clay:#C9CFDA;
  position:relative; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--clay) 62%, #fff) 0%,
    var(--clay) 52%,
    color-mix(in srgb, var(--clay) 82%, #000) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.72),      /* the light on the top edge */
    inset 0 -3px 5px rgba(16,23,37,.16),        /* the turn of the bottom edge */
    0 6px 10px -5px color-mix(in srgb, var(--clay) 70%, transparent),
    0 1px 2px rgba(16,23,37,.10);
}
/* the sheen: a soft highlight across the upper half, the way a moulded thing catches a window */
.pg-kind::after, .pg-due-ic::after, .pg-sg::after {
  content:""; position:absolute; left:8%; right:8%; top:5%; height:44%; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.pg-kind > *, .pg-due-ic > *, .pg-sg > * { position:relative; z-index:1; }
.pg-kind .pg-ic, .pg-due-ic .pg-ic, .pg-sg .pg-ic {
  stroke-width:2; filter:drop-shadow(0 1px 1px rgba(16,23,37,.22));
}
/* color-mix is recent. A phone without it gets the same tile in flat colour: still a white glyph
   on its own hue, just without the moulded edge. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pg-kind, .pg-due-ic, .pg-sg { background:var(--clay);
    box-shadow:inset 0 2px 2px rgba(255,255,255,.55), 0 4px 8px -5px rgba(16,23,37,.5); }
}
.pg-kind { width:42px; height:42px; border-radius:14px; }
.k-visit { --clay:#E8709F; }
.k-inj   { --clay:#6E9FE8; }
.k-scan  { --clay:#54B189; }
.k-test  { --clay:#E0A44C; }
.pg-what small.plain { font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--muted); margin-top:2px; }
.pg-ic { display:block; }

/* due now - amber, never red: red belongs to one button */
.pg-due { display:flex; gap:12px; align-items:center; border-radius:var(--r-card); padding:14px;
  margin:0 0 12px; background:linear-gradient(170deg,#FFFAEF,#FFF4DF); border:1px solid #F3DDAD;
  box-shadow:0 10px 22px -16px rgba(138,83,0,.6); }
.pg-due-ic { width:42px; height:42px; border-radius:14px; --clay:#E0A44C; }
.pg-due-tx b { display:block; font-size:14.5px; font-weight:800; color:#6E4200; }
.pg-due-tx small { display:block; font-size:12.5px; font-weight:600; color:#8A5300; margin-top:2px; }

/* the week's object: printed on one cream and faded out before its own edge, so no rectangle
   shows. The pool under it is that same cream, which is what hides the join. */
.pg-sz { display:flex; align-items:center; gap:16px; }
.pg-sz-art { flex:none; width:112px; height:112px; position:relative; display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 50%, #F7EFE4 38%, rgba(247,239,228,0) 74%); }
.pg-sz-art img { width:100%; height:100%; object-fit:contain; display:block; }
.pg-sz-tx { min-width:0; }
.pg-obj { font-size:20px; font-weight:800; letter-spacing:-.03em; margin:4px 0 11px; line-height:1.2; }
.pg-nums { display:flex; gap:20px; }
.pg-num b { display:block; font-size:25px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; }
.pg-num .u { display:block; margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); }

/* the three tiles - the number is the artwork, and the change stands beside it */
.pg-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 12px; }
.pg-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(180deg,#fff,#FCFDFE); border:1px solid var(--line);
  border-radius:var(--r-inner); padding:12px 11px 11px; text-align:left; font:inherit;
  cursor:pointer; box-shadow:var(--shadow); overflow:hidden; }
.pg-tile::before { content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.9); }
.pg-tile:active { transform:translateY(1px); }
.pg-tile[disabled], .pg-tile.off { opacity:.72; cursor:default; }
.pg-tile .k { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); }
.pg-tile .v { display:block; font-size:22px; font-weight:800; letter-spacing:-.045em; margin-top:6px;
  line-height:1; font-variant-numeric:tabular-nums; }
.pg-tile .v i { font-style:normal; font-size:11px; font-weight:800; color:var(--faint);
  letter-spacing:.02em; }
.pg-tile .v.add { color:#E0568C; font-size:15.5px; letter-spacing:-.01em; padding:5px 0 2px; }
.pg-tile .v.small { color:var(--muted); font-size:13px; letter-spacing:-.01em; padding:5px 0 2px;
  line-height:1.3; }
.pg-tile .d { display:inline-block; margin-top:auto; padding:3px 6px; border-radius:7px;
  font-size:10.5px; font-weight:800; background:var(--line-soft); color:var(--muted); }
.pg-tile .d.up { background:var(--green-soft); color:var(--green); }
.pg-spark { display:block; width:100%; height:16px; margin-top:8px; }

/* how she feels: one tap, and no keyboard anywhere in her diary */
.pg-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.pg-chip { font:inherit; font-size:13.5px; font-weight:700; border:1.5px solid var(--line);
  background:#fff; color:var(--text); border-radius:999px; padding:0 15px; min-height:44px;
  cursor:pointer; transition:border-color .16s var(--ease), background .16s var(--ease); }
.pg-chip.on { border-color:#D63F7D; background:#FFF1F6; color:#9C1B50; font-weight:800;
  box-shadow:0 6px 16px -10px rgba(214,63,125,.9); }
.pg-seen { margin:13px 0 0; font-size:12.5px; font-weight:700; color:var(--faint); }

/* One red button, and it is a telephone link. Ask Sara floats over the bottom-right corner of
   every screen, so the words sit clear of her - the one button on this page that must never be
   half-covered at the moment it is wanted. */
.pg-sos { display:flex; align-items:center; justify-content:center; gap:9px; min-height:56px;
  padding:0 104px 0 18px;
  margin:4px 0 12px; border-radius:17px; text-decoration:none; color:#fff; font-size:16px;
  font-weight:800; background:linear-gradient(180deg,#DA3550,#A9152F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 6px rgba(140,16,38,.32),
             0 20px 36px -14px rgba(169,21,47,.95); }
.pg-sos:active { transform:translateY(1px); }
.pg-sos-ic { display:grid; place-items:center; }

/* the sheet she types a number into */
.pg-sheet-wrap { position:fixed; inset:0; z-index:80; }
.pg-scrim { position:absolute; inset:0; background:rgba(9,14,24,.52);
  animation:pgFade .2s ease-out both; }
.pg-sheet { position:absolute; left:0; right:0; bottom:0; max-width:560px; margin:0 auto;
  background:#fff; border-radius:28px 28px 0 0;
  padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  animation:pgSheetUp .3s var(--ease) both; box-shadow:0 -20px 50px -20px rgba(9,14,24,.6); }
@keyframes pgSheetUp { from { transform:translateY(100%); } to { transform:none; } }
@keyframes pgFade { from { opacity:0; } to { opacity:1; } }
.pg-grab { display:block; width:42px; height:4px; border-radius:99px; background:#DFE3EA;
  margin:-6px auto 14px; }
.pg-sheet h2 { font-size:20px; font-weight:800; letter-spacing:-.025em; margin:0 0 2px; }
.pg-done { display:block; width:100%; background:none; border:0; font:inherit; font-size:14.5px;
  font-weight:800; color:var(--muted); padding:16px 0 4px; cursor:pointer; }
.pg-step { display:flex; align-items:center; gap:14px; justify-content:center; margin:10px 0 4px; }
.pg-step button { width:58px; height:58px; border-radius:18px; border:1.5px solid var(--line);
  background:#fff; font:inherit; font-size:26px; font-weight:800; color:#9C1B50; cursor:pointer; }
.pg-step .val { min-width:136px; text-align:center; font-size:38px; font-weight:800;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.pg-step .val i { font-style:normal; font-size:15px; font-weight:800; color:var(--faint);
  margin-left:4px; }
.pg-bp { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0; }
.pg-bp input { font:inherit; font-size:30px; font-weight:800; width:104px; text-align:center;
  padding:12px 6px; border:1.5px solid #D6DAE1; border-radius:16px; letter-spacing:-.03em;
  margin:0; min-height:0; }
.pg-bp span { font-size:26px; font-weight:800; color:var(--faint); }
.btn.pg-save { background:linear-gradient(180deg,#F075A3,#E0568C);
  box-shadow:0 2px 4px rgba(168,34,90,.24), 0 14px 26px -12px rgba(224,86,140,.75); }

@media (prefers-reduced-motion: reduce) {
  .pg-hero .pg-ring .pg-fill { transition:none; }
  .pg-sheet, .pg-scrim { animation:none; }
}

/* ------------------------------------------------------------------ the call screen */
/* "danger loop make call to hospital" (the owner, 22 September 2026). So: no ward queue, no form,
   no triage. One screen, the hospital's own number, and the twelve signs underneath as reasons to
   call rather than boxes to tick - a list she could tick would promise somebody at the other end
   reading it, and there is nobody at the other end but the telephone. */
.pg-danger { position:fixed; inset:0; z-index:90; overflow-y:auto; color:#fff;
  /* a flat colour under the gradients: on a phone that will not paint one, this screen still
     covers what is behind it rather than letting the home screen show through */
  background-color:#8C1026;
  background-image:radial-gradient(90% 60% at 20% 0%, #C62744 0%, rgba(198,39,68,0) 62%),
             linear-gradient(170deg,#A9152F,#6E0C20); animation:pgFade .18s ease-out both; }
.pg-danger-in { max-width:560px; margin:0 auto;
  padding:26px 18px calc(30px + env(safe-area-inset-bottom)); }
.pg-danger h2 { font-size:25px; font-weight:800; letter-spacing:-.035em; margin:6px 0 5px; }
.pg-danger .sub { margin:0 0 16px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.88); }
.pg-danger .sub.why { margin:22px 0 10px; }
.pg-call { display:flex; align-items:center; gap:13px; background:#fff; color:#A6132C;
  border-radius:20px; padding:16px; font-weight:800; font-size:14px; text-decoration:none;
  box-shadow:0 20px 38px -16px rgba(0,0,0,.75); }
.pg-call .n { font-size:21px; letter-spacing:-.02em; }
.pg-call .ic { flex:none; width:46px; height:46px; border-radius:50%; background:#FDECEF;
  display:grid; place-items:center; }
.pg-signs { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pg-signs li { display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:700;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:14px;
  padding:11px 14px; }
/* On the red screen the tiles are a paler clay of the same red, so twelve of them read as one
   family and the white glyph still carries. */
.pg-sg { width:38px; height:38px; border-radius:13px; --clay:#D8556B; }
.pg-danger .pg-ic { stroke-width:1.85; }
.pg-danger-close { display:block; width:100%; background:none; border:0; font:inherit;
  font-size:14.5px; font-weight:800; color:rgba(255,255,255,.85); padding:18px 0 4px;
  cursor:pointer; }

/* ------------------------------------------------------------------ the bar at the bottom */
/* "Still that icons i dont feel them as good", and then: "use these icons for the dashboard also
   - home and reports like that" (the owner, 22 Sep 2026), pointing at the clay pack.
 *
 * So the bar is moulded like everything else: one tile per tab, one hue per tab, a white glyph on
 * each. The tile is drawn on the <svg> itself - it takes a background and a padding like any box -
 * so not a line of JavaScript changes.
 *
 * The live tab keeps what it already had: the curtain cut from the bar, and the solid glyph. Its
 * tile is the bright one; the others sit back a little, so the bar still says where she is
 * without needing a seventh colour to say it. */
.tabs-in .tab svg {
  --clay:#9AA6B8;
  width:34px; height:34px; padding:6px; border-radius:11px; color:#fff;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--clay) 62%, #fff) 0%,
    var(--clay) 52%,
    color-mix(in srgb, var(--clay) 82%, #000) 100%);
  box-shadow:
    inset 0 1.5px 1.5px rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(16,23,37,.16),
    0 4px 7px -4px color-mix(in srgb, var(--clay) 70%, transparent);
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
/* one hue each - Home wears the brand colour, the rest are the app's own accents */
.tabs-in .tab[data-go="home"]    svg { --clay:#F7873C; }
.tabs-in .tab[data-go="reports"] svg { --clay:#5C93DE; }
.tabs-in .tab[data-go="bills"]   svg { --clay:#4FAE84; }
.tabs-in .tab[data-go="diet"]    svg { --clay:#E0A44C; }
.tabs-in .tab[data-go="offers"]  svg { --clay:#E8709F; }
.tabs-in .tab[data-go="more"]    svg { --clay:#8E95A6; }
/* the ones she is not on sit back: quieter, and a hair smaller */
.tabs-in .tab:not(.on) svg { filter:saturate(.72) brightness(1.04); transform:scale(.94); }
.tabs-in .tab.on svg { transform:translateY(-1px); }
.tabs-in .tab span { font-size:11px; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .tabs-in .tab svg { background:var(--clay);
    box-shadow:inset 0 1.5px 1.5px rgba(255,255,255,.55), 0 3px 6px -4px rgba(16,23,37,.5); }
}

/* the family list: why she is here on a day with no visit */
.pill.preg { background:#FFF1F6; color:#9C1B50; }

/* The telephone, when a reading of hers is outside the thresholds. Red, because it is the same
   answer as the red button - ring us - and not a colour she has to interpret. */
.btn.pg-ring { background:linear-gradient(180deg,#DA3550,#A9152F); color:#fff; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px -14px rgba(169,21,47,.9); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MAATRU, THE REST OF IT (Dr. Ranadheer, 27 September 2026)
   Contractions, her weight as a line, the week-by-week calendar, kegels and the bump.

   AND ITS OWN COLOURS. "Don't fix with hospital colours only" — his note the same afternoon.
   The hospital's orange and blue are a signboard over a door; this is a screen a woman opens in
   bed at two in the morning. So Maatru keeps a palette of its own — a deep plum, a berry, a
   blush, warm sand, and one green for the things that are hers rather than the hospital's. The
   red button and the tab bar still wear the app's colours, because those belong to the app
   around it.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --m-plum:#331433;          /* the dark: type on cream, and the foot of every gradient */
  --m-berry:#8E2455;         /* the one that carries an action */
  --m-berry-lit:#B23A6B;
  --m-rose:#E07AA0;          /* alive, never type */
  --m-blush:#FCEEF4;         /* the ground a Maatru block sits on */
  --m-blush-line:#F2DCE6;
  --m-sand:#FBF3EA;          /* warm, for the things she keeps */
  --m-leaf:#2F7D68;          /* HERS: her weight, her exercises. Not a hospital colour */
  --m-leaf-soft:#E6F2EE;
  --m-gold:#B8862B;          /* a hairline and a streak, nothing more */
  --m-ink:#4A2E42;           /* muted type inside a Maatru block */
}
.pg2 { margin-top:14px; }

/* the segmented control */
.pg2-tabs {
  display:flex; gap:2px; padding:3px; margin:0 0 12px;
  background:linear-gradient(180deg, var(--m-blush) 0%, #F7E7EF 100%);
  border-radius:999px; border:1px solid var(--m-blush-line);
}
.pg2-tabs button {
  flex:1; min-width:0; border:0; background:none; cursor:pointer;
  padding:9px 6px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--m-ink); letter-spacing:.01em;
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.pg2-tabs button.on {
  background:#fff; color:var(--m-berry);
  box-shadow:0 1px 3px rgba(51,20,51,.14), 0 0 0 1px rgba(142,36,85,.10);
}

/* week by week */
.pg2-week { background:linear-gradient(180deg, #fff 0%, var(--m-sand) 100%); }
.pg2-weeks {
  display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; margin:8px 0 4px;
  scrollbar-width:none;
}
.pg2-weeks::-webkit-scrollbar { display:none; }
.pg2-chip {
  flex:none; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--m-blush-line); background:#fff; color:var(--m-ink);
  font:inherit; font-size:12.5px; font-weight:600;
  transition:transform .14s var(--ease);
}
.pg2-chip.now { border-color:var(--m-gold); color:var(--m-gold); }
.pg2-chip.on {
  background:linear-gradient(160deg, var(--m-berry-lit) 0%, var(--m-berry) 100%);
  border-color:transparent; color:#fff; transform:scale(1.06);
  box-shadow:0 4px 10px rgba(142,36,85,.28);
}
.pg2-note h3 {
  margin:12px 0 2px; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--m-berry); font-weight:700;
}
.pg2-note p { margin:0; font-size:15px; line-height:1.55; color:var(--m-plum); }
.pg2-draft {
  display:block; margin-top:12px; padding-top:9px;
  border-top:1px dashed var(--m-blush-line); font-size:12px; color:var(--m-ink);
}

/* the contraction timer */
.pg2-contr { background:linear-gradient(180deg, #fff 0%, var(--m-blush) 140%); }
.pg2-timer { display:flex; flex-direction:column; align-items:center; margin:8px 0 4px; }
.pg2-big {
  width:190px; height:190px; border-radius:50%; cursor:pointer;
  border:0; color:#fff; font:inherit; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; position:relative;
  background:
    radial-gradient(90% 90% at 32% 16%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(155deg, var(--m-berry-lit) 0%, var(--m-plum) 96%);
  box-shadow:0 16px 34px rgba(51,20,51,.30), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s var(--ease), box-shadow .2s var(--ease);
}
.pg2-big::after {
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(224,122,160,.34);
}
.pg2-big:active { transform:scale(.97); }
.pg2-timer.on .pg2-big {
  background:
    radial-gradient(90% 90% at 32% 16%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(155deg, var(--m-rose) 0%, var(--m-berry) 96%);
  animation:pg2pulse 1.9s ease-in-out infinite;
}
@keyframes pg2pulse {
  0%,100% { box-shadow:0 16px 34px rgba(142,36,85,.32), inset 0 1px 0 rgba(255,255,255,.22); }
  50%     { box-shadow:0 16px 48px rgba(224,122,160,.58), inset 0 1px 0 rgba(255,255,255,.22); }
}
@media (prefers-reduced-motion: reduce) { .pg2-timer.on .pg2-big { animation:none; } }
.pg2-big-lab { font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.88; }
.pg2-big-num { font-size:44px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pg2-c-help { margin:12px 0 0; font-size:13.5px; color:var(--m-ink); text-align:center; max-width:30ch; }
.pg2-c-hour {
  margin:14px 0 0; font-size:14px; font-weight:700; color:var(--m-berry); text-align:center;
}
.pg2-c-avg { margin:2px 0 0; font-size:13px; color:var(--m-ink); text-align:center; }
.pg2-c-list { list-style:none; margin:14px 0 0; padding:0; }
.pg2-c-list li {
  display:grid; grid-template-columns:auto 1fr auto 1fr; gap:4px 8px; align-items:baseline;
  padding:8px 0; border-top:1px solid var(--m-blush-line); font-size:14px;
}
.pg2-c-list li:first-child { border-top:0; }
.pg2-c-len, .pg2-c-gap { font-weight:700; font-variant-numeric:tabular-nums; color:var(--m-plum); }
.pg2-c-lab { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--m-ink); opacity:.72; }
.pg2-c-empty { display:block; color:var(--m-ink); font-size:14px; padding:10px 0; }
.pg2-noadvice {
  margin:14px 0 0; padding:11px 13px; border-radius:12px;
  background:var(--m-sand); border-left:3px solid var(--m-gold);
  color:var(--m-plum); font-size:12.5px; line-height:1.5;
}

/* her weight — HER colour, the green, not a hospital one */
.pg2-wtop { display:flex; align-items:baseline; gap:6px; margin:6px 0 2px; }
.pg2-wtop b { font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--m-plum); }
.pg2-wtop i { font-style:normal; font-size:14px; color:var(--m-ink); }
.pg2-wtop span { margin-left:auto; font-size:12.5px; color:var(--m-ink); }
.pg2-chart { width:100%; height:auto; display:block; margin:6px 0 2px; overflow:visible; }
.pg2-grid { stroke:var(--m-blush-line); stroke-width:1; }
.pg2-ax { font-size:9px; fill:var(--m-ink); opacity:.7; letter-spacing:.04em; }
.pg2-area { fill:rgba(47,125,104,.12); stroke:none; }
.pg2-line { fill:none; stroke:var(--m-leaf); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pg2-dot { fill:#fff; stroke:var(--m-leaf); stroke-width:2; }
.pg2-gained { margin:4px 0 0; font-size:13px; color:var(--m-leaf); font-weight:600; }
.pg2-empty { margin:6px 0 0; color:var(--m-ink); font-size:14px; line-height:1.55; }

/* kegels */
.pg2-kegel { background:linear-gradient(180deg, #fff 0%, var(--m-leaf-soft) 150%); }
.pg2-help { margin:2px 0 10px; font-size:14px; color:var(--m-ink); line-height:1.5; }
.pg2-keg { display:flex; align-items:center; gap:12px; }
.pg2-keg-go {
  background:linear-gradient(160deg, #3E9C84 0%, var(--m-leaf) 100%); color:#fff; border:0;
  box-shadow:0 6px 16px rgba(47,125,104,.26);
}
.pg2-streak { font-size:12.5px; color:var(--m-gold); font-weight:700; }
.pg2-keg-ring {
  margin:14px auto 2px; width:132px; height:132px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:var(--m-leaf-soft); border:3px solid var(--m-blush-line);
  transition:transform 1s linear, border-color .3s;
}
.pg2-keg-ring.hold { border-color:var(--m-leaf); transform:scale(1.06); }
.pg2-keg-ring.rest { border-color:var(--m-blush-line); transform:scale(1); }
.pg2-keg-ring b { font-size:15px; color:var(--m-leaf); font-weight:700; }

/* the bump */
.pg2-bump { background:linear-gradient(180deg, #fff 0%, var(--m-sand) 130%); }
.pg2-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none; }
.pg2-strip::-webkit-scrollbar { display:none; }
.pg2-shot { flex:none; width:118px; margin:0; }
.pg2-shot img {
  width:118px; height:158px; object-fit:cover; border-radius:14px; display:block;
  border:1px solid var(--m-blush-line); background:var(--m-blush);
  box-shadow:0 4px 12px rgba(51,20,51,.10);
}
.pg2-shot figcaption {
  display:flex; align-items:baseline; gap:6px; margin-top:5px;
  font-size:11.5px; color:var(--m-ink);
}
.pg2-rm { margin-left:auto; border:0; background:none; padding:0; cursor:pointer;
  color:var(--m-berry); font:inherit; font-size:11.5px; }
.pg2-add { display:inline-block; margin-top:4px; }
.pg2-add .btn { border-color:var(--m-blush-line); color:var(--m-berry); }
.pg2-private { margin:10px 0 0; font-size:12px; color:var(--m-ink); line-height:1.5; }

/* the week's object, inside the calendar (his note, 27 September 2026: it stays) */
.pg2-size {
  display:flex; align-items:center; gap:14px; margin:10px 0 2px; padding:12px 14px;
  border-radius:16px; background:linear-gradient(135deg, #fff 0%, var(--m-blush) 120%);
  border:1px solid var(--m-blush-line);
}
.pg2-size-art { flex:none; width:74px; height:74px; display:grid; place-items:center; }
.pg2-size-art img { max-width:74px; max-height:74px; display:block; }
.pg2-size-tx { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pg2-size-tx b { font-size:18px; color:var(--m-plum); letter-spacing:-.01em; }
.pg2-size-tx span { font-size:13px; color:var(--m-ink); }
.pg2-size-tx i { font-style:normal; font-weight:700; color:var(--m-berry); }