@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

/*
  Design idea: a medicine capsule — two-tone, with a visible seam down the
  middle — is the one recurring shape in this product's real world (pill
  packs, blister cards). Confidence and severity are rendered as how full
  that capsule is: empty outline = unconfirmed/unknown, half = review/
  moderate, solid = verified/low-risk, and a single large pulsing capsule
  is the one deliberate bold moment, reserved for EMERGENCY. Status is
  never colour-only — shape (empty/half/full/cracked) carries the meaning
  too, so it still reads without colour vision. Noto Sans is chosen for
  body text specifically because it renders Devanagari (Hindi) properly,
  which IBM Plex Sans — last iteration's body face — does not.
*/

:root {
  --paper: #F2F6F4;
  --surface: #FFFFFF;
  --ink: #16241F;
  --ink-soft: #5C6E68;
  --ink-faint: #8B9A94;
  --line: #E3EBE7;

  --teal: #12876F;
  --teal-dark: #0C6455;
  --teal-soft: #DFF1EA;

  --blue: #2E6FE0;
  --blue-soft: #E4ECFD;

  --amber: #B4791F;
  --amber-soft: #FBEBD3;

  --alarm: #D3402A;
  --alarm-soft: #FBE2DD;

  --cream: #F4ECDD;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(22,36,31,0.04), 0 8px 20px -12px rgba(22,36,31,0.12);
  --shadow-card-hover: 0 1px 2px rgba(22,36,31,0.05), 0 14px 28px -14px rgba(22,36,31,0.16);
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--teal);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, .brand, nav.pill-nav button, .stat .num, button {
  font-family: 'Figtree', system-ui, sans-serif;
}
h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
p { max-width: 68ch; }

a { color: var(--teal-dark); }

/* visible, generous focus ring everywhere — accessibility hard requirement */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

button {
  cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
button:hover { background: var(--paper); border-color: var(--ink-faint); }
button:active { transform: scale(0.98); }
button.primary { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 4px 10px -4px rgba(18,135,111,0.5); }
button.primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
button.ghost { border-color: var(--line); color: var(--ink-soft); background: var(--surface); }
button.ghost:hover { border-color: var(--ink-faint); background: var(--paper); color: var(--ink); }
button.danger { background: var(--alarm); border-color: var(--alarm); color: #fff; }
button.danger:hover { background: #B0331F; }
button.small { padding: 7px 14px; font-size: 13px; min-height: 32px; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button .icon, button .icon svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
button svg:not(.icon-badge svg) { width: 16px; height: 16px; }

input, textarea, select {
  font-family: inherit;
  font-size: 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-height: 40px;
}
textarea { resize: vertical; min-height: 120px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 14px; }
select { min-width: 130px; }
label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 4px; }

/* ---------------------------------------------------------- top chrome */

#app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-row {
  display: flex; align-items: center;
  gap: 14px; padding: 14px 20px;
}

.brand { font-size: 19px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--teal) 0%, var(--teal-dark) 100%);
  display: inline-block; position: relative;
  box-shadow: 0 4px 10px -4px rgba(12,100,85,0.55);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 9px;
  background: #fff; border-radius: 3px;
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
}

.field-inline select { min-height: 38px; padding: 6px 12px; font-size: 13.5px; border-radius: var(--radius-sm); }
.field-inline label { margin-bottom: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* header: brand + hamburger only. Everything that used to crowd this row
   (patient switch, language, accessibility, voice, session) now lives in
   the Settings tab reached through the drawer below — one uncluttered
   header at every screen width instead of a row that has to shrink. */
.hamburger-btn {
  border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hamburger-btn svg { width: 20px; height: 20px; }
.hamburger-btn:hover { background: var(--paper); border-color: var(--ink-faint); }

/* nav: a single off-canvas drawer used at every breakpoint, opened by the
   hamburger. Positioning/slide (.nav-drawer) works on any element — a
   <nav class="pill-nav nav-drawer"> of tab buttons (patient app) or a
   plain <div class="nav-drawer"> of ordinary settings controls (doctor/
   caregiver, which have no tabs to switch between). The tab-button skin
   below is scoped to pill-nav.nav-drawer specifically so it never reskins
   an ordinary .ghost/.primary button sitting inside a plain settings
   drawer. */
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: min(300px, 84vw); background: var(--surface);
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto; flex-wrap: nowrap;
  box-shadow: 0 0 40px rgba(22,36,31,0.18);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.nav-drawer-body { padding: 4px 6px; display: flex; flex-direction: column; gap: 12px; }
nav.pill-nav.nav-drawer button {
  border: 1.5px solid transparent; background: transparent; color: var(--ink-soft);
  border-radius: var(--radius-sm); padding: 12px 12px; font-size: 14.5px; font-weight: 600;
  min-height: 46px; white-space: normal; width: 100%;
  display: flex; align-items: center; justify-content: flex-start;
}
nav.pill-nav.nav-drawer button:hover { background: var(--teal-soft); color: var(--teal-dark); }
nav.pill-nav.nav-drawer button.active {
  background: var(--teal); color: #fff;
  box-shadow: 0 4px 10px -5px rgba(18,135,111,0.6);
}
nav.pill-nav .nav-icon { display: inline-flex; width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; flex-shrink: 0; }
nav.pill-nav .nav-icon svg { width: 100%; height: 100%; }
nav.pill-nav.nav-drawer .nav-icon { width: 18px; height: 18px; margin-right: 10px; }

.nav-drawer-overlay {
  position: fixed; inset: 0; z-index: 55; background: rgba(22,36,31,0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.nav-drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* floating voice action button — rounded, fixed to the bottom corner at
   every screen width. No fixed bottom nav bar to share space with any
   more (the drawer replaced it), so it always has the corner to itself. */
.fab-voice {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; padding: 0; border: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(18,135,111,0.55);
}
.fab-voice:hover { background: var(--teal-dark); }
.fab-voice svg, .fab-voice .icon { width: 24px; height: 24px; margin: 0; }
.fab-voice.listening { animation: fab-pulse 1.1s ease-in-out infinite; }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 8px 20px -6px rgba(18,135,111,0.55); }
  50% { box-shadow: 0 8px 28px -2px rgba(18,135,111,0.9); }
}

/* ---------------------------------------------------------- layout */

.body-row { display: flex; flex: 1; align-items: flex-start; gap: 0; }
main.content { flex: 1; padding: 28px 32px; max-width: 800px; margin: 0 auto; min-width: 0; }

.glance {
  width: 280px; flex-shrink: 0; padding: 24px 22px;
  align-self: flex-start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
.glance-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 20px; margin-bottom: 14px;
}
.glance-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.glance h4 { font-family: 'Figtree'; font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; }
.glance-block { margin-bottom: 18px; }
.glance-block:last-child { margin-bottom: 0; }
.glance-next-dose { font-size: 15px; font-weight: 600; }
.glance-next-dose .when { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.glance-ring { display: flex; align-items: center; gap: 12px; }
.glance-ring .num { font-family: 'Figtree'; font-size: 26px; font-weight: 700; }
.glance-alert { font-size: 12.5px; color: var(--amber); background: var(--amber-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; }
.glance-empty { font-size: 13px; color: var(--ink-soft); }
.glance-tip { background: var(--teal-soft); border-radius: var(--radius-md); padding: 16px; font-size: 13px; color: var(--teal-dark); display: flex; gap: 10px; align-items: flex-start; }

/* ---------------------------------------------------------- responsive
   Three tiers: desktop (>1180px, glance rail visible), tablet (761–1180px,
   single column, full-width content), phone (≤760px, tightened spacing,
   stacked cards, touch-sized controls), small phone (≤400px, minimum
   viable spacing). Every component below that has a fixed side-by-side
   layout gets an explicit phone rule — nothing is left to "it probably
   wraps OK". No rule here ever introduces horizontal scroll on the page
   itself (only .table-scroll and nav.pill-nav scroll, deliberately). */

@media (max-width: 1180px) {
  .glance { display: none; }
  main.content { max-width: 800px; margin: 0; }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* top chrome: just the hamburger + brand now, so it stays a single
     compact row instead of wrapping — nav and settings both moved off
     this row entirely (drawer / Settings tab). */
  .topbar-row { padding: 12px 16px; gap: 10px; }
  .brand { font-size: 17px; }
  .nav-drawer { width: min(280px, 86vw); }

  .fab-voice { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }

  main.content { padding: 16px; max-width: 100%; }

  h2 { font-size: 19px; }
  h3 { font-size: 14.5px; }
  p { max-width: none; }

  /* every tappable control reaches the 44px touch-target minimum on phone,
     even where the desktop min-height (40px/32px small) is a bit under */
  button { min-height: 44px; }
  button.small { min-height: 40px; }
  input, textarea, select { min-height: 44px; font-size: 16px; } /* 16px prevents iOS auto-zoom-on-focus */

  .card { padding: 16px; border-radius: var(--radius-md); margin-bottom: 12px; }
  .card-head { flex-wrap: wrap; }
  .icon-badge { width: 30px; height: 30px; border-radius: 9px; }
  .icon-badge svg { width: 16px; height: 16px; }

  /* stat cards: 2-up grid instead of flex-wrap, so four stats never end
     up 3-then-1 or drift to uneven widths */
  .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px; }
  .stat .num { font-size: 19px; }

  /* the next-dose hero: countdown/action stack below the medicine name
     instead of racing it for horizontal space */
  .hero-next-dose { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-next-dose > div:last-child { text-align: left; }
  .hero-next-dose .countdown { font-size: 19px; }

  /* dose rows: time moves above the medicine name instead of squeezing a
     fixed 130px column against wrapping action buttons */
  .dose-row { flex-wrap: wrap; padding: 10px 0; }
  .dose-row .time { width: auto; font-size: 12px; flex-basis: 100%; order: -1; }
  .dose-row .actions { width: 100%; justify-content: flex-start; margin-left: 0; }
  .dose-row .actions button { flex: 1 1 auto; }

  .dose-calendar-slot { flex-wrap: wrap; }
  .dose-calendar-time { width: auto; flex-basis: 100%; order: -1; padding-top: 0; }
  .dose-calendar-dot { display: none; }
  .dose-calendar-actions button { flex: 1 1 auto; }

  .two-col { grid-template-columns: 1fr; gap: 12px; }

  .symptom-grid button { flex: 1 1 calc(50% - 4px); text-align: center; }

  /* the one bold moment stays bold but stacks: icon above the verdict on
     a phone-width screen instead of squeezed beside three lines of text */
  .severity-banner { flex-direction: column; padding: 20px; gap: 12px; }
  .severity-banner h3 { font-size: 19px; }

  .upload-zone { padding: 20px 14px; }
  .upload-zone input[type="file"] { max-width: 100%; }

  .patient-picker-grid { grid-template-columns: 1fr; }

  table { min-width: 0; font-size: 12.5px; }
  table th, table td { padding: 6px; }

  /* tables → stacked cards on phone: horizontal scroll is a last resort,
     not the default, for anything wider than two or three short columns
     (CLAUDE.md's own "no cramped tables" instinct, extended to mobile) */
  table.responsive-table { min-width: 0; }
  table.responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.responsive-table, table.responsive-table tbody, table.responsive-table tr, table.responsive-table td { display: block; width: 100%; }
  table.responsive-table tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 10px; padding: 10px 12px; background: var(--surface);
  }
  table.responsive-table tr:last-child { margin-bottom: 0; }
  table.responsive-table td {
    border: none; padding: 4px 0; display: flex; justify-content: space-between;
    align-items: baseline; gap: 10px; text-align: right;
  }
  table.responsive-table td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--ink-soft);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
    flex-shrink: 0; text-align: left;
  }

  .report-header { text-align: left; }
  .report-section .stat-row { grid-template-columns: repeat(3, 1fr); } /* Care Report's 3-stat adherence row */
}

@media (max-width: 400px) {
  .topbar-row { padding: 10px 12px; }
  main.content { padding: 12px; }
  .card { padding: 14px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  h2 { font-size: 17px; }
}

/* ---------------------------------------------------------- cards & badges */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h3 { margin: 0; }

.icon-badge {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-badge svg { width: 18px; height: 18px; }
.icon-badge.teal { background: var(--teal-soft); color: var(--teal-dark); }
.icon-badge.blue { background: var(--blue-soft); color: var(--blue); }
.icon-badge.amber { background: var(--amber-soft); color: var(--amber); }
.icon-badge.alarm { background: var(--alarm-soft); color: var(--alarm); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid transparent;
}
/* shape, not just colour, carries meaning: outline = unconfirmed/needs input,
   solid = confirmed/settled — readable without colour vision. */
.badge.verified, .badge.low, .badge.routine { background: var(--teal-soft); color: var(--teal-dark); border-color: var(--teal-soft); }
.badge.review, .badge.moderate, .badge.minor, .badge.medium { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft); }
.badge.needs_confirmation { background: var(--surface); color: var(--alarm); border-color: var(--alarm); border-style: dashed; }
.badge.high { background: var(--alarm-soft); color: var(--alarm); border-color: var(--alarm); }
.badge.emergency, .badge.critical { background: var(--alarm); color: #fff; border-color: var(--alarm); }

.raw { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13.5px; color: var(--ink-soft); background: var(--paper); padding: 2px 6px; border-radius: 4px; }

.upload-zone {
  border: 1.5px dashed var(--line); border-radius: var(--radius-md);
  background: var(--paper); padding: 28px 20px; text-align: center;
}
.upload-zone .icon-badge { margin: 0 auto; }
.upload-zone input[type="file"] { max-width: 320px; margin: 12px auto 0; }

.medicine-line { border-top: 1px solid var(--line); padding: 16px 0; }
.medicine-line:first-of-type { border-top: none; padding-top: 4px; }
.medicine-line.needs_confirmation { border-left: 3px dashed var(--alarm); padding-left: 14px; margin-left: -14px; }
.medicine-line .plain { white-space: pre-line; margin-top: 8px; font-size: 15px; }

.confidence-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 11.5px; color: var(--ink-soft); }
.confidence-row .field-name { width: 58px; flex-shrink: 0; text-transform: capitalize; }
.confidence-track { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.confidence-fill { height: 100%; border-radius: 999px; }
.confidence-fill.verified { background: var(--teal); }
.confidence-fill.review { background: var(--amber); }
.confidence-fill.needs_confirmation { background: var(--alarm); }
.confidence-pct { width: 48px; flex-shrink: 0; text-align: right; font-weight: 600; }

.dose-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dose-row:last-child { border-bottom: none; }
.dose-row .time { font-weight: 600; width: 130px; font-size: 13px; color: var(--ink-soft); flex-shrink: 0; }
.dose-row .actions { display: flex; gap: 6px; margin-left: auto; }

/* upcoming doses as a day-by-day agenda instead of one flat list — a
   calendar-style read on "what's next" without a full month grid. */
.dose-calendar-day { margin-bottom: 14px; }
.dose-calendar-day:last-child { margin-bottom: 0; }
.dose-calendar-day-head {
  display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 13px;
  color: var(--teal-dark); text-transform: uppercase; letter-spacing: .3px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.dose-calendar-day-date { font-weight: 500; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.dose-calendar-slot { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.dose-calendar-slot:not(:last-child) { border-bottom: 1px dashed var(--line); }
.dose-calendar-time { width: 76px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--ink-soft); padding-top: 2px; }
.dose-calendar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); margin-top: 6px; flex-shrink: 0; }
.dose-calendar-info { flex: 1; min-width: 0; }
.dose-calendar-med { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.dose-calendar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* on-screen confirmation after marking a dose taken */
.taken-popup-overlay { position: fixed; inset: 0; background: rgba(22,36,31,0.35); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: pointer; }
.taken-popup { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); padding: 28px 36px; text-align: center; max-width: 280px; cursor: default; }
.taken-popup-icon { display: inline-flex; color: var(--teal-dark); width: 56px; height: 56px; margin-bottom: 10px; }
.taken-popup-icon svg { width: 100%; height: 100%; }
.taken-popup-med { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.taken-popup-when { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.taken-popup-label { font-size: 13px; font-weight: 600; color: var(--teal-dark); }

/* prescription photo upload: visible "reading" / error state (success uses the taken-popup above) */
.upload-status-banner { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
.upload-status-banner.loading { background: var(--blue-soft); color: var(--blue); }
.upload-status-banner.error { background: var(--alarm-soft); color: var(--alarm); }
.upload-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; flex-shrink: 0; animation: upload-spin 0.7s linear infinite; }
@keyframes upload-spin { to { transform: rotate(360deg); } }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 110px; background: var(--surface); padding: 16px;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.stat .icon-badge { width: 30px; height: 30px; border-radius: 9px; }
.stat .icon-badge svg { width: 16px; height: 16px; }
.stat .num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat .label { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }

/* ---------------------------------------------------------- adherence ring */

.ring {
  --ring-size: 76px; --ring-thick: 8px;
  width: var(--ring-size); height: var(--ring-size); border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--teal) calc(var(--ring-pct, 0) * 1%), var(--teal-soft) 0);
  display: flex; align-items: center; justify-content: center;
}
.ring::after {
  content: attr(data-pct); font-family: 'Figtree'; font-weight: 800; font-size: 15px; color: var(--teal-dark);
  width: calc(var(--ring-size) - var(--ring-thick) * 2); height: calc(var(--ring-size) - var(--ring-thick) * 2);
  border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center; text-align: center;
}

.symptom-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.symptom-grid button { border-color: var(--line); color: var(--ink); background: var(--paper); }
.symptom-grid button.selected { background: var(--teal); color: #fff; border-color: var(--teal-dark); }

/* the one bold moment: a full-size capsule, only for the triage result */
.severity-banner { border-radius: var(--radius-md); padding: 26px; margin-bottom: 16px; display: flex; gap: 18px; align-items: flex-start; }
.severity-capsule { width: 30px; height: 58px; border-radius: 999px; flex-shrink: 0; border: 2px solid currentColor; position: relative; overflow: hidden; }
.severity-capsule .fill { position: absolute; bottom: 0; left: 0; right: 0; background: currentColor; }
.severity-banner.emergency { background: var(--alarm); color: #fff; }
.severity-banner.emergency .severity-capsule { animation: pulse-capsule 1.6s ease-in-out infinite; }
@keyframes pulse-capsule { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.severity-banner.moderate { background: var(--amber-soft); color: #4A340A; border: 1px solid var(--amber); }
.severity-banner.low { background: var(--teal-soft); color: var(--teal-dark); border: 1px solid var(--teal); }
.severity-banner h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.severity-banner ul { margin: 8px 0; padding-left: 20px; }
.severity-banner .cta { margin-top: 12px; display: inline-block; }
.severity-banner.emergency button.danger { background: #fff; color: var(--alarm); border-color: #fff; }
.severity-banner.emergency button.danger:hover { background: #f2f2f2; }

.alert-item { border-left: 3px solid var(--alarm); background: var(--alarm-soft); color: var(--alarm); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.two-col > .card { margin-bottom: 0; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

.interaction-row { border-top: 1px solid var(--line); padding: 12px 0; }
.interaction-row:first-of-type { border-top: none; padding-top: 4px; }
.interaction-pair { font-weight: 700; text-transform: capitalize; }

.report-header { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 20px; }
.report-section { margin-bottom: 24px; }
.report-section .card-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
table th, table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
table th { color: var(--ink-soft); font-weight: 600; }

.hero-next-dose { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-next-dose .med-name { font-size: 20px; font-weight: 700; }
.hero-next-dose .countdown { font-family: 'Figtree'; font-size: 22px; font-weight: 800; color: var(--teal-dark); }
.hero-next-dose .countdown.overdue { color: var(--alarm); }
.day-progress { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.day-progress-track { width: 90px; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.day-progress-fill { height: 100%; background: var(--teal); }

footer.disclaimer { margin-top: 22px; font-size: 12.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 10px; }

.empty { color: var(--ink-soft); padding: 18px 0; }

/* missed doses: visually separate from (and quieter than) the upcoming ones */
.missed-card { background: var(--paper); border: 1px dashed var(--line); margin-bottom: 16px; }
.missed-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft); }
.missed-note { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); font-size: 12.5px; }

@media print {
  .topbar, .glance, .no-print { display: none !important; }
  .body-row { display: block; }
  main.content { max-width: none; padding: 0; }
  body { background: #fff; }
  .card { border: none; padding: 0; }
}

/* ---------------------------------------------------------------- auth (login.html) */

body.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-shell { width: 100%; max-width: 400px; }
.auth-brand { font-size: 24px; font-weight: 800; color: var(--teal-dark); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auth-tagline { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }
.auth-card { padding: 24px; }
.auth-tabs { display: flex; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; border: none; border-radius: 999px; background: transparent; color: var(--ink-soft); min-height: 36px; padding: 6px 10px; }
.auth-tab:hover { background: transparent; color: var(--ink); }
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.auth-hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.auth-error { color: var(--alarm); font-size: 13px; margin-top: 10px; min-height: 1em; }
.auth-demo-note { font-size: 12px; color: var(--ink-soft); margin-top: 18px; text-align: center; line-height: 1.7; }
.auth-demo-note code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* ---------------------------------------------------------------- topbar identity */

.session-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.session-chip .who { font-weight: 700; color: var(--ink); }
.session-chip .role-tag { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; background: var(--teal-soft); color: var(--teal-dark); padding: 2px 8px; border-radius: 999px; font-weight: 700; }

/* ---------------------------------------------------------------- nudges (Part 4) */

.nudge-banner { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 10px; font-size: 13.5px; }
.nudge-banner.upcoming { background: var(--teal-soft); color: var(--teal-dark); }
.nudge-banner.overdue { background: var(--amber-soft); color: var(--amber); }
.nudge-banner.info { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- safety center (Part 3) */

.safety-med-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.safety-med-row:first-of-type { border-top: none; }
.safety-med-row .generic { color: var(--ink-soft); font-size: 12.5px; }

/* ---------------------------------------------------------------- accessibility mode (Part 13) */

html[data-a11y="large"] body { font-size: 19px; line-height: 1.7; }
html[data-a11y="large"] h2 { font-size: 27px; }
html[data-a11y="large"] h3 { font-size: 19px; }
html[data-a11y="large"] button { min-height: 48px; padding: 12px 20px; font-size: 16px; }
html[data-a11y="large"] button.small { min-height: 40px; font-size: 15px; }
html[data-a11y="large"] .badge { font-size: 14px; padding: 5px 14px; }
html[data-a11y="large"] .dose-row .time { font-size: 15px; width: 160px; }
html[data-a11y="large"] input, html[data-a11y="large"] textarea, html[data-a11y="large"] select { font-size: 17px; min-height: 48px; }
html[data-a11y="large"] .glance, html[data-a11y="large"] .confidence-row .field-name { font-size: inherit; }

/* ---------------------------------------------------------------- shared list/table bits for caregiver & doctor apps */

.patient-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.patient-picker-card { text-align: left; padding: 16px 18px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.patient-picker-card:hover { border-color: var(--teal); }
.patient-picker-card.active { border-color: var(--teal-dark); background: var(--teal-soft); }
.patient-picker-card .name { font-weight: 700; font-size: 15px; }
.patient-picker-card .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.patient-picker-card .priority-row { margin-top: 8px; }

/* shown on every doctor tab except Patients/Settings, once a patient is
   selected — the picker itself only lives on the Patients tab now. */
.current-patient-bar { align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; margin-bottom: 16px; background: var(--teal-soft); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 14px; color: var(--ink); }

/* priority queue "why flagged" reasons — always plain sentences, never a
   bare score, so a doctor can see the evidence behind the badge. */
.priority-reasons { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft); }
.priority-reasons li { padding: 2px 0; }
.priority-reasons li::before { content: "• "; color: var(--ink-faint); }

/* since-last-visit comparison rows */
.change-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.change-row:first-child { border-top: none; }
.change-row .label { color: var(--ink-soft); }
.change-row .value { font-weight: 700; }

.link-code-display { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.08em; background: var(--paper); border-radius: var(--radius-sm); padding: 10px 16px; display: inline-block; }

.correction-form { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }
.correction-form select, .correction-form input { margin-bottom: 8px; }


/* ---------------------------------------------------------------- 3D health card (health-card.js) */
/* Layout follows the approved reference (image.png). Card internals are
   sized in cqw (card width) so front/back keep their proportions at any
   width, from a phone to the print sheet. */

.hc-page {
  --hc-ink: #17231F;
  --hc-soft: #5E6C67;
  --hc-faint: #8E9A96;
  --hc-teal: #0F8A70;
  --hc-teal-dark: #0B6B57;
  --hc-teal-tint: #E3F4EE;
  --hc-red: #E0463A;
  --hc-red-tint: #FDE7E4;
  --hc-edge: #D8E1DD;
  max-width: 720px; margin: 0 auto 36px;
}

/* header */
.hc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.hc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hc-soft); margin-bottom: 4px; }
.hc-title { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 42px); line-height: 1.05; letter-spacing: -0.02em; color: var(--hc-ink); margin: 0 0 10px; }
.hc-sub { color: var(--hc-soft); font-size: 16px; line-height: 1.5; max-width: 50ch; margin: 0; }
.hc-active {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: var(--hc-teal-tint); color: var(--hc-teal-dark); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.hc-active svg { width: 22px; height: 22px; color: var(--hc-teal); }

/* stage + card */
.hc-stage { perspective: 1600px; display: flex; justify-content: center; padding: 6px 0 10px; }
.hc-card {
  position: relative; width: min(100%, 640px); aspect-ratio: 1.68;
  transform-style: preserve-3d; cursor: grab; touch-action: pan-y;
  border-radius: clamp(14px, 3.4vw, 24px); container-type: inline-size;
  --sheen: 50%; --lean: 0px;
  user-select: none; -webkit-user-select: none;
}
.hc-card:active { cursor: grabbing; }
.hc-card.is-settling { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hc-card:focus-visible { outline: none; }
.hc-card:focus-visible .hc-face { outline: 3px solid var(--hc-teal); outline-offset: 3px; }

.hc-edge, .hc-face { position: absolute; inset: 0; border-radius: inherit; }
.hc-edge { background: var(--hc-edge); transform: translateZ(var(--z)); }
.hc-face {
  overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(160deg, #FFFFFF 0%, #FAFBFB 55%, #F2F5F4 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 #fff,
    calc(var(--lean) * -1) 30px 50px -24px rgba(23, 35, 31, 0.30),
    0 6px 14px -6px rgba(23, 35, 31, 0.12),
    0 0 0 1px rgba(23, 35, 31, 0.05);
  color: var(--hc-ink); font-size: 2.4cqw;
}
.hc-front { transform: translateZ(1px); }
/* the back must sit beyond the deepest edge layer (-1.5px) or the edge hides it */
.hc-back { transform: rotateY(180deg) translateZ(2px); }
.hc-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent calc(var(--sheen) - 25%), rgba(255, 255, 255, 0.5) var(--sheen), transparent calc(var(--sheen) + 25%));
  mix-blend-mode: soft-light;
}
.hc-face svg { display: block; }

/* ---- front */
.hc-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; }
.hc-f-brand {
  position: absolute; left: 5.4cqw; top: 5.2cqw; display: flex; align-items: center; gap: 1.8cqw;
  font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 4.6cqw; color: var(--hc-teal-dark); letter-spacing: -0.01em;
}
.hc-f-mark {
  width: 7.4cqw; height: 7.4cqw; border-radius: 1.8cqw; display: grid; place-items: center;
  background: linear-gradient(145deg, #18A083, #0B6B57); color: #fff; font-size: 6.4cqw; font-weight: 700; line-height: 1;
  box-shadow: 0 0.8cqw 1.6cqw -0.6cqw rgba(11, 107, 87, 0.6);
}
.hc-f-kind { position: absolute; right: 5.4cqw; top: 6.4cqw; font-size: 1.95cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2C3935; }
.hc-f-avatar {
  position: absolute; left: 5cqw; top: 19cqw; width: 19cqw; height: 19cqw; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--hc-teal-tint); color: var(--hc-teal-dark);
  font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 6.4cqw;
  border: 0.9cqw solid #fff; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(23, 35, 31, 0.35); z-index: 1;
}
.hc-f-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hc-f-who { position: absolute; left: 28.5cqw; top: 19.5cqw; right: 32cqw; z-index: 1; }
.hc-f-name { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 5cqw; line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-f-details { font-size: 2.55cqw; color: var(--hc-soft); margin-top: 1cqw; }
.hc-f-sep { margin: 0 1.3cqw; }
.hc-f-chips { display: flex; gap: 1.4cqw; flex-wrap: wrap; margin-top: 2.1cqw; }
.hc-chip {
  display: inline-flex; align-items: center; gap: 0.9cqw; max-width: 100%;
  padding: 0.9cqw 1.9cqw; border-radius: 999px; background: var(--hc-red-tint); color: #C8372C;
  font-size: 2.15cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-chip svg { width: 2.5cqw; height: 2.5cqw; flex: none; color: var(--hc-red); }
.hc-f-emergency {
  display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 2cqw;
  padding: 1.3cqw 2.8cqw; border-radius: 999px; background: linear-gradient(180deg, #EE5A4C, #D93C30); color: #fff;
  font-size: 2.3cqw; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 1cqw 2.2cqw -1cqw rgba(217, 60, 48, 0.8);
}
.hc-f-emergency svg { width: 2.8cqw; height: 2.8cqw; }
.hc-f-emergency svg path:first-child { fill: #fff; }
.hc-f-emergency svg path:nth-child(2), .hc-f-emergency svg circle { stroke: #D93C30; fill: #D93C30; }
.hc-f-qr { position: absolute; right: 4.6cqw; top: 17cqw; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; z-index: 1; }
.hc-f-qr-frame {
  position: relative; width: 22cqw; height: 22cqw; padding: 1.8cqw; background: #fff; border-radius: 1.6cqw;
  box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(23, 35, 31, 0.3);
}
/* teal viewfinder corners around the QR */
.hc-f-qr-frame::before {
  content: ""; position: absolute; inset: -0.6cqw; border-radius: 2cqw; pointer-events: none;
  --c: var(--hc-teal); --l: 4.4cqw; --w: 0.55cqw;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.hc-f-qr-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hc-f-qr-caption { font-size: 2.15cqw; color: #2C3935; }
.hc-f-tagline {
  position: absolute; left: 5cqw; bottom: 5.2cqw; display: flex; align-items: center; gap: 2.4cqw;
  color: #fff; font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 2.75cqw; line-height: 1.25; z-index: 1;
}
.hc-f-tagline svg { width: 6.8cqw; height: 6.8cqw; stroke-width: 1.3; }

/* ---- back */
.hc-back { display: flex; flex-direction: column; }
.hc-b-head { position: relative; padding: 4cqw 5.2cqw 0; text-align: right; }
.hc-b-head span { font-size: 2.7cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2C3935; }
.hc-rule { width: 100%; height: 2.8cqw; margin-top: 0.2cqw; }
.hc-rule path { fill: none; stroke: #C9D3CF; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hc-b-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 1.4cqw 5.2cqw 1.4cqw; min-height: 0; }
.hc-b-col { display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.hc-b-col + .hc-b-col { border-left: 1px solid #E1E7E4; padding-left: 4cqw; }
.hc-b-col:first-child { padding-right: 3cqw; }
.hc-b-row { display: flex; gap: 2.6cqw; min-width: 0; }
.hc-b-icon { flex: none; width: 4.2cqw; height: 4.2cqw; color: #4B5A55; margin-top: 0.2cqw; }
.hc-b-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.hc-b-text { min-width: 0; }
.hc-b-label { display: flex; align-items: center; gap: 0.8cqw; font-size: 2.05cqw; color: var(--hc-soft); margin-bottom: 0.3cqw; }
.hc-b-col:last-child .hc-b-label { font-size: 2.35cqw; color: #2C3935; font-weight: 500; }
.hc-b-strong { font-size: 2.55cqw; font-weight: 600; color: var(--hc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-b-line { font-size: 2.25cqw; color: var(--hc-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-b-empty { color: var(--hc-faint); }
.hc-hidden svg { width: 2.2cqw; height: 2.2cqw; color: var(--hc-faint); }
.hc-b-foot {
  display: flex; align-items: center; gap: 4cqw; padding: 1.7cqw 5.2cqw; background: #F1F4F3; border-top: 1px solid #E4EAE7;
}
.hc-b-updated { display: flex; align-items: center; gap: 2cqw; flex: 1; }
.hc-b-updated > svg { width: 3.6cqw; height: 3.6cqw; color: #4B5A55; }
.hc-b-updated .hc-b-label { font-size: 1.85cqw; margin: 0; }
.hc-b-date { font-size: 2.05cqw; color: #2C3935; }
.hc-b-verified { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.2cqw; font-weight: 600; color: var(--hc-ink); }
.hc-b-verified svg { width: 3.4cqw; height: 3.4cqw; color: var(--hc-teal); }
.hc-b-lock { width: 5cqw; height: 5cqw; border-radius: 50%; background: #E3E8E6; display: grid; place-items: center; color: #3A4743; }
.hc-b-lock svg { width: 2.8cqw; height: 2.8cqw; }

/* pager */
.hc-pager { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin: 18px 0 26px; }
.hc-pager > i { width: 5px; height: 5px; border-radius: 50%; background: #D5DCD9; margin-top: 1px; }
.hc-pager-btn {
  background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 14px; color: #A3ADA9; font-weight: 500;
}
.hc-pager-btn span { width: 22px; height: 4px; border-radius: 4px; background: #C9D1CE; }
.hc-pager-btn.is-on { color: var(--hc-ink); }
.hc-pager-btn.is-on span { background: var(--hc-ink); }
.hc-pager-btn:focus-visible { outline: 2px solid var(--hc-teal); outline-offset: 4px; border-radius: 4px; }

/* actions: white pills */
.hc-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hc-action {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px;
  background: #fff; border: none; color: var(--hc-ink); font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(23, 35, 31, 0.22), 0 1px 3px rgba(23, 35, 31, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* beats the global `button svg` 16px rule */
.hc-actions .hc-action svg { width: 22px; height: 22px; color: var(--hc-teal); stroke-width: 2; }
.hc-action:hover { box-shadow: 0 14px 30px -12px rgba(23, 35, 31, 0.3), 0 1px 3px rgba(23, 35, 31, 0.08); }
.hc-action:active { transform: scale(0.97); }
.hc-action:focus-visible { outline: 3px solid var(--hc-teal); outline-offset: 2px; }
.hc-action:disabled { opacity: 0.55; cursor: progress; }
.hc-action.is-danger { color: var(--hc-red); }
.hc-actions .hc-action.is-danger svg { color: var(--hc-red); }

/* panels opened by the actions */
.hc-panel { margin-top: 24px; }
.hc-notice { font-size: 14px; background: var(--hc-teal-tint); color: var(--hc-teal-dark); padding: 10px 14px; border-radius: 10px; }
.hc-notice.is-error { background: var(--hc-red-tint); color: #C8372C; margin-top: 10px; }
.hc-link-input { width: 100%; margin-top: 6px; }
.hc-sheet { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 10px 28px -14px rgba(23, 35, 31, 0.22), 0 0 0 1px rgba(23, 35, 31, 0.05); }
.hc-sheet h3 { margin: 0 0 6px; }
.hc-sheet p { color: var(--hc-soft); font-size: 14px; margin: 0 0 14px; }
.hc-sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hc-danger-btn { background: var(--hc-red); border-color: var(--hc-red); color: #fff; }
.hc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.hc-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--hc-soft); }
.hc-form-grid .is-wide { grid-column: 1 / -1; }
.hc-form-grid textarea { font-family: inherit; min-height: 0; font-size: 14px; }
.hc-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--hc-soft); }
.hc-file { position: relative; overflow: hidden; cursor: pointer; }
.hc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hc-photo-status { font-weight: 400; }
.hc-share { border: none; padding: 0; margin: 18px 0 0; }
.hc-share legend { font-weight: 700; font-size: 14px; padding: 0; }
.hc-share p { margin: 2px 0 10px; font-size: 13px; }
.hc-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; margin: 0 14px 8px 0; cursor: pointer; }
.hc-toggle input { accent-color: var(--hc-teal); width: 16px; height: 16px; }

.hc-print-sheet { display: none; }

/* Phones: the card is ~360px wide, where reference-scale text would be
   ~8px. Give it a little more height and floor every text size so the
   card stays readable; desktop keeps the reference proportions. */
@media (max-width: 560px) {
  .hc-card { aspect-ratio: 1.3; }
  .hc-f-kind { font-size: max(1.95cqw, 9px); }
  .hc-f-name { font-size: max(5cqw, 19px); }
  .hc-f-details { font-size: max(2.55cqw, 12px); }
  .hc-chip { font-size: max(2.15cqw, 10.5px); }
  .hc-chip svg { width: max(2.5cqw, 11px); height: max(2.5cqw, 11px); }
  .hc-f-emergency { font-size: max(2.3cqw, 10.5px); }
  .hc-f-qr-caption { font-size: max(2.15cqw, 10px); }
  .hc-f-tagline { font-size: max(2.75cqw, 12px); }
  .hc-b-head span { font-size: max(2.7cqw, 11px); }
  .hc-b-label { font-size: max(2.05cqw, 10px); }
  .hc-b-col:last-child .hc-b-label { font-size: max(2.35cqw, 10.5px); }
  .hc-b-strong { font-size: max(2.55cqw, 12px); }
  .hc-b-line { font-size: max(2.25cqw, 11px); }
  .hc-b-updated .hc-b-label { font-size: max(1.85cqw, 9.5px); }
  .hc-b-date { font-size: max(2.05cqw, 10.5px); }
  .hc-b-verified { font-size: max(2.2cqw, 10.5px); }
  .hc-b-icon { width: max(4.2cqw, 16px); height: max(4.2cqw, 16px); }
  .hc-b-col + .hc-b-col { padding-left: 3cqw; }
  .hc-head { margin-bottom: 22px; }
  .hc-sub { font-size: 14.5px; }
  .hc-active { padding: 9px 14px; font-size: 13.5px; }
  .hc-actions { gap: 10px; }
  .hc-action { padding: 12px 18px; font-size: 14.5px; gap: 9px; }
  .hc-form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-card.is-settling { transition: none; }
}

/* Print: only the card, both faces flat at real ID-card size. */
@media print {
  body.print-health-card #app > *:not(.body-row),
  body.print-health-card .body-row > *:not(main),
  body.print-health-card main.content > section:not(#view-emergency),
  body.print-health-card .hc-page > *:not(.hc-print-sheet) { display: none !important; }
  body.print-health-card .hc-print-sheet { display: flex !important; gap: 4mm; }
  .hc-print-face {
    position: relative; width: 90mm; height: 53.6mm; container-type: inline-size; overflow: hidden;
    border: 0.3mm solid #CCC; border-radius: 3.2mm; font-size: 2.4cqw; color: #17231F; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .hc-print-face.hc-back { transform: none; display: flex; flex-direction: column; }
  .hc-print-face.hc-front { transform: none; }
}


/* ---------------------------------------------------------------- timing safety UI */
.safety-modal-overlay { position: fixed; inset: 0; background: rgba(22,36,31,0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 16px; }
.safety-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); padding: 22px 22px 18px; width: min(460px, 100%); max-height: 88vh; overflow-y: auto; }
.safety-modal h3 { margin: 0 0 2px; }
.sm-sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 10px; }
.sm-headline { font-size: 15px; font-weight: 600; margin: 10px 0; }
.sm-never { background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-weight: 600; margin: 10px 0; }
.sm-quote { border-left: 3px solid var(--teal); padding: 4px 0 4px 10px; margin: 10px 0; font-size: 13px; color: var(--ink-soft); }
.sm-quote a { color: var(--teal-dark); }
.sm-unreviewed { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }
.sm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.missed-row .missed-help { margin-left: 8px; }
.conflict-item { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; }
.conflict-item.needs_clarification { border-left-color: var(--alarm); }
.conflict-meds { font-weight: 700; margin-bottom: 2px; }
.conflict-proposal { margin-top: 8px; background: var(--teal-soft); color: var(--teal-dark); border-radius: var(--radius-sm); padding: 8px 10px; }
.conflict-clarify { margin-top: 8px; color: var(--alarm); font-weight: 600; }
.conflict-source { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.reg-med { border-top: 1px solid var(--line); padding: 10px 0; }
.reg-med:first-of-type { border-top: none; }
.reg-check { margin: 8px 0 0; font-size: 13px; }
.reg-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.reg-chip.IN { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.reg-chip.US { background: var(--teal-soft); color: var(--teal-dark); border-color: transparent; }
.reg-status { font-weight: 700; }
.reg-status.restricted_status_identified, .reg-status.regulatory_alert_found { color: var(--alarm); }
.reg-status.potential_match { color: var(--amber); }
.reg-meta { color: var(--ink-faint); font-size: 12px; }

.scan-option { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.scan-result label { font-size: 12.5px; color: var(--ink-soft); }
.scan-result input[type="text"], .scan-result input[type="number"], .scan-result select { width: 100%; }

.verif-row { margin-top: 8px; }
.verif-row .reg-chip { margin-bottom: 4px; }
.scan-option { text-align: left; }
.scan-option > span { flex: 1; min-width: 0; }
.scan-result input[type="radio"], .scan-result input[type="checkbox"] { width: 18px; height: 18px; flex: none; padding: 0; margin: 2px 0 0; accent-color: var(--teal); }
.scan-result label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; }


/* ---------------------------------------------------------------- alerts: calm, scannable, never "emergency red" */
.alert-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
.alert-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.alert-summary { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); margin-bottom: 8px; }
.alert-card { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--line); margin-bottom: 10px; background: var(--surface); }
.alert-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.alert-icon svg { width: 18px; height: 18px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.alert-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-top: 10px; font-weight: 700; }
.alert-text { font-size: 13.5px; margin-top: 2px; }
.alert-do { margin-top: 10px; background: rgba(255,255,255,0.75); border-radius: var(--radius-sm); padding: 9px 11px; border: 1px solid rgba(0,0,0,0.05); }
.alert-card.tone-action { background: #FFF8EC; border-color: #E7B25B; }
.alert-card.tone-action .alert-icon { background: var(--amber-soft); color: var(--amber); }
.alert-card.tone-care { background: #FFFCF0; border-color: #E8D589; }
.alert-card.tone-care .alert-icon { background: #FBF1C7; color: #8A6D00; }
.alert-card.tone-info { background: var(--blue-soft); border-color: transparent; }
.alert-card.tone-info .alert-icon { background: #fff; color: var(--blue); }
.alert-card.tone-clear { background: var(--teal-soft); border-color: transparent; align-items: center; }
.alert-card.tone-clear .alert-icon { background: #fff; color: var(--teal-dark); }
.alert-card.tone-clear .alert-title { color: var(--teal-dark); font-weight: 600; }
.gap-vis { margin-top: 10px; }
.gap-ends { display: flex; justify-content: space-between; gap: 10px; }
.gap-time { font-size: 18px; font-weight: 800; line-height: 1.1; }
.gap-name { font-size: 12.5px; color: var(--ink-soft); }
.gap-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); margin: 8px 0 4px; overflow: hidden; }
.gap-fill { height: 100%; background: var(--amber); border-radius: 999px; }
.gap-caption { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); }
.alert-why { margin-top: 10px; font-size: 12.5px; }
.alert-why summary { cursor: pointer; color: var(--teal-dark); font-weight: 600; }


/* ---------------------------------------------------------------- today's schedule */
.today-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.today-pill.ok { background: var(--teal-soft); color: var(--teal-dark); }
.today-pill.muted { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }
.today-pill.care { background: #FBF1C7; color: #8A6D00; }
.today-pill.action { background: var(--amber-soft); color: var(--amber); }
.today-pill.info { background: var(--blue-soft); color: var(--blue); }
.dose-calendar-slot.is-done { opacity: 0.72; }
.today-done { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--teal-soft); color: var(--teal-dark); font-size: 13.5px; font-weight: 600; }


/* ---------------------------------------------------------------- simple prescription tab + calm dashboard header */
.add-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.add-big { flex: 1 1 170px; padding: 18px 14px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.add-big .icon { display: inline-flex; width: 20px; height: 20px; }
.add-big .icon svg { width: 100%; height: 100%; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.dash-head h2 { margin: 0; }
.chip-link { display: block; width: 100%; text-align: left; margin-bottom: 12px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid #E7B25B; background: #FFF8EC; color: var(--amber); font-weight: 600; font-size: 13.5px; cursor: pointer; }

.routine-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.routine-row input[type="time"] { width: auto; min-width: 110px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 8px; }
.check-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--teal); }

.today-done.has-missed { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); font-weight: 500; }

.is-early { opacity: 0.6; border-style: dashed; }

/* ---------------------------------------------------------------- phone fixes
   These sit at the END of the file on purpose: an earlier mobile rule for .hero-next-dose lost to the base rule that
   appears later in the file (align-items: center beat stretch), which centred the card's contents and made the
   "Next dose" block look off-centre on phones. */
@media (max-width: 560px) {
  /* Next dose: icon + name on top, countdown and button on one line underneath, hint below - all left-aligned */
  .hero-next-dose { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 18px 16px; }
  .hero-next-dose > div:first-child { flex-direction: column; justify-content: center; text-align: center; width: 100%; }
  .hero-next-dose > div:first-child > div { text-align: center; }
  .hero-next-dose .med-name { font-size: 26px; font-weight: 800; }
  .hero-next-dose .countdown { font-size: 24px; font-weight: 800; }
  .hero-next-dose > div:last-child { text-align: center !important; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  .hero-next-dose > div:last-child button { margin-top: 0 !important; min-width: 180px; font-weight: 800; }
  .hero-next-dose > div:last-child .reg-meta { margin-top: 0 !important; text-align: center; }

  /* Alert cards: the icon floats so the text can use the whole card width instead of a narrow column */
  .alert-card { display: block; padding: 12px; }
  .alert-card.tone-clear { display: flex; align-items: center; }
  .alert-icon { float: left; width: 30px; height: 30px; margin: 0 10px 4px 0; }
  .alert-card.tone-clear .alert-icon { float: none; flex: none; margin: 0 10px 0 0; }
  .alert-icon svg { width: 16px; height: 16px; }
  .alert-title { font-size: 14.5px; }
  .alert-do { clear: both; }
  .gap-time { font-size: 15px; white-space: nowrap; }
  .gap-name { font-size: 12px; }
  .gap-caption { flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }

  /* Routine card: label above a full-width time field (the native time input was clipping "AM/PM") */
  .routine-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .routine-row input[type="time"] { width: 100%; min-width: 0; font-size: 16px; }

  /* Card headings: icon and title stay on one line */
  .card-head { flex-wrap: nowrap; }
  .card-head h3 { min-width: 0; }
}

/* Next-dose card: everything centred at every screen width (name, time, countdown, Mark taken) */
.hero-next-dose { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.hero-next-dose > div:first-child { flex-direction: column; justify-content: center; text-align: center; width: 100%; }
.hero-next-dose > div:first-child > div { text-align: center; }
.hero-next-dose .med-name { font-size: 26px; font-weight: 800; }
.hero-next-dose .countdown { font-size: 24px; font-weight: 800; }
.hero-next-dose > div:last-child { text-align: center !important; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.hero-next-dose > div:last-child button { margin-top: 0 !important; min-width: 180px; font-weight: 800; }
.hero-next-dose > div:last-child .reg-meta { margin-top: 0 !important; text-align: center; }

/* Settings: notifications first, everything else in tidy collapsible rows */
.set-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.set-top h2 { margin: 0; }
.set-top .session-chip { display: flex; align-items: center; gap: 10px; }
.set-group { background: var(--surface, #fff); border: 1px solid var(--line, #e3e8e6); border-radius: 16px; margin-top: 12px; padding: 0 16px; }
.set-group > summary { cursor: pointer; list-style: none; font-weight: 700; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; }
.set-group > summary::-webkit-details-marker { display: none; }
.set-group > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.set-group[open] > summary::after { transform: rotate(-135deg); margin-top: 6px; }
.set-group[open] { padding-bottom: 14px; }
.set-group .card { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.set-group .card-head { display: none; }
.set-group:not(.set-static):not(:has(.card)) { display: none; }

/* Check sources: one verdict per medicine, details under "More" */
.reg-summary { padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.reg-summary.ok { background: var(--teal-soft); color: var(--teal-dark); }
.reg-summary.warn { background: #FDF0DC; color: #8A5A00; }
.reg-med { padding: 10px 0; border-top: 1px solid var(--line, #e3e8e6); }
.reg-med:first-of-type { border-top: 0; }
.reg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reg-verdict { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.reg-verdict.ok { background: var(--teal-soft); color: var(--teal-dark); }
.reg-verdict.warn { background: #FDF0DC; color: #8A5A00; }
.reg-verdict.muted { background: #ECEFEE; color: #5b6663; }
.reg-more { margin-top: 4px; }
.reg-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.reg-more .reg-check { margin-top: 8px; font-size: 13px; }

.push-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--teal-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.push-blocked { background: var(--amber-soft, #fdf1dc); border: 1px solid var(--amber); }

/* Timeline: taken / not taken pill */
.tl-status { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tl-status.taken { background: var(--teal-soft); color: var(--teal-dark); }
.tl-status.missed { background: #FDF0DC; color: #8A5A00; }
.tl-status.skipped { background: #ECEFEE; color: #5b6663; }

/* Today's medicines: small animated heartbeat */
.card-head .card-art { margin-left: auto; display: inline-flex; align-items: center; }
.card-art svg { overflow: visible; }
.art-heart { transform-origin: 42px 24px; animation: art-beat 1.6s ease-in-out infinite; }
.art-ecg { stroke-dasharray: 120; stroke-dashoffset: 120; animation: art-draw 2.4s linear infinite; }
@keyframes art-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 36% { transform: scale(1.07); } 48% { transform: scale(1); } }
@keyframes art-draw { 0% { stroke-dashoffset: 120; } 60%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .art-heart, .art-ecg { animation: none; stroke-dashoffset: 0; } }

/* Care report: short, readable, one idea per block */
.report-simple { padding: 18px 16px; }
.rp-head h2 { margin: 0 0 2px; }
.rp-who { font-size: 18px; font-weight: 700; }
.rp-sub { color: var(--ink-soft); font-size: 13px; }
.rp-title { margin: 22px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.rp-allergy { margin-top: 12px; background: #FBE4E0; color: #8E2018; border-radius: 12px; padding: 10px 12px; font-size: 14.5px; }
.rp-alerts { margin-top: 10px; background: #FDF0DC; color: #8A5A00; border-radius: 12px; padding: 10px 12px; font-size: 14px; display: grid; gap: 4px; }
.rp-med { padding: 9px 0; border-top: 1px solid var(--line, #e3e8e6); }
.rp-med:first-of-type { border-top: 0; }
.rp-med-name { font-weight: 700; font-size: 16px; }
.rp-dose { font-weight: 600; color: var(--ink-soft); }
.rp-when { color: var(--ink-soft); font-size: 13.5px; }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.rp-stats > div { background: var(--teal-soft); border-radius: 14px; padding: 12px 6px; }
.rp-num { font-size: 26px; font-weight: 800; color: var(--teal-dark); }
.rp-more { margin-top: 12px; border-top: 1px solid var(--line, #e3e8e6); padding-top: 10px; }
.rp-more > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.rp-count { background: var(--teal-soft); color: var(--teal-dark); border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.rp-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14.5px; }
.rp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* first-login profile popup */
#firstProfileForm { max-height: 90vh; overflow-y: auto; }
#firstProfileForm input, #firstProfileForm select { width: 100%; }
.fp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

/* login page: link to the install page */
.auth-install { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 12px 18px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-dark); font-weight: 700; text-decoration: none; max-width: 420px; }
.auth-install:hover { filter: brightness(.97); }

/* add a medicine: scan / or / manual + the step popups */
.add-full { display: flex; width: 100%; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line, #dfe6e3); }
.wz-card { background: var(--teal-soft); border-radius: 16px; padding: 16px; margin: 12px 0 4px; text-align: center; }
.wz-name { font-size: 26px; font-weight: 800; color: var(--teal-dark); word-break: break-word; }
.wz-meta { color: var(--ink-soft); margin-top: 4px; font-size: 14.5px; }
.scan-tips { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.scan-expired { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #FDECEA; color: #8E2018; font-weight: 700; font-size: 14px; text-align: left; }
.wz-label { font-weight: 700; margin: 14px 0 6px; font-size: 14px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip { border: 1.5px solid var(--line, #dfe6e3); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.wz-chip.on { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.wz-msg { color: #8E2018; font-size: 13px; min-height: 18px; margin-top: 8px; }
.safety-modal input[type=text], .safety-modal input[type=number], .safety-modal select { width: 100%; }

/* add medicine: alarm-style times and repeat days */
.wz-times { display: grid; gap: 8px; }
.wz-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--teal-soft); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.wz-time input[type=time] { width: auto !important; font-size: 18px; font-weight: 700; border: 0; background: transparent; }
.wz-days { margin-top: 10px; }
.wz-day { padding: 8px 11px; min-width: 46px; }

/* "Every day" shows all seven days selected but fixed; "Choose days" lets you pick */
.wz-days.is-locked .wz-day { pointer-events: none; opacity: .85; }

/* medicine information ("what is this for") and the add-medicine warnings */
.mi-for { margin-top: 6px; font-size: 14.5px; }
.mi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mi-chip { background: var(--teal-soft); color: var(--teal-dark); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; }
.mi-sub { font-weight: 700; font-size: 13px; margin-top: 8px; }
.mi-list { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-soft); }
.rp-info { margin-top: 2px; }
.rp-guess { margin-top: 12px; background: var(--teal-soft); border-radius: 14px; padding: 12px 14px; }
.wz-for { margin-top: 8px; }
.wz-check { min-height: 20px; }
.wz-moved { margin-top: 8px; font-weight: 700; color: var(--teal-dark); }
.safety-modal .alert-card { text-align: left; margin-top: 10px; }
.safety-modal { max-height: 90vh; overflow-y: auto; }

.mi-ok { background: var(--teal-soft); color: var(--teal-dark); border-radius: 12px; padding: 10px 12px; font-weight: 700; }

.ow-item { margin-top: 10px; }
.ow-item .alert-card { margin-top: 0; }
.safety-med-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* "Remove one of them?" inside the warning popups */
.rm-box { margin-top: 10px; background: #fff; border: 1.5px solid #E8C9C4; border-radius: 14px; padding: 10px 12px; }
.rm-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: #8E2018; }
.rm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.rm-row + .rm-row { border-top: 1px solid #F1E3E0; }
.rm-row > span { font-weight: 600; min-width: 0; word-break: break-word; }
.rm-btn { color: #8E2018; border-color: #E8A79E; font-weight: 700; flex: none; }

/* compact "don't take these together" popup */
.cw-modal .safety-modal { max-width: 340px; padding: 18px; }
.cw-modal h3 { margin: 0 0 6px; font-size: 18px; }
.cw-item { margin-top: 10px; padding: 10px 12px; border: 1.5px solid #E8C9C4; background: #FDF4F2; border-radius: 14px; }
.cw-names { font-weight: 800; font-size: 15.5px; word-break: break-word; }
.cw-note { color: #8E2018; font-size: 13px; margin-top: 2px; }
.cw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cw-actions .small { padding: 7px 10px; font-size: 13px; }
.cw-modal .sm-actions { margin-top: 12px; }

/* ---------- caregiver portal pages ---------- */
.cg-menu-link { display: block; padding: 12px 14px; border-radius: 12px; font-weight: 700; text-decoration: none; color: var(--ink); }
.cg-menu-link.active { background: var(--teal-soft); color: var(--teal-dark); }
.cg-back { display: inline-block; margin-bottom: 6px; font-weight: 600; text-decoration: none; color: var(--teal-dark); }
.cg-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-title h2 { margin: 0; }
.cg-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0; padding-bottom: 4px; scrollbar-width: none; }
.cg-tabs a { flex: none; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line, #e3e8e6); }
.cg-tabs a.active { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.cg-body > * + * { margin-top: 12px; }
.cg-patient { display: block; text-decoration: none; color: inherit; text-align: left; }
.cg-next { background: var(--teal-soft); border-radius: 16px; padding: 14px 16px; }
.cg-next-name { font-size: 24px; font-weight: 800; color: var(--teal-dark); }
.cg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cg-link { text-decoration: none; display: inline-flex; align-items: center; }
.cg-note { border-top: 1px solid var(--line, #e3e8e6); padding: 10px 0; }
.cg-note:first-child { border-top: 0; }
.cg-note-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cg-note-body { white-space: pre-wrap; word-break: break-word; margin: 4px 0 6px; }
.cg-notes { margin-top: 10px; }
.cg-form textarea { width: 100%; resize: vertical; }
.cg-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.cg-err { color: #8E2018; font-size: 13px; min-height: 18px; margin-top: 4px; }
.cg-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.cg-med-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.cg-added-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.cg-add-med h3 { margin: 0 0 4px; }
.added-by { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: 2px 8px; }
.cg-permed { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line, #e3e8e6); font-size: 14px; }
.cg-form textarea { font: inherit; }
.cg-check input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 0; }
.cg-check { justify-content: flex-start; }

.cg-menu-head { margin: 14px 4px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); word-break: break-word; }
.cg-section { margin: 6px 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- feedback page + rate popup (patient app and caregiver portal) ---------- */
.fb-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, #E3F4EC 0%, #F4FBF8 60%, #FFF7E3 100%); border: 1px solid #D5EBE1; border-radius: 22px; padding: 18px 18px 8px; margin-bottom: 14px; overflow: hidden; }
.fb-hero-text { flex: 1 1 55%; min-width: 0; }
.fb-hero h2 { margin: 0 0 6px; font-size: clamp(20px, 5vw, 26px); line-height: 1.15; }
.fb-hero p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.fb-art { flex: 0 0 min(44%, 210px); width: min(44%, 210px); height: auto; }
.fb-blob { fill: #CDEBDD; opacity: .7; animation: fbDrift 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fb-blob.b2 { fill: #FBE7B5; animation-duration: 12s; animation-direction: reverse; }
.fb-bubble { animation: fbBob 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fb-heart { animation: fbBeat 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fb-star { animation: fbTwinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fb-star.s2 { animation-delay: .7s; } .fb-star.s3 { animation-delay: 1.4s; }
.fb-plus { animation: fbTwinkle 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fb-plus.p2 { animation-delay: 1s; }
@keyframes fbBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes fbBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes fbTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(1.35) rotate(14deg); opacity: 1; } }
@keyframes fbDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -8px); } }

.fb-card { max-width: 620px; padding: 20px 18px; border-radius: 22px; }
.fb-label { font-weight: 800; margin: 18px 0 8px; font-size: 15px; }
.fb-label:first-child { margin-top: 0; }
.fb-face { font-size: 64px; line-height: 1; text-align: center; margin: 6px 0 2px; min-height: 72px; }
.fb-face.big { font-size: 56px; margin-bottom: 4px; min-height: 0; }
.fb-face.pop { animation: fbPop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fbPop { 0% { transform: scale(.4) rotate(-12deg); opacity: .3; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.fb-stars { display: flex; justify-content: center; gap: 4px; }
.fb-star-btn { background: none; border: 0; padding: 2px 4px; font-size: 44px; line-height: 1; color: #D5DDD9; cursor: pointer; transition: transform .12s, color .12s; }
.fb-star-btn.on { color: #F2B01E; text-shadow: 0 3px 10px rgba(242, 176, 30, .45); }
.fb-star-btn:hover { transform: scale(1.18) rotate(-6deg); }
.fb-star-btn:active { transform: scale(.92); }
.fb-word { text-align: center; min-height: 22px; font-weight: 800; color: var(--teal-dark); margin-top: 2px; }
.fb-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .fb-tiles { grid-template-columns: repeat(4, 1fr); } }
.fb-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--line, #dfe6e3); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.fb-tile-icon { font-size: 26px; line-height: 1; }
.fb-tile:hover { transform: translateY(-2px); }
.fb-tile.on { border-color: var(--teal-dark); background: var(--teal-soft); color: var(--teal-dark); box-shadow: 0 6px 16px rgba(18, 135, 111, .18); }
.fb-card textarea, .fb-modal textarea { width: 100%; font: inherit; resize: vertical; border-radius: 14px; padding: 12px 14px; }
.fb-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.fb-count { background: var(--teal-soft); color: var(--teal-dark); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.fb-switch { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 14.5px; cursor: pointer; }
.fb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-switch-track { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #CBD5D1; position: relative; transition: background .15s; }
.fb-switch-track i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .15s; }
.fb-switch input:checked + .fb-switch-track { background: var(--teal-dark); }
.fb-switch input:checked + .fb-switch-track i { transform: translateX(18px); }
.fb-switch input:focus-visible + .fb-switch-track { outline: 3px solid rgba(18, 135, 111, .35); }
.fb-err { color: #8E2018; font-size: 13px; min-height: 18px; margin: 6px 0; }
.fb-send { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-size: 17px; font-weight: 800; border-radius: 16px; position: relative; overflow: hidden; }
.fb-send::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80px; width: 50px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-20deg); animation: fbSweep 3.6s ease-in-out infinite; }
@keyframes fbSweep { 0%, 55% { left: -80px; } 100% { left: 120%; } }

.fb-thanks { position: relative; text-align: center; padding: 22px 8px 14px; }
.fb-check-svg { width: 76px; height: 76px; }
.fb-check-svg circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: fbDraw .6s ease-out forwards; }
.fb-check-svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fbDraw .4s .45s ease-out forwards; }
@keyframes fbDraw { to { stroke-dashoffset: 0; } }
.fb-thanks h3 { margin: 6px 0 2px; font-size: 24px; }
.fb-confetti { position: absolute; left: 50%; top: 52px; width: 0; height: 0; pointer-events: none; }
.fb-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: fbConfetti 1.1s var(--t) ease-out forwards; }
@keyframes fbConfetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); opacity: 0; } }

.fb-earlier { margin: 22px 0 4px; }
.fb-item { margin-top: 10px; border-radius: 16px; }
.fb-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-stars-ro { color: #F2B01E; letter-spacing: 2px; }
.fb-item-body { margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

.fb-modal .safety-modal { max-width: 360px; text-align: center; border-radius: 24px; }
.fb-modal .fb-star-btn { font-size: 40px; }
.fb-pop-art { margin: -6px auto 0; max-width: 200px; }
.fb-pop-art .fb-art { width: 100%; }
.fb-modal h3 { margin: 4px 0 4px; }
.fb-modal .sm-actions { justify-content: center; margin-top: 10px; }
.fb-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.fb-link { background: none; border: 0; padding: 4px; color: var(--ink-soft); font: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .fb-blob, .fb-bubble, .fb-heart, .fb-star, .fb-plus, .fb-send::after, .fb-face.pop, .fb-confetti i { animation: none !important; } .fb-check-svg circle, .fb-check-svg path { animation: none; stroke-dashoffset: 0; } .fb-confetti { display: none; } }

/* Settings: personal information form */
.sp-form input, .sp-form select { width: 100%; }
.sp-msg { min-height: 20px; margin-top: 8px; font-size: 13.5px; color: #8E2018; }
.sp-msg.ok { color: var(--teal-dark); font-weight: 700; }


/* Dose popups: "Time for X" and "You missed X" - compact and calm */
.dp-overlay .safety-modal { width: min(340px, 100%); padding: 22px 20px 14px; border-radius: 22px; text-align: center; animation: dp-in .22s ease-out; }
@keyframes dp-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.dp-icon { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); display: flex; align-items: center; justify-content: center; }
.dp-icon-due { background: var(--teal-soft, #E2F3EF); color: var(--teal-dark); }
.dp-icon svg { width: 24px; height: 24px; }
.dp h3 { margin: 0; font-size: 19px; }
.dp-sub { color: var(--ink-soft); font-size: 13.5px; margin: 3px 0 8px; }
.dp-line { font-size: 14.5px; margin: 8px 0; line-height: 1.4; }
.dp-never { font-size: 12.5px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: 10px; padding: 7px 10px; margin: 8px 0; }
.dp-more { text-align: left; margin: 6px 0; font-size: 13px; }
.dp-more summary { cursor: pointer; color: var(--teal-dark); font-weight: 600; text-align: center; list-style: none; }
.dp-more summary::-webkit-details-marker { display: none; }
.dp-notes { margin: 6px 0 0 18px; font-size: 13px; }
.dp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dp-actions button { width: 100%; padding: 12px; font-size: 15px; border-radius: 14px; }
.dp-close { background: none; border: 0; color: var(--ink-faint); font-size: 13px; padding: 10px; cursor: pointer; }


/* Guided tour: spotlight on the real screen + a short card */
.tour-root { position: fixed; inset: 0; z-index: 1300; }
.tour-block { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(18,32,27,.62), 0 0 0 3px var(--teal); transition: all .3s ease; pointer-events: none; }
.tour-tip { position: fixed; left: 50%; transform: translateX(-50%); width: min(360px, calc(100vw - 24px)); background: var(--surface); border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 18px 18px 14px; text-align: left; animation: dp-in .22s ease-out; }
.tour-tip.center { top: 50% !important; transform: translate(-50%, -50%); text-align: center; background: var(--surface); }
.tour-root:has(.tour-spot[hidden]) { background: rgba(18,32,27,.62); }
.tour-icon { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; background: #E2F3EF; color: var(--teal-dark); display: flex; align-items: center; justify-content: center; animation: tour-pop .4s ease-out both; }
.tour-icon svg { width: 28px; height: 28px; }
@keyframes tour-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tour-step { font-size: 12px; font-weight: 700; color: var(--teal-dark); letter-spacing: .04em; text-transform: uppercase; }
.tour-tip h3 { margin: 2px 0 4px; font-size: 18px; }
.tour-tip p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
.tour-bar { height: 4px; border-radius: 2px; background: #E4EBE8; margin: 8px 0 12px; overflow: hidden; }
.tour-bar span { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.tour-actions { display: flex; gap: 8px; }
.tour-actions button { flex: 1; padding: 11px; font-size: 15px; border-radius: 14px; }
.tour-sample { background: #F5F8F7; border-radius: 16px; padding: 12px; margin: 4px 0 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); animation: tour-pop .4s ease-out both; }
.tour-sample strong { color: var(--ink); font-size: 15px; }
.tour-sample-icon { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.tour-sample-icon.amber { background: var(--amber-soft); color: var(--amber); }
.tour-sample-icon.rose { background: #FBE6E3; color: #B3261E; }
.tour-sample-note { background: var(--amber-soft); color: var(--amber); border-radius: 10px; padding: 6px 8px; font-weight: 600; }
.tour-sample-note.rose { background: #FBE6E3; color: #B3261E; }
.tour-sample-btns { display: flex; gap: 6px; margin-top: 4px; }
.tour-sample-btns .b { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid #D5DFDB; font-weight: 600; color: var(--ink); }
.tour-sample-btns .b.p { background: var(--teal); border-color: var(--teal); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tour-tip, .tour-icon, .tour-sample, .tour-spot { animation: none; transition: none; } }

/* Tour on a phone: respect the notch / home bar, keep buttons thumb-sized */
@media (max-width: 600px) { .tour-tip { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .tour-actions button { min-height: 46px; } .tour-tip h3 { font-size: 17px; } }

/* Continue with Google + first-time role choice (login page) */
.google-box { margin-top: 14px; }
.google-box[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 13px; margin-bottom: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.g-role { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(18,32,27,.55); }
.g-role[hidden] { display: none; }
.g-role-card { width: min(380px, 100%); background: #fff; border-radius: 22px; padding: 22px 18px 14px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.g-role-card h3 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.g-role-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.g-role-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; margin-bottom: 10px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; }
.g-role-opt b { font-size: 16px; color: var(--ink); }
.g-role-opt span { font-size: 13px; color: var(--ink-soft); }
.g-role-opt:hover, .g-role-opt:focus-visible { border-color: var(--teal); background: var(--teal-soft); }
@media (min-width: 600px) { .g-role { align-items: center; } }

/* A dose button that is waiting for the server: looks pressed, shows a small spinner, ignores more taps. */
button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
button.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2.5px solid rgba(18,135,111,.25); border-top-color: #12876F; animation: busy-spin .7s linear infinite; }
button.primary.is-busy::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
button[data-busy="1"]:not(.is-busy) { opacity: .55; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Caregiver phone home: Family list + Today's doses. One narrow column, soft cards, green accent. */
.cg-phone { max-width: 480px; margin: 0 auto; display: grid; gap: 22px; }
.cg-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cg-row-head h2 { margin: 0; font-size: 20px; }
.add-member { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13.5px; background: var(--teal-soft); color: var(--teal-dark); cursor: pointer; }
.view-all { border: 0; background: none; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; padding: 6px 2px; }
.fam-list { display: grid; gap: 10px; }
.fam-row, .dose-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: inherit; min-height: 60px; }
.fam-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fam-text b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-text small { font-size: 13px; color: var(--ink-soft); }
.fam-chev { font-size: 24px; color: var(--ink-faint); line-height: 1; }
.fam-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.fam-avatar.rose { background: #FBE2DD; color: #D3402A; }
.fam-avatar.blue { background: var(--blue-soft); color: var(--blue); }
.fam-avatar.green { background: var(--teal-soft); color: var(--teal-dark); }
.fam-avatar.amber { background: var(--amber-soft); color: var(--amber); }
.fam-avatar.violet { background: #ECE6FB; color: #6B48C8; }
.dose-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-dark); }
.dose-icon svg { width: 18px; height: 18px; }
.dose-pill { flex: none; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; }
.dose-pill.taken { background: var(--teal-soft); color: var(--teal-dark); }
.dose-pill.pending { background: #EEF2F0; color: var(--ink-soft); }
.dose-pill.missed { background: var(--alarm-soft); color: var(--alarm); }

/* Family invite page (/join/<code>) */
.join-card h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; }
.join-btn { display: block; width: 100%; margin-top: 12px; text-align: center; text-decoration: none; }
.join-list { margin: 8px 0 12px; padding-left: 20px; line-height: 1.7; color: var(--ink); }

/* Add member sheet + Family home touches */
.fam-you { border-color: var(--teal); }
.fam-missed { color: var(--alarm); font-weight: 700; }
.fam-hint { margin: 10px 4px 0; }
.am-row { display: flex; gap: 8px; }
.am-row input { flex: 1; min-width: 0; }
.am-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--ink-faint); font-size: 13px; }
.am-or::before, .am-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.am-code { font-size: 30px; font-weight: 800; letter-spacing: 3px; text-align: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 14px; padding: 14px 8px; margin: 12px 0; user-select: all; }
.am-share { display: grid; gap: 8px; }
.am-share a.primary { display: block; text-align: center; text-decoration: none; }
.cg-head-btns { display: inline-flex; gap: 8px; }
.join-code { border: 1.5px solid var(--teal); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13.5px; background: transparent; color: var(--teal-dark); cursor: pointer; }
.fam-alerts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--amber-soft); color: var(--ink); font-size: 14px; }
.am-share a.primary { background: var(--teal); color: #fff; border-radius: 999px; padding: 13px 18px; font-weight: 700; box-shadow: 0 4px 12px rgba(18, 135, 111, .25); }
.fam-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fam-hint .view-all { color: var(--teal-dark); font-weight: 700; font-size: 14px; text-decoration: underline; padding: 4px 0; }

/* Remember me, delete account, add-medicine popup */
.auth-remember { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink); cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; margin: 0; }
button.danger { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.danger-text { color: var(--alarm); border-color: var(--alarm-soft); }
.cg-add-options { display: grid; gap: 10px; margin-top: 12px; }
.cg-add-options button { width: 100%; min-height: 48px; }

/* Terms and Privacy pages, and the line under the login form */
body.legal-body { background: var(--paper); }
.legal { max-width: 720px; margin: 0 auto; padding: 20px 18px 56px; line-height: 1.65; color: var(--ink); }
.legal h1 { font-size: 28px; margin: 14px 0 4px; }
.legal h2 { font-size: 18px; margin: 28px 0 6px; }
.legal p, .legal li { font-size: 15.5px; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 5px 0; }
.legal a { color: var(--teal-dark); font-weight: 600; }
.legal-back { display: inline-block; text-decoration: none; font-weight: 700; }
.legal-meta { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 16px; }
.legal-box { background: var(--teal-soft); border-radius: 16px; padding: 14px 18px; margin: 16px 0; }
.legal-box ul { margin: 6px 0 0; }
.auth-legal { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.auth-legal a { color: var(--teal-dark); font-weight: 600; }

/* Remove sits UNDER each person's row on the Family home (not beside it) */
.fam-item { display: grid; gap: 2px; }
.fam-remove { justify-self: end; border: 0; background: none; color: var(--alarm); font-weight: 700; font-size: 13px; padding: 6px 10px; min-height: 32px; cursor: pointer; border-radius: 8px; }
.fam-remove:hover { background: var(--alarm-soft); }