/* ============================================================
   Patient app prototype — device frames + in-app UI

   Egypt is ~91% Android, so the shared UI is Material-leaning and
   the iOS frame adds a native veneer (floating translucent tab bar,
   centred nav title, chevron back) rather than the other way round.
   ============================================================ */

body.lab {
  min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(60vw 40vw at 78% -8%, rgba(var(--brand-rgb), .13), transparent 62%),
    radial-gradient(44vw 34vw at 4% 2%, rgba(var(--accent-rgb), .07), transparent 60%),
    linear-gradient(180deg, var(--c-sand-50), #fff 42%);
  background-attachment: fixed;
}
[data-theme="dark"] body.lab { background: var(--c-sand-950); }

/* -------------------------------------------------------- chrome */
.lab-top {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: rgba(255,255,255,.8); backdrop-filter: blur(16px) saturate(1.3);
  border-block-end: 1px solid var(--border-subtle);
}
[data-theme="dark"] .lab-top { background: rgba(48,40,29,.86); }
.lab-top__in {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px; flex-wrap: wrap; padding-block: var(--s-2);
}
.lab-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.lab-brand img { width: 38px; height: 38px; }
.lab-brand b { font-size: 14px; display: block; line-height: 1.25; }
.lab-brand span { font-size: 11.5px; color: var(--text-muted); }
.lab-tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; flex-wrap: wrap; }
.lab-top__toggle { display: none; }   /* small screens only */

.tool {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding-inline: var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.tool:hover { border-color: var(--border-default); }
.tool.on { background: var(--action-primary); border-color: transparent; color: var(--text-on-brand); }
.tool.warn.on { background: var(--c-amber-600); }
select.tool { padding-inline-end: var(--s-4); }

/* --------------------------------------------------------- stage
   The whole lab is a single viewport-height surface: nothing scrolls
   except the app body inside each phone. A presentation that needs the
   reviewer to scroll to see the device is a broken presentation. */
body.lab { height: 100dvh; overflow: hidden; }

.stage {
  flex: 1; min-height: 0;
  display: flex; gap: clamp(var(--s-4), 3vw, var(--s-7));
  align-items: flex-start; justify-content: center;
  padding: var(--s-5) var(--s-4);
}

/* `zoom` (not transform: scale) because it scales at LAYOUT level — a
   transform leaves the original footprint behind and the page still
   scrolls. JS sets --fit from the height actually available. */
.device { zoom: var(--fit, 1); }

/* screen index rail */
.rail {
  position: sticky; inset-block-start: 88px;
  width: 216px; flex: none;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--s-3); box-shadow: var(--shadow-sm);
  max-height: calc(100dvh - 120px); overflow-y: auto;
}
.rail h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); padding: var(--s-2) var(--s-3) var(--s-2);
}
html[lang="ar"] .rail h3 { text-transform: none; letter-spacing: 0; }
.rail button {
  display: block; width: 100%; text-align: start;
  padding: 9px var(--s-3); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.rail button:hover { background: var(--surface-sunken); }
.rail button.on { background: var(--surface-brand-soft); color: var(--text-brand); font-weight: 700; }
.rail hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin: var(--s-2) var(--s-3); }
@media (max-width: 1180px) { .rail { display: none; } }

/* ------------------------------------------------------ devices
   One device on stage at a time. With a unified UI a second frame
   shows the same screen twice, which reads as padding — the
   cross-platform point is made by the home-screen view and the
   store badges instead. The switcher flips between them. */
.device { flex: none; display: none; }
.device.is-active { display: block; }
/* the rail must not force the stage taller than the viewport */
.rail { max-height: calc(100dvh - 130px); }
.device__label {
  text-align: center; margin-block-start: var(--s-4);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.device__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-sand-300); }

.device__frame {
  position: relative; background: #0d0b08;
  box-shadow: 0 44px 88px rgba(24,18,10,.30), 0 12px 28px rgba(24,18,10,.16),
              0 0 0 1.5px rgba(255,255,255,.09) inset;
}
.device--ios .device__frame { width: 393px; padding: 11px; border-radius: 56px; }
.device--android .device__frame { width: 412px; padding: 9px; border-radius: 38px; }

/* side buttons */
.device__frame::before, .device__frame::after {
  content: ""; position: absolute; background: #262019; border-radius: 3px;
}
.device--ios .device__frame::before { inset-inline-start: -3px; inset-block-start: 132px; width: 3px; height: 62px; }
.device--ios .device__frame::after  { inset-inline-end: -3px;  inset-block-start: 158px; width: 3px; height: 96px; }
.device--android .device__frame::before { inset-inline-end: -3px; inset-block-start: 118px; width: 3px; height: 44px; }
.device--android .device__frame::after  { inset-inline-end: -3px; inset-block-start: 176px; width: 3px; height: 74px; }

.device__screen {
  position: relative; overflow: hidden; background: var(--app-bg, #F7F6F4);
  display: flex; flex-direction: column;
}
.device--ios .device__screen { height: 830px; border-radius: 46px; }
.device--android .device__screen { height: 892px; border-radius: 30px; }

/* Dynamic Island / hole punch.
   These are positioned against the FRAME, which is inset by its own padding
   (11px iOS / 9px Android). Offsetting only ~10px left the island straddling
   the bezel instead of sitting inside the screen — it needs padding + inset.
   Real geometry at 393pt: ~125x36, roughly 11pt below the screen's top edge. */
.device__island {
  position: absolute; inset-block-start: 22px; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 12;
  background: #000; border-radius: 19px; width: 125px; height: 36px;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08);
}
/* the camera lens, faintly, at the trailing end of the island */
.device__island::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 9px;
  transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1d2b38, #05080b 70%);
}
html[dir="rtl"] .device__island { transform: translateX(50%); }

.device__punch {
  position: absolute; inset-block-start: 20px; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 12;
  background: radial-gradient(circle at 35% 35%, #1d2b38, #04070a 72%);
  border-radius: 50%; width: 13px; height: 13px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}
html[dir="rtl"] .device__punch { transform: translateX(50%); }

/* --------------------------------------------------- status bar */
.statusbar {
  height: 50px; flex: none; z-index: 11;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 26px; padding-block-start: 8px;
  font-size: 13.5px; font-weight: 650; color: var(--app-fg, #1B1710);
  font-variant-numeric: tabular-nums;
  /* Both platforms DO mirror the status bar under an RTL system locale,
     so this follows document direction. The clock digits stay LTR on
     their own as a neutral-free numeric run. */
}
.device--android .statusbar { height: 38px; padding-inline: 18px; font-size: 12.5px; font-weight: 600; }
.statusbar__right { display: flex; align-items: center; gap: 5px; }

/* home indicator / gesture pill */
.device__homebar {
  position: absolute; inset-block-end: 8px; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 12;
  width: 138px; height: 5px; border-radius: 3px;
  background: var(--app-fg, #1B1710); opacity: .32; pointer-events: none;
}
html[dir="rtl"] .device__homebar { transform: translateX(50%); }
.device--android .device__homebar { width: 108px; height: 3.5px; inset-block-end: 7px; }

/* ======================================================= app UI
   Direction D ("White"): a pure white page, groups as tiles in a cool
   light grey, one blue card for the next visit, blue for selection, and
   a frosted tab bar floating over the content. No shadows on tiles or
   cards; the only shadow is under the floating bar. Readex Pro is the
   display face inside the app only — the website and admin keep theirs. */
.appview {
  flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative;
  --app-bg: #FFFFFF; --app-fg: #171A1C;
  --app-2: #4B5257;      /* secondary body */
  --app-3: #7C838A;      /* muted / captions */
  --app-4: #9AA1A6;      /* faint / hints */
  --app-tile: #F4F6F6;   /* grouped content (sampled from the reference app) */
  --app-tile-2: #E8ECEC; /* a tile inside a tile, segmented tracks on tiles */
  --app-on-tile: #FFFFFF;/* white elements that sit on a tile: icon discs, checks, pills */
  --app-line: #E3E7E7;   /* hairlines between rows inside a tile */
  --app-ring: #CDD3D3;   /* unchecked boxes, switch tracks */
  --app-card: var(--app-tile);
  --app-link: var(--c-blue-600);        /* text-weight brand blue — lifts on dark */
  --app-accent: var(--c-blue-600);      /* filled brand blue: the card, selection */
  --app-accent-ink: var(--c-blue-800);  /* blue text on white inside the card */
  --app-on-accent: #FFFFFF;
  --font-display: "Readex Pro", var(--font-ui);
  color: var(--app-fg);
  background: var(--app-bg);
  font-size: 15px;
}
.device--ios .appview { font-size: 15.5px; }
html[lang="ar"] .appview { font-size: 16px; }
/* The status bar is a sibling of the app view, so the screen behind both
   has to be the same white — otherwise a grey band shows above the app. */
.device__screen { background: #FFFFFF; }

/* app bar — start-aligned title in the display face, grey disc back button */
.appbar {
  flex: none; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 20px var(--s-2);
  min-height: 56px; background: var(--app-bg); position: relative; z-index: 6;
}
.appbar__t { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.appbar__back {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; color: var(--app-fg); background: var(--app-tile); flex: none;
  margin-inline-end: var(--s-1);
}
.appbar__back:hover { background: var(--app-tile-2); }
.appbar__act { margin-inline-start: auto; display: flex; gap: 4px; }

/* body — clears the floating tab bar at the bottom */
.appbody { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 108px; }
.appbody::-webkit-scrollbar { width: 0; }

/* tab bar — a frosted capsule floating over the content on both platforms.
   Translucency is confined to this one strip; everything behind it is
   opaque, so the blur stays cheap on entry-level Android. */
.tabbar {
  position: absolute; inset-inline: 14px; inset-block-end: 20px; z-index: 8;
  display: flex; padding: 5px; border-radius: var(--r-full);
  background: rgba(244, 246, 246, .9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(23, 26, 28, .10), 0 0 0 1px rgba(255, 255, 255, .7) inset;
}
.device--ios .tabbar { inset-block-end: 24px; }
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 50px; padding: 4px 2px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 600; color: var(--app-3);
  transition: background .18s var(--ease), color .18s var(--ease);
}
html[lang="ar"] .tabbar button { font-size: 11px; }
.tabbar button.on { background: var(--app-on-tile); color: var(--app-accent-ink); box-shadow: 0 1px 3px rgba(23, 26, 28, .08); }
.tabbar__ico { display: grid; place-items: center; }

/* =============================================== phone home screen
   The white-label money shot: the clinic's icon and name on a real
   home screen. Surrounding icons are generic function names only. */
.appview--os { padding: 0; background: none; }
.sb {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 58px 18px 0;
}
.sb--ios {
  background:
    radial-gradient(90% 55% at 22% 8%, rgba(255, 255, 255, .30), transparent 60%),
    linear-gradient(165deg, var(--c-blue-800) 0%, var(--c-blue-600) 34%, #6FA8B8 68%, #C9B79A 100%);
}
.sb--android {
  background:
    radial-gradient(80% 45% at 78% 4%, rgba(255, 255, 255, .22), transparent 62%),
    linear-gradient(180deg, var(--c-blue-950) 0%, var(--c-blue-800) 42%, #7FA894 78%, #D3C2A4 100%);
}

.sb__widget {
  color: #fff; margin-block-end: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.sb__widget b { display: block; font-size: 30px; font-weight: 700; line-height: 1.05; font-family: var(--font-display); }
.sb__widget span { font-size: 12.5px; opacity: .92; }

.sb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.sb__app { text-align: center; padding: 0; }
.sb__ic {
  display: block; width: 60px; height: 60px; margin-inline: auto;
  border-radius: 14px;                      /* ~22.4% — iOS squircle proportion */
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}
.sb__lb {
  display: block; margin-block-start: 6px;
  font-size: 10.5px; font-weight: 500; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb__ic--ours { padding: 0; background: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .34); position: relative; }
.sb__ic--ours img { width: 60px; height: 60px; border-radius: 14px; display: block; }
.sb__lb--ours { font-weight: 700; }
/* Uploaded logo (Brand kit): sits on the primary colour like a real icon. */
.sb__ic--ours.sb__ic--brand { background: var(--c-blue-600); display: grid; place-items: center; }
.sb__ic--ours.sb__ic--brand img { width: 42px; height: 42px; border-radius: 0; object-fit: contain; }

/* A soft halo so a reviewer's eye lands on the clinic app immediately. */
.sb__app--ours .sb__ic--ours::after {
  content: ""; position: absolute; inset: -7px; border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}
@media (prefers-reduced-motion: no-preference) {
  .sb__app--ours .sb__ic--ours::after { animation: sbPulse 2.6s var(--ease) infinite; }
  @keyframes sbPulse {
    0%, 100% { opacity: .95; transform: scale(1); }
    50%      { opacity: .45; transform: scale(1.06); }
  }
}

.sb__pages { display: flex; gap: 6px; justify-content: center; margin-block: auto 16px; }
.sb__pages i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.sb__pages i.on { background: #fff; }

.sb__search {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .9); border-radius: 24px;
  padding: 11px 16px; margin-block-end: 12px;
  font-size: 12.5px; font-weight: 500; color: #4A3F31;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}
.sb__dock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: rgba(255, 255, 255, .26); backdrop-filter: blur(18px);
  border-radius: 26px; padding: 12px 10px; margin-block-end: 20px;
}
.sb__dock--flat { background: none; backdrop-filter: none; padding: 0 6px; margin-block-end: 24px; }
.sb__dock .sb__lb { display: none; }

/* ------------------------------------------------------- tiles */
.a-card { background: var(--app-tile); border-radius: 24px; padding: var(--s-4); }
.a-card__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-block-end: 2px;
}
.a-card__h h3 { font-size: 15px; font-weight: 700; }
.a-card__h h3 small { font-size: 12px; font-weight: 500; color: var(--app-3); margin-inline-start: 6px; }
.a-card__h button, .a-card__h a { font-size: 12.5px; font-weight: 600; color: var(--app-link); min-height: 28px; display: inline-flex; align-items: center; }

.a-sec { margin-block-start: var(--s-5); }
.a-sec__h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-block-end: var(--s-3); padding-inline: 4px;
}
.a-sec__h h3 { font-size: 16px; font-weight: 700; }
.a-sec__h button, .a-sec__h a {
  font-size: 13px; font-weight: 600; color: var(--app-link);
  min-height: 28px; display: inline-flex; align-items: center; padding-inline: 2px;
}

/* ------------------------------------------------------ buttons */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding-inline: var(--s-5); border-radius: var(--r-full);
  font-weight: 700; font-size: 14.5px; width: 100%;
  background: var(--app-accent); color: var(--app-on-accent);
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.a-btn:active { transform: scale(.985); }
.a-btn--ghost { background: var(--app-tile); color: var(--app-link); }
.a-btn--soft { background: var(--app-on-tile); color: var(--app-link); box-shadow: inset 0 0 0 1.5px var(--app-line); }
.a-btn--sm { min-height: 40px; font-size: 13px; padding-inline: var(--s-4); width: auto; }
.a-btn--danger { background: var(--status-error-soft); color: var(--status-error); }

/* --------------------------------------------------------- rows */
.a-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; width: 100%; text-align: start;
}
.a-row + .a-row { border-block-start: 1px solid var(--app-line); }
.a-row__ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--app-on-tile); color: var(--app-link);
}
.a-row__ico--ok { color: var(--status-success); }
.a-row__ico--err { color: var(--status-error); }
.a-row__tx { flex: 1; min-width: 0; }
.a-row__tx b { display: block; font-size: 14.5px; font-weight: 600; }
.a-row__tx span { font-size: 12.5px; color: var(--app-3); }
.a-row__tx b span { font-size: inherit; color: inherit; }   /* a value inside the title ("19.1 kg") */
a.a-row, a.a-btn { text-decoration: none; }
a.a-row { color: inherit; }
.a-row__go { color: var(--app-4); flex: none; }
.a-row--danger { color: var(--status-error); }
.a-row--danger .a-row__ico { color: var(--status-error); }

/* appointment card — date tile + text column */
.appt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start; padding: 14px; }
.appt .a-row__go { align-self: center; }
.appt__date {
  flex: none; width: 56px; height: 60px; border-radius: 16px; background: var(--app-on-tile);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.appt__date b { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--app-link); letter-spacing: -.02em; }
.appt__date span { font-size: 10.5px; font-weight: 600; color: var(--app-3); margin-block-start: 4px; }
.appt__tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.appt__top { display: flex; align-items: center; gap: 8px; }
.appt__top b { font-size: 14.5px; font-weight: 700; }
.appt__top .a-chip { padding: 3px 9px; font-size: 11px; }
.appt__type { font-size: 12.5px; color: var(--app-2); }
.appt__meta { font-size: 12px; color: var(--app-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* initial-letter avatar — replaces the emoji faces */
.avi {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--app-on-tile); color: var(--app-link);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.avi--lg { width: 48px; height: 48px; font-size: 19px; }

/* -------------------------------------------------------- chips */
.a-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700;
  background: var(--app-tile-2); color: var(--app-2);
}
.a-chip--ok { background: var(--status-success-soft); color: var(--status-success); }
.a-chip--warn { background: var(--status-warning-soft); color: var(--status-warning); }
.a-chip--info { background: var(--surface-brand-soft); color: var(--text-brand); }
.a-chip--due { background: var(--status-error-soft); color: var(--status-error); }

/* ---------------------------------------------- the one blue card */
.a-hero-card {
  background: var(--app-accent); color: var(--app-on-accent);
  border-radius: 24px; padding: 18px;
}
.a-hero-card__l {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; opacity: .85;
}
.a-hero-card__chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16); opacity: 1;
}
.a-hero-card__d { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin-block: 10px 4px; }
.a-hero-card__m { font-size: 13px; opacity: .9; }
.a-hero-card .a-btn { margin-block-start: 14px; min-height: 46px; background: var(--app-on-tile); color: var(--app-accent-ink); font-size: 14px; }
.hero-acts { display: flex; gap: 8px; margin-block-start: 14px; }
.hero-acts .a-btn { flex: 1; margin-block-start: 0; }
.a-hero-card .a-btn.a-btn--onblue { background: rgba(255, 255, 255, .16); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }

.a-empty { text-align: center; padding: var(--s-7) var(--s-4); color: var(--app-3); }
.a-empty svg { margin-inline: auto; margin-block-end: var(--s-3); }
.a-empty b { display: block; font-size: 15px; color: var(--app-fg); margin-block-end: 5px; }
.a-empty p { font-size: 13px; }
.a-empty__ic {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--app-tile); color: var(--app-link); margin-inline: auto; margin-block-end: var(--s-4);
}

/* ------------------------------------------------ home pieces */
.home-top { display: flex; align-items: center; gap: 12px; padding-block: 12px 0; }
.home-top__g { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.home-top__d { font-size: 12.5px; color: var(--app-3); margin-block-start: 2px; }
.home-top__bell {
  margin-inline-start: auto; width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--app-tile); color: var(--app-fg); display: grid; place-items: center; position: relative;
}
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--app-tile); border-radius: 20px; padding: 14px 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--app-fg); text-align: center; min-height: 48px;
}
.qa__ic { color: var(--app-link); display: grid; place-items: center; }

/* Home: a count on a care icon shows only while something needs care */
.qa { position: relative; }
.qa__badge {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 10px;
  background: var(--app-accent); color: var(--app-on-accent);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--app-tile);
}

/* Home: current diagnoses as small tags under the child switcher */
.dxtags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.dxtag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-inline: 12px;
  border-radius: var(--r-full); background: var(--app-tile); color: var(--app-2);
  font-size: 13px; font-weight: 500;
}
.dxtag svg { color: var(--app-link); flex: none; }

/* Home: one-line next steps */
.stepline { padding-block: 8px; }
.stepline .a-row__ico { width: 36px; height: 36px; }
.stepline .a-row__tx b, .stepline .a-row__tx span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepline .a-row__tx b { font-size: 14px; }
.stepline--late .a-row__ico { background: var(--status-warning-soft); color: var(--status-warning); }
.stepline--late .a-row__tx span { color: var(--status-warning); }

/* child switcher — a segmented capsule; also used for day and filter pickers */
.kidbar {
  display: flex; gap: 4px; background: var(--app-tile); border-radius: var(--r-full);
  padding: 4px; overflow-x: auto; scrollbar-width: none; position: relative;
  overscroll-behavior-x: contain; scroll-behavior: smooth;
}
/* More children than fit: the bar scrolls sideways and fades at the edge
   that has more, so it's clear there is something to swipe to. */
.kidbar.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.kidbar.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.kidbar.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.kidbar.dragging { scroll-behavior: auto; cursor: grabbing; }
.kidbar::-webkit-scrollbar { height: 0; }
.kid {
  flex: 1 0 0; min-width: max-content; display: flex;   /* equal widths while they fit, then scroll */ align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 6px 12px; border-radius: var(--r-full);
  background: transparent; font-size: 13.5px; font-weight: 600; color: var(--app-2);
  white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease);
}
.kid.on { background: var(--app-accent); color: var(--app-on-accent); }
.kid__av { display: none; }
.kid--add { flex: 0 0 38px; padding: 0; color: var(--app-link); }
.kid--add .kid__av { display: grid; place-items: center; background: none; }

/* identity banner — wrong-child prevention (docs/03). Stays a warm tint so
   it reads as a notice, not as another grey tile. */
.idbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--status-warning-soft);
  border-radius: 16px; padding: 9px 12px; margin-block-end: var(--s-3);
}
.idbar__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--app-on-tile); color: var(--status-warning);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.idbar b { font-size: 13.5px; display: block; }
.idbar span { font-size: 11.5px; color: var(--status-warning); }

/* segmented control */
.seg { display: flex; gap: 4px; background: var(--app-tile); border-radius: var(--r-full); padding: 4px; margin-block: var(--s-3); }
.seg button {
  flex: 1; padding: 8px 4px; border-radius: var(--r-full); font-size: 13px; font-weight: 600;
  color: var(--app-2); min-height: 38px;
}
.seg button.on { background: var(--app-accent); color: var(--app-on-accent); }

/* slot grid */
.optgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt {
  padding: 11px 6px; border-radius: 16px; background: var(--app-tile);
  font-size: 13px; font-weight: 600; min-height: 46px; color: var(--app-fg);
  font-variant-numeric: tabular-nums;
}
.opt.on { background: var(--app-accent); color: var(--app-on-accent); }
.opt:disabled { opacity: .35; }

/* forms */
.a-field { margin-block-end: var(--s-3); }
.a-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--app-3); margin-block-end: 6px; padding-inline: 4px; }
.a-input {
  width: 100%; min-height: 50px; border-radius: 16px; padding: 0 var(--s-4);
  background: var(--app-tile); font-size: 15px; color: var(--app-fg);
}
.a-input::placeholder { color: var(--app-4); }
.a-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--app-accent); background: var(--app-on-tile); }

/* OTP — one real input, boxes are decoration (docs/01 D14) */
.otp { position: relative; margin-block: var(--s-4); }
.otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; letter-spacing: 2em; z-index: 2; }
.otp__boxes { display: flex; gap: 8px; direction: ltr; }
.otp__boxes i {
  flex: 1; height: 56px; border-radius: 16px; background: var(--app-tile);
  display: grid; place-items: center; font-size: 22px; font-weight: 700; font-style: normal;
}
.otp__boxes i.filled { box-shadow: inset 0 0 0 2px var(--app-accent); background: var(--app-on-tile); }

/* growth chart */
.chartwrap { background: var(--app-tile); border-radius: 24px; padding: var(--s-4) 10px var(--s-3); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--app-3); margin-block-start: var(--s-2); padding-inline: 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: block; }

/* learning cards */
.lrn { display: grid; gap: var(--s-3); }
.lrn__card { background: var(--app-tile); border-radius: 20px; display: flex; gap: var(--s-3); align-items: center; padding: 10px; }
.lrn__thumb {
  width: 60px; height: 60px; flex: none; border-radius: 16px;
  display: grid; place-items: center; font-size: 25px; background: var(--app-on-tile);
}
.lrn__card b { display: block; font-size: 14px; font-weight: 600; color: var(--app-fg); }
.lrn__card span { font-size: 12px; color: var(--app-3); }

/* task item — round check, blue when done */
.task { display: flex; gap: 12px; align-items: center; padding: 11px 0; }
.task + .task { border-block-start: 1px solid var(--app-line); }
.task__box {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--app-on-tile); box-shadow: inset 0 0 0 2px var(--app-ring);
  display: grid; place-items: center; color: transparent; transition: all .16s var(--ease);
}
.task.done .task__box { background: var(--app-accent); box-shadow: none; color: var(--app-on-accent); }
.task.done .task__tx b { color: var(--app-4); font-weight: 500; }
.task__tx b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.task__tx span { font-size: 11.5px; color: var(--app-3); }
.task-prog { height: 5px; border-radius: 3px; background: var(--app-on-tile); margin-block: 12px 2px; overflow: hidden; }
.task-prog i { display: block; height: 100%; background: var(--app-accent); border-radius: 3px; }

/* =====================================================================
   Following the doctor system: diagnoses, next steps, medicines, the
   Roshetta, the health record, notifications, billing and consent.
   Same language as the rest of the app: grey tiles, hairlines between
   rows, blue for actions, status colours only where they mean something.
   ===================================================================== */

.a-btn:disabled { opacity: .42; pointer-events: none; }
.a-card.muted { color: var(--app-3); font-size: 13px; line-height: 1.6; display: flex; gap: 8px; align-items: center; }
.a-sec__h h3 small { font-size: 12px; font-weight: 600; color: var(--app-3); margin-inline-start: 6px; }
.a-sec__h h3 .sec-late { color: var(--status-warning); }
.fine {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.6; color: var(--app-4); margin-block-start: var(--s-3);
}
.fine svg { flex: none; margin-block-start: 2px; }
.notice {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--status-warning-soft); color: var(--status-warning);
  border-radius: 16px; padding: 10px 12px; margin-block-end: var(--s-3);
  font-size: 12.5px; font-weight: 600; line-height: 1.55;
}
.notice svg { flex: none; margin-block-start: 1px; }
.notice--quiet { background: var(--app-tile); color: var(--app-2); font-weight: 500; }
.notice--quiet svg { color: var(--app-link); }
.lnk { color: var(--app-link); font-weight: 600; text-align: end; }
.lnk--pad { min-height: 44px; padding-inline: 8px; font-size: 13px; }
.kv .lnk { padding-block: 10px; margin-block: -10px; }
.iconbtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; margin: -8px; }
/* Notes for the people reviewing the prototype, shown with "Unconfirmed". */
body:not(.show-ph) .rv-note { display: none !important; }

/* the unread count on the bell */
.home-top__badge {
  position: absolute; inset-block-start: 3px; inset-inline-end: 1px;
  min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px;
  background: var(--app-accent); color: var(--app-on-accent);
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--app-bg);
}

/* allergy — the one always-red line: a safety flag, not a status */
.allergy {
  display: flex; gap: 8px; align-items: center;
  background: var(--status-error-soft); color: var(--status-error);
  border-radius: 16px; padding: 9px 12px; margin-block-end: var(--s-2);
  font-size: 12.5px; line-height: 1.45;
}
.allergy svg { flex: none; }
.allergy b { font-weight: 700; }

/* diagnosis rows */
.dx { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.dx + .dx { border-block-start: 1px solid var(--app-line); }
.dx__ic {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--app-on-tile); color: var(--app-link);
}
.dx__tx { flex: 1; min-width: 0; }
.dx__tx b { display: block; font-size: 14.5px; font-weight: 700; }
.dx__tx span { font-size: 12px; color: var(--app-3); }
.dx--past .dx__ic { color: var(--app-4); }
.dx--past .dx__tx b { color: var(--app-2); font-weight: 600; }
.dxline { display: flex; gap: 10px; align-items: center; color: var(--app-link); }
.dxline b { font-size: 14px; color: var(--app-fg); }

/* next steps */
.a-card.steps { padding-block: 2px; }
.step { padding-block: 12px; }
.step + .step { border-block-start: 1px solid var(--app-line); }
.step__main { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start; }
.step__main .a-row__go { align-self: center; }
.step__ic {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--app-on-tile); color: var(--app-link);
}
.step__tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.step__tx b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.step__tests { font-size: 12px; color: var(--app-2); line-height: 1.45; }
.step__when { font-size: 12px; color: var(--app-3); }
.step--late .step__ic { background: var(--status-warning-soft); color: var(--status-warning); }
.step--late .step__when { color: var(--status-warning); font-weight: 600; }
.step__act { padding-inline-start: 50px; margin-block-start: 9px; }
.step__act .a-btn { min-height: 36px; font-size: 12.5px; }

/* "Already done / Not done yet" and "Coming / Change" */
.qblk, .coming {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between;
  background: var(--app-on-tile); border-radius: 16px; padding: 10px 12px; margin-block-start: 10px;
  box-shadow: inset 0 0 0 1.5px var(--app-line);
}
.step .qblk { margin-inline-start: 50px; }
.qblk__q { display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--app-fg); }
.qblk__q svg { color: var(--app-link); flex: none; }
.qblk__b, .coming__b { display: flex; gap: 6px; margin-inline-start: auto; }
.qblk--compact, .coming--compact { background: none; box-shadow: none; padding: 0; margin-block-start: 8px; }
.qblk--compact .qblk__b, .coming--compact .coming__b { margin-inline-start: 0; }
.coming__q { font-size: 13px; font-weight: 700; }
.qblk--done, .coming--yes {
  justify-content: flex-start; background: var(--status-success-soft); color: var(--status-success);
  box-shadow: none; font-size: 12.5px; font-weight: 600;
}
.ans {
  min-height: 34px; padding-inline: 13px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; color: var(--app-link);
  background: var(--app-tile); white-space: nowrap;
}
.ans--yes { background: var(--app-accent); color: var(--app-on-accent); }
/* inside the blue next-visit card */
.coming--card { background: rgba(255, 255, 255, .14); box-shadow: none; color: var(--app-on-accent); margin-block-start: 12px; }
.coming--card .ans { background: rgba(255, 255, 255, .2); color: var(--app-on-accent); }
.coming--card .ans--yes { background: var(--app-on-tile); color: var(--app-accent-ink); }
.coming--card.coming--yes { background: rgba(255, 255, 255, .16); color: var(--app-on-accent); }

/* medicines */
.meds { display: grid; gap: 10px; }
.med { background: var(--app-tile); border-radius: 20px; padding: 13px 14px; }
.med__top { display: flex; gap: 10px; align-items: flex-start; }
.med__ic {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--app-on-tile); color: var(--app-link);
}
.med__id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.med__name { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.med__ar { font-size: 12px; color: var(--app-3); }
.med__how { font-size: 13px; color: var(--app-2); line-height: 1.55; margin-block: 8px 0; }
.med__src {
  display: inline-flex; align-items: center; gap: 6px; margin-block: 2px -8px; padding-block: 10px;
  font-size: 12px; font-weight: 600; color: var(--app-link);
}
.med__src .a-row__go { color: var(--app-link); }
.med__src--reg { color: var(--app-3); }
.med__ask {
  display: flex; gap: 7px; align-items: center; margin-block-start: 10px; padding: 9px 12px; border-radius: 14px;
  background: var(--status-warning-soft); color: var(--status-warning); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.med__ask svg { flex: none; }
.ctc__rm { display: block; margin-block: 6px -8px; margin-inline-start: auto; color: var(--status-error); }

/* when in the day: four slots, the ones that apply filled */
.sched { display: flex; gap: 5px; flex-wrap: wrap; margin-block-start: 10px; }
.sched i {
  font-style: normal; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-full);
  background: var(--app-on-tile); color: var(--app-4);
}
.sched i.on { background: var(--app-accent); color: var(--app-on-accent); }
.sched--none { font-size: 11.5px; color: var(--app-3); font-weight: 600; }

/* the Roshetta — a paper, so it stays white in both themes */
.rosh {
  --rosh-ink: #171A1C; --rosh-2: #4B5257; --rosh-line: #E3E7E7;
  direction: rtl; text-align: start; color: var(--rosh-ink);
  background: #FFFFFF; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--rosh-line), 0 6px 18px rgba(23, 26, 28, .06);
  font-size: 13px; line-height: 1.6;
}
.rosh__head {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-block-end: 2px solid var(--c-blue-600);
}
.rosh__who { display: grid; gap: 1px; }
.rosh__clinic { font-size: 11px; color: var(--c-blue-700); font-weight: 600; }
.rosh__doc { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; }
.rosh__spec { font-size: 11px; color: var(--rosh-2); }
.rosh__logo { width: 44px; height: 44px; flex: none; object-fit: contain; }
.rosh__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  padding: 9px 16px; font-size: 12px; color: var(--rosh-2); border-block-end: 1px solid var(--rosh-line);
}
.rosh__meta b { color: var(--rosh-ink); }
.rosh__dx { padding: 9px 16px 0; font-size: 12.5px; color: var(--rosh-2); }
.rosh__dx b { color: var(--rosh-ink); }
.rosh__rx { padding: 4px 16px 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--c-blue-600); }
.rosh__lines { margin: 0; padding: 2px 16px 6px; padding-inline-start: 34px; list-style: decimal; }
.rosh__lines li { padding-block: 6px; }
.rosh__lines li::marker { color: var(--rosh-2); font-variant-numeric: tabular-nums; }
.rosh__lines b { display: block; font-size: 13px; font-weight: 700; }
.rosh__lines span { display: block; font-size: 12.5px; color: var(--rosh-2); }
.rosh__lines--orders li { padding-block: 3px; }
.rosh__lines--orders b { font-weight: 600; }
.rosh__sub { padding: 8px 16px 0; font-size: 12px; font-weight: 700; color: var(--c-blue-700); }
.rosh__free { padding: 2px 16px 0; font-size: 12.5px; color: var(--rosh-2); }
.rosh__end {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 16px 16px 12px;
}
.rosh__next { font-size: 13px; color: var(--c-blue-700); }
.rosh__sign { font-size: 11px; color: var(--rosh-2); padding-inline-start: 46px; border-block-start: 1px solid var(--rosh-2); padding-block-start: 3px; }
.rosh__foot {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--c-blue-600); color: #fff; padding: 8px 16px; font-size: 11px;
}
.rosh-acts { display: flex; gap: 8px; margin-block-start: 12px; }
.rosh-acts .a-btn { flex: 1; min-height: 44px; font-size: 13.5px; }
.rx-en { display: grid; gap: 2px; padding-block: 10px; border-block-start: 1px solid var(--app-line); }
.rx-en b { font-size: 13.5px; }
.rx-en span { font-size: 12.5px; color: var(--app-2); }

/* key-value rows (summaries, invoices, profiles) */
.kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-block-end: 1px solid var(--app-line);
}
.kv:last-child { border-block-end: 0; }
.kv__k { font-size: 13px; color: var(--app-3); flex: none; }
.kv__v { font-size: 13.5px; font-weight: 600; text-align: end; }
.kv--total .kv__k { font-size: 14px; font-weight: 700; color: var(--app-fg); }
.kv--total .kv__v { font-size: 17px; font-weight: 700; color: var(--app-link); }
.kvcard { padding-block: 4px; }
.a-card.kvcard { padding-block: 4px; }
.inv-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 10px 6px; }
.inv-h b { font-size: 14px; }
.inv__amt { display: grid; gap: 4px; justify-items: end; flex: none; }
.inv__amt b { font-size: 13.5px; }
.inv__amt .a-chip { padding: 3px 9px; font-size: 10.5px; }

/* one step: header and the ordered tests */
.task-h { display: flex; gap: 10px; align-items: center; }
.task-h b { flex: 1; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.tests { margin: 10px 0 0; padding-inline-start: 50px; list-style: disc; font-size: 13px; color: var(--app-2); }
.tests li { padding-block: 2px; }

/* readings */
.rds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd { display: grid; gap: 4px; align-content: start; text-align: start; width: 100%; padding: 14px; }
.rd__h { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--app-3); }
.rd__h svg { color: var(--app-link); }
.rd__v { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--app-fg); line-height: 1.15; }
.rd__v small, .rd-head b small { font-size: 13px; font-weight: 600; color: var(--app-3); }
.rd__d { font-size: 11.5px; color: var(--app-4); }
.rd__f { margin-block: 2px; }
.rd .a-chip { justify-self: start; padding: 3px 9px; font-size: 10.5px; }
.rd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-end: 12px; padding-inline: 4px; }
.rd-head > span { display: grid; }
.rd-head b { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.rd-head span span { font-size: 12px; color: var(--app-3); }
.spark { display: block; }

/* a file, shown as a page */
.fileview {
  background: var(--app-tile); border-radius: 20px; padding: 18px;
  display: grid; justify-items: center; gap: 10px; font-size: 12px; color: var(--app-3);
}
.fileview__page {
  width: 132px; aspect-ratio: 1 / 1.35; background: #fff; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(23, 26, 28, .1); padding: 14px 12px; display: grid; align-content: start; gap: 7px;
  color: var(--c-blue-600);
}
.fileview__page svg { margin-block-end: 4px; }
.fileview__page i { display: block; height: 5px; border-radius: 3px; background: #E3E7E7; }
.fileview__page--full { aspect-ratio: 1 / 1.3; }

/* immunisation grid — scrolls sideways, vaccine names pinned */
.vx-sum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--app-3); margin-block: 2px 10px; padding-inline: 4px; }
.vx-sum b { font-size: 15px; color: var(--app-fg); }
.vx-sum__due b { color: var(--app-link); }
.vx-sum__late b { color: var(--status-warning); }
.vaxgrid { overflow-x: auto; background: var(--app-tile); border-radius: 20px; scrollbar-width: thin; }
.vaxgrid table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
.vaxgrid th, .vaxgrid td { padding: 7px 6px; text-align: center; white-space: nowrap; }
.vaxgrid thead th { font-size: 10.5px; font-weight: 700; color: var(--app-3); border-block-end: 1px solid var(--app-line); }
.vaxgrid tbody th, .vaxgrid thead th:first-child {
  position: sticky; inset-inline-start: 0; z-index: 1; background: var(--app-tile);
  text-align: start; font-weight: 600; font-size: 12px; color: var(--app-fg);
  padding-inline: 12px 8px; box-shadow: inset -1px 0 0 var(--app-line);
}
html[dir="rtl"] .vaxgrid tbody th, html[dir="rtl"] .vaxgrid thead th:first-child { box-shadow: inset 1px 0 0 var(--app-line); }
.vaxgrid tbody tr + tr > * { border-block-start: 1px solid var(--app-line); }
.vg {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; font-weight: 800; line-height: 1;
}
.vg--given { background: var(--status-success-soft); color: var(--status-success); }
.vg--family { background: var(--app-on-tile); color: var(--status-success); box-shadow: inset 0 0 0 1.5px var(--status-success); }
.vg--due { background: var(--app-on-tile); color: var(--app-link); box-shadow: inset 0 0 0 1.5px var(--app-link); }
.vg--late { background: var(--status-warning-soft); color: var(--status-warning); }
.vg--unknown { background: var(--app-on-tile); color: var(--app-3); box-shadow: inset 0 0 0 1.5px var(--app-ring); font-weight: 700; }
.vg--later { width: 6px; height: 6px; background: var(--app-ring); }
.vx-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-block-start: 10px; padding-inline: 4px; font-size: 11.5px; color: var(--app-3); }
.vx-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.vx-legend .vg { width: 18px; height: 18px; font-size: 11px; }

/* library */
.lrn__wrap--new .lrn__card { box-shadow: inset 0 0 0 1.5px rgba(var(--brand-rgb), .35); }
.lrn__wrap--new .lrn__card b::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--app-accent); margin-inline-start: 7px; vertical-align: middle;
}
.lrn-head { display: flex; gap: 12px; align-items: center; margin-block-end: var(--s-3); }
.lrn-head b { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.lrn-head span span { font-size: 12px; color: var(--app-3); }
.article p { font-size: 14px; line-height: 1.85; color: var(--app-2); }
.linkcard { display: flex; gap: 12px; align-items: center; color: var(--app-link); text-decoration: none; }
.linkcard b { display: block; font-size: 14px; color: var(--app-fg); }
.linkcard span span { font-size: 12px; color: var(--app-3); }
.player {
  display: grid; place-items: center; gap: 10px; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 20px; background: linear-gradient(160deg, var(--c-blue-700), var(--c-blue-900));
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.player__btn { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.player--on { place-items: stretch; grid-template-rows: 1fr auto; padding: 14px 16px; }
.player__mid { display: grid; place-items: center; }
.player--on .player__btn { color: #fff; }
.player__bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.player__bar i { display: block; height: 100%; width: 0; background: #fff; animation: play-prog 60s linear forwards; }
.player__time { display: flex; justify-content: space-between; margin-block-start: 6px; font-size: 11.5px; }
@keyframes play-prog { to { width: 100%; } }

/* billing */
.owe {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--status-error-soft); color: var(--status-error);
  border-radius: 18px; padding: 10px 10px 10px 14px; font-size: 13.5px;
}
html[dir="rtl"] .owe { padding: 10px 14px 10px 10px; }
.owe > span { display: flex; gap: 8px; align-items: center; }
.owe .a-btn { min-height: 36px; }
.owe--ok { background: var(--status-success-soft); color: var(--status-success); justify-content: flex-start; padding: 12px 14px; font-weight: 600; }

/* contacts */
.ctc__h { display: flex; gap: 10px; align-items: center; }
.ctc__n { flex: 1; min-width: 0; }
.ctc__n b { display: block; font-size: 15px; }
.ctc__n span { font-size: 12px; color: var(--app-3); }
.ctc__p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 10px; font-size: 14px; font-weight: 600; }
.ctc__k { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 10px; }
.ctc__k .a-chip { background: var(--app-on-tile); }

/* consent check rows and cancel reasons */
.chk {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start;
  background: var(--app-tile); border-radius: 18px; padding: 13px 14px;
}
.chk__box {
  width: 24px; height: 24px; flex: none; border-radius: 7px; margin-block-start: 1px;
  background: var(--app-on-tile); box-shadow: inset 0 0 0 2px var(--app-ring);
  display: grid; place-items: center; color: transparent;
}
.chk.on .chk__box { background: var(--app-accent); box-shadow: none; color: var(--app-on-accent); }
.chk__tx b { display: block; font-size: 14px; font-weight: 700; }
.chk__tx span { font-size: 12px; color: var(--app-3); }
.cs-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--app-2); }
.radio__dot {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--app-on-tile); box-shadow: inset 0 0 0 2px var(--app-ring);
}
.radio.on .radio__dot { box-shadow: inset 0 0 0 7px var(--app-accent); }

/* notifications */
.ntf { padding-block: 12px; }
.ntf + .ntf { border-block-start: 1px solid var(--app-line); }
.ntf__main { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start; }
.ntf__tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ntf__meta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--app-4); }
.ntf__kid { font-weight: 700; color: var(--app-link); background: var(--app-on-tile); border-radius: var(--r-full); padding: 1px 8px; }
.ntf__tx b { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.ntf--unread .ntf__tx b { font-weight: 700; }
.ntf__body { font-size: 12.5px; color: var(--app-3); }
.ntf__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--app-accent); margin-block-start: 6px; }
.ntf .qblk, .ntf .coming { margin-inline-start: 52px; }

/* booking: chosen service, day pills with free/full, the branch that day */
.bk-preset {
  display: flex; gap: 10px; align-items: center; background: var(--app-tile);
  border-radius: 18px; padding: 10px 12px; margin-block-end: var(--s-3);
}
.bk-preset b { display: block; font-size: 14px; }
.bk-preset span span { font-size: 12px; color: var(--app-3); }
.daybar .kid { flex-direction: column; gap: 0; padding: 5px 2px; min-height: 58px; }
.daybar__w { font-size: 10.5px; opacity: .8; }
.daybar .kid b { font-size: 15px; }
.daybar__f { font-size: 9.5px; font-weight: 600; opacity: .85; }
.daybar .kid.full { opacity: .4; }
.daybar__branch { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--app-3); padding-inline: 4px; margin-block-start: 8px; }

/* a visit that didn't happen reads quieter */
.appt--off .appt__date b { color: var(--app-4); }

/* bottom sheets: share, download, add to calendar */
.sheet-wrap { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(10, 14, 16, .42); animation: sheet-fade .2s var(--ease); }
.sheet {
  position: relative; max-height: 86%; overflow-y: auto; background: var(--app-bg);
  border-radius: 26px 26px 0 0; padding: 10px 18px 34px; animation: sheet-up .26s var(--ease);
}
.sheet__grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--app-ring); margin: 0 auto 14px; }
.sheet__t { font-family: var(--font-display); font-size: 18px; font-weight: 600; text-align: center; }
.sheet__s { font-size: 13px; color: var(--app-3); text-align: center; margin-block: 4px 14px; }
.sheet__ok {
  width: 56px; height: 56px; border-radius: 50%; margin: 2px auto 12px; display: grid; place-items: center;
  background: var(--status-success-soft); color: var(--status-success);
}
.docchip { display: flex; gap: 12px; align-items: center; background: var(--app-tile); border-radius: 18px; padding: 12px 14px; }
.docchip b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.docchip span span { font-size: 12px; color: var(--app-3); }
.shareto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-block-start: 14px; }
.shareto button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 4px; font-size: 11.5px; font-weight: 600; color: var(--app-2); }
.shareto__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--app-tile); color: var(--app-link); }
.calev { display: grid; gap: 9px; background: var(--app-tile); border-radius: 18px; padding: 14px; font-size: 13px; color: var(--app-2); }
.calev b { font-size: 15px; color: var(--app-fg); }
.calev span { display: flex; gap: 8px; align-items: center; }
.calev svg { flex: none; color: var(--app-link); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-scrim, .player__bar i { animation: none; } }

/* choice chips in forms (relationship, language) */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }

/* booking in waves: one card per wave start */
.waves { display: grid; gap: 8px; }
.wave {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--app-tile); border-radius: 18px; padding: 14px 16px;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .16s var(--ease), background .16s var(--ease);
}
.wave.on { background: var(--app-on-tile); box-shadow: inset 0 0 0 2px var(--app-accent); }
.wave:disabled { opacity: .45; }
.wave__tx { flex: 1; min-width: 0; }
.wave__tx b { display: block; font-size: 15px; }
.wave__tx span { font-size: 12.5px; color: var(--app-3); }
.wave__n { flex: none; font-size: 12px; font-weight: 700; color: var(--status-success); }
.wave:disabled .wave__n { color: var(--app-3); }
.pchip {
  min-height: 40px; padding-inline: 16px; border-radius: var(--r-full);
  background: var(--app-tile); color: var(--app-2); font-size: 13.5px; font-weight: 600;
}
.pchip.on { background: var(--app-accent); color: var(--app-on-accent); }
.chk .a-chip { margin-inline-start: auto; align-self: center; }

[data-theme="dark"] .rosh { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
[data-theme="dark"] .ans--yes, [data-theme="dark"] .pchip.on { background: var(--c-blue-500); }
[data-theme="dark"] .sched i.on, [data-theme="dark"] .chk.on .chk__box { background: var(--c-blue-500); }
[data-theme="dark"] .radio.on .radio__dot { box-shadow: inset 0 0 0 7px var(--c-blue-400); }
[data-theme="dark"] .home-top__badge, [data-theme="dark"] .qa__badge { background: var(--c-blue-500); }
[data-theme="dark"] .lrn__wrap--new .lrn__card { box-shadow: inset 0 0 0 1.5px rgba(var(--brand-rgb), .55); }
[data-theme="dark"] .fileview__page { background: #2B3135; }
[data-theme="dark"] .fileview__page i { background: #3C444A; }

/* in-app switch (notification settings) */
.a-sw {
  width: 46px; height: 27px; border-radius: 14px; background: var(--app-ring);
  position: relative; flex: none; transition: background .18s var(--ease);
}
.a-sw::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: inset-inline-start .18s var(--ease);
}
.a-sw.on { background: var(--app-accent); }
.a-sw.on::after { inset-inline-start: 22px; }

/* rating */
.stars { display: flex; gap: 8px; justify-content: center; margin-block: var(--s-4); }
.stars button { color: var(--app-ring); transition: transform .15s var(--ease), color .15s var(--ease); }
.stars button.on { color: var(--c-amber-500); }
.stars button:active { transform: scale(1.18); }

/* toast */
.a-toast {
  position: absolute; inset-block-end: 96px; inset-inline: 16px; z-index: 20;
  background: #1F2326; color: #fff; border-radius: 16px;
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.a-toast.show { opacity: 1; transform: none; }

/* screen transition */
@media (prefers-reduced-motion: no-preference) {
  .appbody.swap { animation: swapIn .26s var(--ease-out); }
  @keyframes swapIn { from { opacity: 0; transform: translateY(7px); } }
}

/* dark app theme — same cool neutrals, inverted. The blue card keeps its
   fill (white text on blue-600 clears 4.5:1 in both themes); only the
   text-weight blue lifts. */
[data-theme="dark"] .appview {
  --app-bg: #121416; --app-fg: #F1F3F4;
  --app-2: #C3C9CD; --app-3: #9AA3A9; --app-4: #7C858B;
  --app-tile: #1D2124; --app-tile-2: #282D31; --app-on-tile: #2B3135;
  --app-line: #2C3236; --app-ring: #3C444A;
  --app-link: var(--c-blue-400);
  --app-accent-ink: var(--c-blue-800);
}
[data-theme="dark"] .device__screen { background: #121416; }
/* The status bar and home indicator sit outside .appview, so they cannot read
   --app-fg; give them the app ink directly in both themes. */
.statusbar { color: #171A1C; }
.device__homebar { background: #171A1C; }
[data-theme="dark"] .statusbar { color: #F1F3F4; }
[data-theme="dark"] .device__homebar { background: #F1F3F4; }
[data-theme="dark"] .tabbar { background: rgba(29, 33, 36, .9); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset; }
[data-theme="dark"] .tabbar button.on { background: #2B3135; color: var(--c-blue-300); box-shadow: none; }
[data-theme="dark"] .a-btn--soft { box-shadow: inset 0 0 0 1.5px var(--app-tile-2); }
[data-theme="dark"] .a-hero-card .a-btn { background: #FFFFFF; }
[data-theme="dark"] .a-hero-card .a-btn.a-btn--onblue { background: rgba(255, 255, 255, .16); }
[data-theme="dark"] .a-sw::after { background: #F1F3F4; }
[data-theme="dark"] .idbar { background: var(--status-warning-soft); }

/* platform switcher — always available, since only one device is on stage */
.platsw {
  display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--r-full);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.platsw button {
  min-height: 34px; padding-inline: 13px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.platsw button.on { background: var(--action-primary); color: var(--text-on-brand); }

/* "Clinic setup" — the review toolbar's choice of how the doctor works */
.setup { position: relative; flex: none; }
.setup__pop {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 120;
  width: min(380px, calc(100vw - 32px)); display: grid; gap: 14px; padding: 16px;
  background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-subtle);
  border-radius: 18px; box-shadow: var(--shadow-lg); white-space: normal;
}
.setup__pop[hidden] { display: none; }
.setup__t { font-size: 13.5px; }
.setup__g { display: grid; gap: 7px; }
.setup__l { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.setup__g .platsw { display: flex; }
.setup__g .platsw button { flex: 1; padding-inline: 8px; }
.setup__g p { font-size: 12px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* ---------------------------------------------- small screens
   A phone rendered inside a phone gives two nested scroll layers and
   a frame that never fits — so below 820px the device chrome is
   dropped entirely and the app fills the viewport. Only the app body
   scrolls; the page itself does not. */
@media (max-width: 820px) {
  body.lab { height: 100dvh; overflow: hidden; }

  /* The top bar becomes a floating, collapsed review pill — the app gets
     the entire screen, exactly like the website's review toolbar. */
  .lab-top {
    position: fixed;
    /* inset-block-start must be cleared — the desktop rule pins it to 0, and
       having both block edges set stretches the pill to full viewport height. */
    inset-block-start: auto; inset-block-end: 14px;
    inset-inline-start: 14px; inset-inline-end: auto;
    z-index: 95; width: max-content; max-width: calc(100vw - 28px);
    background: rgba(24, 20, 14, .62); backdrop-filter: blur(14px);
    border: 0; border-radius: var(--r-full); padding: 5px;
    box-shadow: var(--shadow-lg);
    transition: background .2s var(--ease);
  }
  .lab-top.open { background: rgba(24, 20, 14, .93); }
  .lab-top__in { width: auto; min-height: 0; padding: 0; gap: var(--s-1); flex-wrap: nowrap; }
  .lab-brand { display: none; }

  .lab-top__toggle {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    transition: background .16s var(--ease), transform .28s var(--ease);
  }
  .lab-top.open .lab-top__toggle { transform: rotate(90deg); background: rgba(255, 255, 255, .13); }

  .lab-tools {
    margin-inline-start: 0; flex-wrap: nowrap; gap: 4px;
    max-inline-size: 0; opacity: 0; pointer-events: none; overflow: hidden;
    transition: max-inline-size .34s var(--ease-out), opacity .22s var(--ease);
  }
  .lab-top.open .lab-tools {
    max-inline-size: calc(100vw - 90px); opacity: 1; pointer-events: auto;
    overflow-x: auto; scrollbar-width: none;
  }
  .lab-tools::-webkit-scrollbar { width: 0; height: 0; }

  /* controls restyled for the dark pill */
  .lab-top .tool {
    background: transparent; border-color: transparent;
    color: rgba(255, 255, 255, .82); height: 38px;
  }
  .lab-top .tool.on { background: var(--c-blue-600); color: #fff; }
  .lab-top .tool.warn.on { background: var(--c-amber-600); }
  .lab-top select.tool { color: #fff; }
  .lab-top select.tool option { color: var(--text-primary); background: #fff; }
  .lab-top .platsw { background: rgba(255, 255, 255, .12); border-color: transparent; }
  .lab-top .platsw button { color: rgba(255, 255, 255, .8); }
  .lab-top .platsw button.on { background: var(--c-blue-600); color: #fff; }
  /* The pill clips its tools, so the panel hangs off the pill itself. */
  .lab-top .setup { position: static; }
  .lab-top .setup__pop { inset-block-start: auto; inset-block-end: calc(100% + 10px); inset-inline: 0 auto; }
  .lab-top .setup__pop .platsw { background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
  .lab-top .setup__pop .platsw button { color: var(--text-secondary); }
  .lab-top .setup__pop .platsw button.on { color: #fff; }

  .stage { flex: 1; min-height: 0; display: block; padding: 0; }
  .rail { display: none; }

  .device { height: 100%; }
  .device.is-active { display: flex; flex-direction: column; }
  .device__label { display: none; }

  .device--ios .device__frame,
  .device--android .device__frame {
    width: 100%; flex: 1; min-height: 0;
    padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  }
  .device__frame::before, .device__frame::after { display: none; }
  .device__island, .device__punch, .device__homebar { display: none; }

  /* the real device already draws a status bar above the browser */
  .statusbar { display: none; }

  .device--ios .device__screen,
  .device--android .device__screen { height: 100%; border-radius: 0; }

  .tabbar, .device--ios .tabbar { inset-inline: 12px; inset-block-end: 12px; }
  .appbody { padding-block-end: 100px; }
}