/* ===== Theme: "Calm Balance" (design/IMG_1667_Style.jpg) =====
   Lavender, peach and coral pastels on a lavender-to-cream background.
   A deep-plum dark version is defined at the bottom of this file; it is
   used when the phone is in dark mode (Automatic) or chosen in Settings
   (<html data-theme="light|dark">). The older token names (--navy,
   --ink, --teal...) are kept so existing rules pick up the new palette. */
:root {
  color-scheme: light;
  --bg: #FBF4EC;                       /* page colour below the gradient */
  --bg-gradient: linear-gradient(180deg, #E4DDF4 0%, #F1ECF7 38%, #FBF4EC 100%);
  --card: #FFFFFF;
  --text: #2D2940;
  --muted: #6B6380;
  --border: #E3DCEE;
  --note-bg: #FFF4E8;                  /* a reading's note in History */
  --note-border: #F0CFA8;
  --ink: #3C3358;                      /* headings and button text */
  --header-text: #2D2940;
  --accent: #6F5BB5;                   /* focus rings, active states, handles */
  --navy: #CBBFEC;                     /* primary buttons (soft lavender) */
  --navy-dark: #B9ABE3;
  --on-primary: #2D2940;
  --teal: var(--accent);
  --coral: #D4644F;
  --icon: #6F5BB5;
  --shadow: rgba(80, 60, 130, 0.10);
  --tone-lavender: #DCD3F1;
  --tone-lilac: #ECE6F7;
  --tone-peach: #F8E3D2;
  --tone-coral: #F3CBB6;
  --heart-top: #F7B39A;
  --heart-bottom: #A698D9;
  --warn: #7A5300;
  --warn-bg: #FFF1DF;
  --warn-border: #EBC58A;
  --conf-medium-bg: #FFF3D1;
  --conf-medium-border: #E5B53C;
  --conf-low-bg: #FFE1DA;
  --conf-low-border: #E0765C;
  --sys-color: #D4644F;
  --dia-color: #6F5BB5;
  /* Chart (read by client/js/chart.js) */
  --chart-bg: #FFFFFF;
  --chart-grid: #ECE6F3;
  --chart-text: #6B6380;
  --chart-edge: #2D2940;
  --chart-year: #B3A8C8;
  --med-1: #8B7BD0;
  --med-2: #E39A6F;
  --med-3: #5FA38A;
  --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%236F5BB5'/%3E%3C/svg%3E");
  /* Outline colours on photos: bright enough to see on any display */
  --box-sys: #FF4D5A;
  --box-dia: #3D8BFF;
  --box-pulse: #22C55E;
  --pulse-color: #2E9467;              /* the pulse graph */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 20px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body { background: var(--bg-gradient) no-repeat, var(--bg); min-height: 100%; height: auto; }

.hidden { display: none !important; }

.app-header {
  background: transparent;
  color: var(--header-text);
  padding: 14px 8px 8px 18px;
  text-align: center;
}
/* Header: heart logo on the left, name and tagline beside it, Settings
   cog on the right. The tagline shows on Home only. */
.app-header { display: flex; align-items: center; gap: 12px; text-align: left; }
.header-heart { width: 52px; height: 44px; flex: none; }
.header-text { flex: 1; min-width: 0; }
.app-header h1 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.app-header .tagline { margin: 2px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
body:has(#screen-home.hidden) .app-header .tagline { display: none; }
/* Every screen except Home gets a compact header (smaller logo, title
   and cog, less padding) and a tighter Back row, leaving more room for
   the screen's own content. */
body:has(#screen-home.hidden) .app-header { padding: 6px 4px 2px 14px; gap: 8px; }
body:has(#screen-home.hidden) .header-heart { width: 34px; height: 29px; }
body:has(#screen-home.hidden) .app-header h1 { font-size: 0.9rem; }
body:has(#screen-home.hidden) .header-settings { width: 44px; height: 44px; }
body:has(#screen-home.hidden) .header-settings svg { width: 24px; height: 24px; }
body:has(#screen-home.hidden) .screen { padding-top: 0; }
body:has(#screen-home.hidden) .screen-head { margin-bottom: 8px; min-height: 44px; }
.header-settings {
  flex: none;
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: transparent; color: var(--icon); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.header-settings:active { background: var(--tone-lavender); }
.header-settings svg { width: 28px; height: 28px; }
.header-settings:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.screen {
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 20px 100px;
}

/* Back button and page title on one line. */
.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  min-height: 48px;
}
.screen-head h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  min-width: 0;
}

.big-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 22px 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  text-align: left;
}
.big-button .icon { font-size: 1.6rem; }
.big-button { border-radius: 20px; box-shadow: 0 2px 10px var(--shadow); }
.big-button.primary { background: var(--navy); color: var(--on-primary); }
.big-button.primary:active { background: var(--navy-dark); }
.big-button.secondary { background: var(--card); color: var(--ink); border: 2px solid var(--border); }
/* Home buttons, each in its own pastel as in the design */
.big-button.tone-lavender { background: var(--tone-lavender); color: var(--ink); border: none; }
.big-button.tone-lilac { background: var(--tone-lilac); color: var(--ink); border: none; }
.big-button.tone-peach { background: var(--tone-peach); color: var(--ink); border: none; }
.big-button.tone-coral { background: var(--tone-coral); color: var(--ink); border: none; }
.big-button svg.icon { width: 32px; height: 32px; flex: none; color: var(--icon); }
.big-button.secondary:active { background: var(--bg); }

.back-button {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 10px 12px 10px 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 24px;
}
.card h2 { margin-top: 0; font-size: 1rem; color: var(--muted); text-transform: none; }

.reading-display { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.reading-display small { font-size: 1rem; font-weight: 400; color: var(--muted); }
.muted { color: var(--muted); font-size: 0.95rem; font-weight: 400; margin-top: 6px; }

.field-label {
  display: block;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--ink);
}
.big-input {
  width: 100%;
  font-size: 1.2rem;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}
.big-input:focus { outline: 3px solid var(--accent); border-color: var(--accent); }

.hint { color: var(--muted); font-size: 0.95rem; margin-top: 8px; }
.hint.warning { color: var(--warn, #7A5300); font-weight: 600; }
#btn-enter-manually { margin-top: 12px; }

.export-row { display: flex; gap: 10px; margin-bottom: 16px; }
.small-button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.history-item .row-actions { display: flex; gap: 4px; }
.history-item .edit-btn,
.history-item .delete-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px 10px;
}

#preview-img {
  width: 100%;
  border-radius: 14px;
  margin: 16px 0;
  border: 1px solid var(--border);
}

/* ---------- Photo chosen: fit photo, date and buttons on one phone screen ----------
   The page becomes exactly one screen tall and the photo takes whatever
   height is left. The whole photo is scaled to fit (object-fit: contain),
   never cropped: before it's read we don't know where SYS, DIA and pulse
   are, so any crop could cut them off. svh = the height with Safari's
   toolbars showing. */
body:has(#screen-capture.previewing:not(.hidden)) {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#screen-capture.previewing {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 12px;
}
#screen-capture.previewing .screen-head { margin-bottom: 4px; }
#screen-capture.previewing #preview-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#screen-capture.previewing #preview-stage {
  flex: 1 1 0;
  min-height: 140px;
  margin: 4px 0 0;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
#screen-capture.previewing #preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border: none;
  border-radius: 0;
}

/* ---------- Straighten and trim (like a document scanner) ---------- */
.preview-stage { position: relative; }
.straighten-overlay { position: absolute; overflow: visible; touch-action: none; }
.straighten-overlay .shade { fill: rgba(0, 0, 0, 0.45); fill-rule: evenodd; pointer-events: none; }
.straighten-overlay .outline { fill: none; stroke: #FFFFFF; stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.8)); }
.straighten-overlay .handle { fill: rgba(255, 255, 255, 0.25); stroke: #FFFFFF; stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.8)); }
.straighten-overlay .hit { fill: transparent; cursor: grab; }
.straighten-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; font-size: 0.95rem; font-weight: 600; color: var(--text); cursor: pointer; }
.straighten-toggle input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
#screen-capture.previewing .field-label { margin: 12px 0 6px; }
#screen-capture.previewing .hint { font-size: 0.85rem; margin: 6px 0 10px; }
#screen-capture.previewing .big-button { padding: 16px 20px; margin-bottom: 10px; }
#screen-capture.previewing .big-button:last-of-type { margin-bottom: 0; }

.status {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-weight: 600;
  text-align: center;
}

.banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  padding: 14px 16px;
  border-radius: 10px;
  margin-top: 20px;
  font-weight: 600;
}

.history-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-item .numbers { font-size: 1.35rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.history-item .numbers small { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.history-item > div:first-child { min-width: 0; }
.history-item .numbers .source { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.history-item { padding-top: 12px; padding-bottom: 12px; }
.month-head { margin: 20px 4px 8px; font-size: 0.95rem; color: var(--muted); font-weight: 700; }
.month-head:first-child { margin-top: 4px; }
.history-item .date { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
/* Saved photos: the home banner and History rows open them. */
.history-item .pending-text { flex: 1 1 auto; min-width: 0; }
.queue-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.queue-banner .small-button { flex: none; }
.offline-choice { display: grid; gap: 0; }
/* No internet: the choices replace Process, the straighten switch and the date hint. */
#screen-capture.offline #btn-process,
#screen-capture.offline .straighten-toggle,
#screen-capture.offline #date-taken-hint { display: none; }
#screen-capture.offline .status { margin-top: 10px; padding: 12px; }
.pending-note { font-weight: 600; }
.big-button.danger-text { color: var(--coral); }
.history-item .open-btn {
  min-height: 44px; padding: 6px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; font-size: 0.95rem;
}
.history-item .queued-tag {
  background: var(--warn-bg); color: var(--warn); font-size: 0.8rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
}

/* ---------- Graph screen ---------- */
/* Segmented control: one row of equal buttons in a grey tray. */
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--border);
}
.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
}
.seg-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.seg-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }

/* The graph's two edges: a ▲ at each end of a thin line under the dates,
   lined up with the plot area (CHART_PAD in chart.js: 42px left, 16px
   right). While one is dragged it follows the finger (a transform set in
   main.js), then springs back to its end. */
.edge-handles { position: relative; height: 30px; margin: -6px 16px 0 42px; }
.edge-track {
  position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  border-radius: 1px; background: var(--accent);
}
.edge-handle {
  position: absolute; top: -6px; width: 36px; height: 36px; margin-left: -18px;
  padding: 0; border: none; border-radius: 8px; cursor: ew-resize; touch-action: none;
  background: no-repeat center 12px / 14px 12px var(--triangle);
}
.edge-handle.dragging { transition: none; }
.edge-handle:not(.dragging) { transition: transform 0.18s ease-out; }
.edge-handle:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
#edge-from { left: 0; }
#edge-to { left: 100%; }

.chart-card {
  background: var(--chart-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 6px 12px;
}
#chart-canvas { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
#chart-canvas:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.chart-hint { margin: 6px 8px 0; text-align: center; font-size: 0.78rem; color: var(--muted); }

.legend { display: flex; gap: 24px; justify-content: center; margin-top: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text); }

.summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.summary-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 14px; text-align: center; }
.sum-value { font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sum-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.sum-date { color: var(--muted); font-size: 0.8rem; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; }
.dot.sys { background: var(--sys-color); }
.dot.dia { background: var(--dia-color); }
.dot.pulse { background: var(--box-pulse); }

/* ---------- Photo review (confirm) screen ---------- */
.screen.wide { max-width: 980px; }
.review { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
/* When the numbers were found, the zoomed photo and the entry boxes sit
   side by side on phones too: the numbers take about half the width, all
   three fit on screen, and each box lines up beside its number. */
.review.side { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 12px; align-items: start; }
.review.side .review-field { padding-left: 8px; border-left-width: 4px; }
.review.side .review-field .field-label { font-size: 0.9rem; }
@media (min-width: 720px) {
  .review, .review.side { grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); align-items: start; }
}
/* Quick notes sit under the photo; when the photo and boxes are stacked
   on a phone, they come after the boxes instead. */
.review-notes .field-label { margin: 8px 0 4px; font-size: 0.9rem; }
.review-notes .note-tags { gap: 6px; margin: 0; }
.review.side .review-notes .note-tags { display: grid; grid-template-columns: 1fr 1fr; }
.review.side .review-notes .note-tag { min-height: 38px; padding: 4px 8px; font-size: 0.8rem; line-height: 1.15; border-radius: 14px; }
@media (max-width: 719px) {
  .review:not(.side) .review-left { display: contents; }
  .review:not(.side) .review-notes { order: 1; }
  .review:not(.side) .review-notes .field-label { margin-top: 0; }
}
#screen-confirm .note-input.compact { min-height: 40px; margin-top: 6px; padding-top: 8px; padding-bottom: 8px; }
/* Keep Save Reading on screen on an iPhone Pro with Safari's toolbars showing (tested down to 393 x 660). */
#screen-confirm #btn-save-reading { min-height: 54px; padding-top: 10px; padding-bottom: 10px; margin-top: 8px; }
.review-photo { position: relative; overflow: hidden; border-radius: 14px; background: #000; }
.zoom-toggle { margin-top: 4px; min-height: 36px; padding: 4px 12px; font-size: 0.85rem; }
.review-canvas { position: relative; }
.review-photo.cropped .review-canvas { position: absolute; }
.review-canvas img { display: block; width: 100%; }
#btn-toggle-zoom { margin-top: 10px; }
.review-boxes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.review-boxes .box rect { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity .15s; }
.review-boxes .box text { font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, .75); font-family: inherit; }
.review-boxes.has-active .box { opacity: .35; }
.review-boxes .box.active { opacity: 1; }
.review-boxes .box.active rect { stroke-width: 3; }
.box-sys rect { stroke: var(--box-sys); }   .box-sys text { fill: var(--box-sys); }
.box-dia rect { stroke: var(--box-dia); }   .box-dia text { fill: var(--box-dia); }
 .box-pulse rect { stroke: var(--box-pulse); } .box-pulse text { fill: var(--box-pulse); }

/* The reader's value beside each outline ("SYS 128"). Shaded when the
   reader wasn't sure: amber = please check, red = probably misread. */
.review-boxes .box .pill rect { fill: rgba(255, 255, 255, 0.95); stroke-width: 2; }
.review-boxes .box .pill text { stroke: none; paint-order: normal; fill: #2D2940; }
.review-boxes .box .pill .pill-label { font-weight: 700; fill: #5A4E73; }
.review-boxes .box .pill .pill-value { font-weight: 800; }
.review-boxes .box .pill.conf-medium rect { fill: #FFE08A; }
.review-boxes .box .pill.conf-medium .pill-value { fill: #5C4200; }
.review-boxes .box .pill.conf-low rect { fill: #FFB4A3; }
.review-boxes .box .pill.conf-low .pill-value { fill: #7A1F12; }
.review-boxes .box .pill.conf-unread rect { stroke-dasharray: 4 3; }

.review-field.conf-medium input { background: var(--conf-medium-bg); border-color: var(--conf-medium-border); }
.review-field.conf-low input { background: var(--conf-low-bg); border-color: var(--conf-low-border); }
.review-field.conf-medium::after, .review-field.conf-low::after {
  display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: var(--warn);
}
.review-field.conf-medium::after { content: "The reader wasn't sure of this one. Please check it against the photo."; }
.review-field.conf-low::after { content: "This may be misread. Please check it carefully against the photo."; }

.conf-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; font-size: 0.8rem; color: var(--muted); }
.conf-key .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.conf-key .swatch.medium { background: #FFE08A; }
.conf-key .swatch.low { background: #FFB4A3; }

.review-fields { position: relative; }
.review-field { padding-left: 12px; border-left: 5px solid var(--border); left: 0; right: 0; }
.review-fields:not(.aligned) .review-field + .review-field { margin-top: 4px; }
.review-field .field-label { margin-top: 0; }
.review-fields:not(.aligned) .review-field .field-label { margin-top: 12px; }
.field-sys { border-left-color: var(--box-sys); }
.field-dia { border-left-color: var(--box-dia); }
.field-pulse { border-left-color: var(--box-pulse); }
.unread-note { display: none; margin: 6px 0 0; font-size: .9rem; font-weight: 600; color: var(--warn, #7A5300); }
.review-field.unread .unread-note { display: block; }
.review-field.unread input { border-style: dashed; border-color: #C98A00; }

.safety-card {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 18px 18px 6px;
  margin-top: 8px;
}
.safety-card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.safety-card p { margin: 0 0 14px; line-height: 1.45; }
.safety-card .install-warning { font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); padding: 10px 12px; border-radius: 8px; }
.safety-card .big-button { padding: 16px 20px; margin-bottom: 12px; }

.app-version { margin-top: 28px; text-align: center; font-size: 0.75rem; color: var(--muted); }

/* ---------- Home: the numbers first ---------- */
.latest-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.latest-col { min-width: 0; }
.latest-col + .latest-col { border-left: 1px solid var(--border); padding-left: 14px; }
.latest-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.latest-value { font-size: 1.9rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }
.latest-sub { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }

/* ---------- Update banner ---------- */
.update-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--navy); color: var(--on-primary); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 20;
}
.update-button {
  flex: none; min-height: 44px; padding: 8px 18px; border: none; border-radius: 10px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 1rem; cursor: pointer;
}

/* ---------- Settings ---------- */
.settings-section { margin: 28px 0 4px; font-size: 1.05rem; color: var(--ink); }
.advanced { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 14px; }
.advanced summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* ---------- Entry forms ---------- */
.unit { color: var(--muted); font-weight: 400; }
#screen-manual .big-button, #screen-edit .big-button { margin-top: 24px; }

/* ---------- Graph headline ---------- */
.graph-headline { margin: 4px 0 10px; text-align: center; font-size: 1rem; color: var(--muted); }
.graph-headline strong { color: var(--text); font-size: 1.25rem; }

/* ---------- Home: everything on one phone screen ----------
   Slightly slimmer buttons (still 64px+ tall, labels on one line) and a
   compact numbers card, so all four actions show without scrolling. */
#screen-home .big-button { font-size: 1.05rem; padding: 19px 18px; margin-bottom: 14px; min-height: 70px; }
#screen-home .big-button svg.icon { width: 28px; height: 28px; }
#screen-home .latest-card { padding: 12px 16px; margin-bottom: 14px; }
#screen-home .latest-value { font-size: 1.75rem; }
#screen-home .safety-card { margin-top: 16px; }

/* ---------- Credits and licences (credits.js, in Settings -> About) ---------- */
.credits { margin: 8px 0 4px; }
.credits summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.credits-group { margin: 14px 0 4px; font-size: 0.95rem; color: var(--ink); }
.credits-items { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.credits-items li + li { margin-top: 8px; }
.credits-items a { color: var(--ink); }

/* ---------- Body measurements (body.js): a quiet row on Home, then its own screen ---------- */
.body-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 14px; padding: 10px 16px;
  border: none; border-radius: 20px; background: var(--tone-lilac); color: var(--ink); box-shadow: 0 2px 10px var(--shadow);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.body-row-label { flex: 1; min-width: 0; }
.body-row-value { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.body-row-chevron { color: var(--muted); font-size: 1.6rem; line-height: 1; }
#measure-latest .latest-value { font-size: 1.45rem; white-space: nowrap; }
.measure-tabs { flex-wrap: wrap; }
.measure-tabs .seg-btn { flex: 1 1 28%; }
/* The Body Measurements screen takes the skin's tone, not plain white (Clinical's tones are white by design). */
#screen-body .latest-card, #screen-body .weight-trend, #screen-body .history-item, #screen-body .small-button { background: var(--tone-lilac); }
.weight-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.weight-trend { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.weight-trend svg { display: block; width: 100%; height: auto; }
.weight-trend figcaption { margin-top: 6px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
#screen-measure .big-button { margin-top: 24px; }
#screen-measure .big-button + .big-button { margin-top: 12px; }
#screen-body > .big-button { margin-bottom: 14px; }
#btn-export-measure { display: block; width: 100%; margin-top: 16px; }

/* ---------- Medications ---------- */
.med-list { display: grid; gap: 10px; margin: 8px 0 14px; }
.med-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font: inherit;
}
.med-item .med-name { font-weight: 700; color: var(--ink); }
.med-item .med-when { color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
#screen-medication .big-button { margin-top: 12px; }
#screen-medication .field-label { margin-top: 14px; }
#screen-medication .big-button + .big-button { margin-top: 0; }
.med-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--text); min-height: 44px; cursor: pointer; }
.med-toggle input { width: 22px; height: 22px; accent-color: var(--accent); }

/* ---------- Appearance setting ---------- */
.theme-choice { margin-top: 6px; }

/* ===== Dark "Calm Balance": deep plum ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1D1729;
    --bg-gradient: linear-gradient(180deg, #2C2344 0%, #221B33 40%, #1D1729 100%);
    --card: #2A2238;
    --text: #F2ECF8;
    --muted: #B8ADCB;
    --border: #3D3352;
    --note-bg: #3A2C2A;
    --note-border: #6B4C3F;
    --ink: #E4DAF6;
    --header-text: #F2ECF8;
    --accent: #B7A6F0;
    --navy: #8C79CF;
    --navy-dark: #7A67BF;
    --on-primary: #1B1426;
    --coral: #F4A18C;
    --icon: #C9BCF5;
    --shadow: rgba(0, 0, 0, 0.35);
    --tone-lavender: #3E3460;
    --tone-lilac: #352C4E;
    --tone-peach: #4A3A45;
    --tone-coral: #553A3C;
    --heart-top: #F4A98F;
    --heart-bottom: #9C8CD6;
    --warn: #F2C063;
    --warn-bg: #3A2F14;
    --warn-border: #6B5626;
    --conf-medium-bg: #4A3C15;
    --conf-medium-border: #C99A2E;
    --conf-low-bg: #4E2A26;
    --conf-low-border: #D9735C;
    --sys-color: #F4A18C;
    --dia-color: #B9A7F0;
    --chart-bg: #2A2238;
    --chart-grid: #3D3352;
    --chart-text: #B8ADCB;
    --chart-edge: #F2ECF8;
    --chart-year: #7E7296;
    --pulse-color: #63D29C;
    --med-1: #B3A5F0;
    --med-2: #F2B08C;
    --med-3: #8CC9B2;
    --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%23B7A6F0'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1D1729;
    --bg-gradient: linear-gradient(180deg, #2C2344 0%, #221B33 40%, #1D1729 100%);
    --card: #2A2238;
    --text: #F2ECF8;
    --muted: #B8ADCB;
    --border: #3D3352;
    --note-bg: #3A2C2A;
    --note-border: #6B4C3F;
    --ink: #E4DAF6;
    --header-text: #F2ECF8;
    --accent: #B7A6F0;
    --navy: #8C79CF;
    --navy-dark: #7A67BF;
    --on-primary: #1B1426;
    --coral: #F4A18C;
    --icon: #C9BCF5;
    --shadow: rgba(0, 0, 0, 0.35);
    --tone-lavender: #3E3460;
    --tone-lilac: #352C4E;
    --tone-peach: #4A3A45;
    --tone-coral: #553A3C;
    --heart-top: #F4A98F;
    --heart-bottom: #9C8CD6;
    --warn: #F2C063;
    --warn-bg: #3A2F14;
    --warn-border: #6B5626;
    --conf-medium-bg: #4A3C15;
    --conf-medium-border: #C99A2E;
    --conf-low-bg: #4E2A26;
    --conf-low-border: #D9735C;
    --sys-color: #F4A18C;
    --dia-color: #B9A7F0;
    --chart-bg: #2A2238;
    --chart-grid: #3D3352;
    --chart-text: #B8ADCB;
    --chart-edge: #F2ECF8;
    --chart-year: #7E7296;
    --pulse-color: #63D29C;
    --med-1: #B3A5F0;
    --med-2: #F2B08C;
    --med-3: #8CC9B2;
    --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%23B7A6F0'/%3E%3C/svg%3E");
}

/* Read out by screen readers, not shown. */
.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; }

/* ---------- Notes on readings ---------- */
.note-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.note-tag {
  min-height: 40px; padding: 6px 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 0.9rem; font-weight: 600;
}
.note-tag[aria-pressed="true"] { background: var(--note-bg); border-color: var(--note-border); }
.note-input { min-height: 64px; resize: vertical; font-family: inherit; line-height: 1.35; }
.history-item { flex-wrap: wrap; }
.history-item .note-box {
  flex: 1 1 100%; margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--note-bg); border: 1px solid var(--note-border); color: var(--text);
  font-size: 0.9rem; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere;
}

/* ---------- History: summary line and fold-away filters ---------- */
.history-summary { margin: 0 4px 8px; font-weight: 600; color: var(--text); }
.filter-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 14px; margin-bottom: 14px;
}
.filter-panel summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  font-weight: 700; color: var(--ink);
}
.filter-panel[open] { padding-bottom: 14px; }
.filter-panel .field-label { margin-top: 6px; }
.filter-panel .check-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; color: var(--text); cursor: pointer;
}
.filter-panel .check-row input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.filter-panel .big-button { margin-top: 12px; }
.filter-panel.filtering summary { color: var(--accent); }
/* Folded away with filters on: one line saying what's filtered, and Clear. */
.filter-wrap { position: relative; }
.filter-panel summary span { flex: 1; min-width: 0; padding: 8px 0; line-height: 1.3; }
.filter-panel.filtering:not([open]) summary { padding-right: 84px; }
.filter-clear-quick { position: absolute; top: 6px; right: 8px; min-height: 36px; padding: 4px 14px; }

/* Years and months beside the list: tap one to jump there. */
.history-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.history-rail {
  position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 16px); overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.history-rail button {
  min-height: 34px; min-width: 48px; padding: 2px 6px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.history-rail .rail-year { min-height: 38px; font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.history-rail .rail-year[aria-current="true"] { background: var(--note-bg); }
.history-rail .rail-month[aria-current="true"] { background: var(--accent); color: #FFFFFF; }
.history-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.month-head { scroll-margin-top: 8px; }

/* ---------- My Target ---------- */
.target-row { display: flex; align-items: flex-end; gap: 10px; }
.target-field { flex: 1 1 0; min-width: 0; }
.target-field .field-label { display: block; }
.target-slash { font-size: 1.8rem; font-weight: 700; color: var(--muted); padding-bottom: 14px; }
.summary-target { margin: 10px 0 0; text-align: center; font-weight: 600; color: var(--text); }
.summary-times { margin: 12px 0 0; text-align: center; }

/* ---------- Report for the doctor ----------
   Always light, like paper (its own copies of the light tokens, so the
   chart drawn inside it is light too, even in dark mode). */
.report-sheet {
  --text: #1F1B2E; --muted: #5C566E; --border: #DDD6EA; --card: #FFFFFF;
  --sys-color: #C4513C; --dia-color: #5E4AA8;
  --chart-bg: #FFFFFF; --chart-grid: #E6E0EF; --chart-text: #5C566E; --chart-edge: #1F1B2E; --chart-year: #A79BC0;
  --med-1: #8B7BD0; --med-2: #E39A6F; --med-3: #5FA38A;
  background: #FFFFFF; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 16px; margin-top: 18px; font-size: 0.95rem; line-height: 1.4;
}
.report-sheet h1 { font-size: 1.35rem; margin: 0 0 4px; color: var(--text); }
.report-sheet h2 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--text); }
.report-name { font-weight: 700; margin: 0; }
.report-dates, .report-small { color: var(--muted); margin: 2px 0 0; font-size: 0.85rem; }
.report-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.report-figure { border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.report-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-label { font-weight: 600; font-size: 0.85rem; }
.report-note { color: var(--muted); font-size: 0.8rem; }
.report-chart { display: block; width: 100%; height: auto; margin-top: 14px; }
.report-meds { margin: 0; padding-left: 20px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.report-table th, .report-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.report-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table tr.report-above td { font-weight: 700; }
.report-table thead { display: table-header-group; } /* repeat on each printed page */
.report-table tr { break-inside: avoid; }

@media print {
  /* Only the report: no header, buttons or other screens. */
  body > *:not(#screen-report), #screen-report > *:not(#report-sheet) { display: none !important; }
  :root { color-scheme: light; }
  html, body { background: #FFFFFF !important; background-image: none !important; }
  #screen-report { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .report-sheet { border: none; margin: 0; padding: 0; font-size: 10.5pt; }
  .report-figures { grid-template-columns: repeat(4, 1fr); }
  .report-sheet h2 { break-after: avoid; }
}

/* ---------- Checking a reading before it's saved (validate.js) ---------- */
.save-alert {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; font-weight: 600; line-height: 1.4;
  background: var(--conf-low-bg); border: 2px solid var(--conf-low-border); color: var(--text);
}
.save-alert.warning { background: var(--warn-bg); border-color: var(--warn-border); }
.save-alert.high { background: var(--conf-low-bg); border-color: var(--conf-low-border); font-size: 1.05rem; }
.save-alert p { margin: 0; }
.save-alert p + p { margin-top: 8px; }
.big-input.invalid { border-color: var(--conf-low-border); border-width: 2px; background: var(--conf-low-bg); }

/* ---------- People (profile.js) ---------- */
.header-person {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); border-radius: 22px; background: var(--card); color: var(--ink);
  font-weight: 700; font-size: 0.9rem; cursor: pointer; max-width: 30vw; flex: none;
}
.person-badge {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  color: #FFFFFF; font-weight: 800; font-size: 1rem; background: var(--med-1);
}
.person-badge.c1 { background: var(--med-2); } .person-badge.c2 { background: var(--med-3); }
.person-badge.c3 { background: var(--sys-color); } .person-badge.c4 { background: var(--dia-color); }
.person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header .tagline { overflow-wrap: anywhere; } /* wraps under the person badge, never behind it */
body:has(#screen-home.hidden) .header-person .person-name { display: none; }
@media (max-width: 380px) { .header-person .person-name { display: none; } } /* narrow phones: badge only, so the tagline keeps room */
.people-list { display: grid; gap: 10px; margin: 10px 0 14px; }
.person-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card); cursor: pointer;
  font-size: 1.1rem; font-weight: 700; color: var(--ink); text-align: left; width: 100%;
}
.person-row.current { border: 2px solid var(--accent); }
.person-row .person-detail { display: block; font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.person-row .person-text { flex: 1 1 auto; min-width: 0; }
.person-edit { margin-left: auto; flex: none; }

/* ---------- Pulse panel under the graph (optional) ---------- */
#pulse-canvas { display: block; width: 100%; margin-top: 4px; }
.graph-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.dot.pulse-line { background: var(--pulse-color); }

/* ---------- Consent before a photo is first read ---------- */
.consent-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 6px 16px; margin: 6px 0 16px; font-size: 1.05rem; line-height: 1.5; color: var(--text);
}
.consent-card a, #screen-settings .hint a { color: var(--accent); font-weight: 700; }

/* ---------- Inside the iPhone app (<html data-native>, set in index.html) ----------
   The page runs under the status bar and the home bar (viewport-fit=cover,
   Capacitor contentInset "never"), so its own background shows there in
   every theme and skin; the body is padded by the safe areas instead. */
:root[data-native] { padding-top: 0; padding-bottom: 0; }
:root[data-native] body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
:root[data-native] .history-rail {
  top: calc(8px + env(safe-area-inset-top, 0px));
  max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Reminders and the Face ID lock (Settings, iPhone app only) */
.reminder-add { display: flex; gap: 10px; align-items: stretch; }
.reminder-add .big-input { flex: 1; min-width: 0; margin: 0; }
.reminder-add .big-button { width: auto; flex: none; margin: 0; padding: 12px 18px; font-size: 1rem; }
.reminder-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 16px; margin-bottom: 8px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
}
.reminder-row .reminder-time { font-size: 1.3rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.reminder-row .small-button { flex: none; min-height: 44px; }

.lock-screen {
  position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center; text-align: center;
  background: var(--bg-gradient) no-repeat, var(--bg);
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
}
.lock-screen:not(.hidden) { display: flex; }
.lock-panel { max-width: 420px; width: 100%; }
.lock-panel h2 { color: var(--ink); }
/* Locked: the lock screen shows (even before main.js runs) and nothing else does. */
:root[data-locked] #screen-lock.hidden { display: flex !important; }
:root[data-locked] body > :not(#screen-lock) { visibility: hidden; }

/* ===== Skin "Clinical": plainer and denser, in the iPhone's own colours =====
   For people who prefer a professional, Apple-system look. Chosen in Settings (Style); applied as
   <html data-skin="clinical">. Light uses system grey and blue; dark is true black. These blocks come last
   so they win over the Calm Balance themes above (equal or lower specificity). */
:root[data-skin="clinical"] {
    color-scheme: light;
    --bg: #F2F2F7;
    --bg-gradient: linear-gradient(180deg, #F2F2F7, #F2F2F7);
    --card: #FFFFFF;
    --text: #1C1C1E;
    --muted: #6E6E73;
    --border: #D1D1D6;
    --note-bg: #F2F2F7;
    --note-border: #D1D1D6;
    --ink: #1C1C1E;
    --header-text: #1C1C1E;
    --accent: #007AFF;
    --navy: #007AFF;
    --navy-dark: #0062CC;
    --on-primary: #FFFFFF;
    --coral: #FF3B30;
    --icon: #007AFF;
    --shadow: rgba(0, 0, 0, 0);
    --tone-lavender: #E5F0FF;
    --tone-lilac: #FFFFFF;
    --tone-peach: #FFFFFF;
    --tone-coral: #FFFFFF;
    --heart-top: #FF6B6B;
    --heart-bottom: #007AFF;
    --warn: #7A5300;
    --warn-bg: #FFF4DC;
    --warn-border: #E5B53C;
    --conf-medium-bg: #FFF3D1;
    --conf-medium-border: #E5B53C;
    --conf-low-bg: #FFE3E0;
    --conf-low-border: #FF3B30;
    --sys-color: #FF3B30;
    --dia-color: #007AFF;
    --chart-bg: #FFFFFF;
    --chart-grid: #E5E5EA;
    --chart-text: #6E6E73;
    --chart-edge: #1C1C1E;
    --chart-year: #C7C7CC;
    --pulse-color: #34C759;
    --med-1: #5E5CE6;
    --med-2: #FF9F0A;
    --med-3: #34C759;
    --box-sys: #FF3B30;
    --box-dia: #007AFF;
    --box-pulse: #34C759;
    --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%23007AFF'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="clinical"]:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #000000;
      --bg-gradient: linear-gradient(180deg, #000000, #000000);
      --card: #1C1C1E;
      --text: #F5F5F7;
      --muted: #98989F;
      --border: #38383A;
      --note-bg: #2C2C2E;
      --note-border: #48484A;
      --ink: #F5F5F7;
      --header-text: #F5F5F7;
      --accent: #0A84FF;
      --navy: #0A84FF;
      --navy-dark: #0066CC;
      --on-primary: #FFFFFF;
      --coral: #FF453A;
      --icon: #64D2FF;
      --tone-lavender: #12253F;
      --tone-lilac: #1C1C1E;
      --tone-peach: #1C1C1E;
      --tone-coral: #1C1C1E;
      --heart-top: #FF6961;
      --heart-bottom: #0A84FF;
      --warn: #FFD60A;
      --warn-bg: #3A2F10;
      --warn-border: #B8892B;
      --conf-medium-bg: #3A2F10;
      --conf-medium-border: #B8892B;
      --conf-low-bg: #3F1D1A;
      --conf-low-border: #E0594C;
      --sys-color: #FF453A;
      --dia-color: #64D2FF;
      --chart-bg: #1C1C1E;
      --chart-grid: #38383A;
      --chart-text: #98989F;
      --chart-edge: #F5F5F7;
      --chart-year: #636366;
      --pulse-color: #30D158;
      --med-1: #7D7AFF;
      --med-2: #FFB340;
      --med-3: #30D158;
      --box-sys: #FF453A;
      --box-dia: #64D2FF;
      --box-pulse: #30D158;
      --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%230A84FF'/%3E%3C/svg%3E");
  }
}
:root[data-skin="clinical"][data-theme="dark"] {
    color-scheme: dark;
    --bg: #000000;
    --bg-gradient: linear-gradient(180deg, #000000, #000000);
    --card: #1C1C1E;
    --text: #F5F5F7;
    --muted: #98989F;
    --border: #38383A;
    --note-bg: #2C2C2E;
    --note-border: #48484A;
    --ink: #F5F5F7;
    --header-text: #F5F5F7;
    --accent: #0A84FF;
    --navy: #0A84FF;
    --navy-dark: #0066CC;
    --on-primary: #FFFFFF;
    --coral: #FF453A;
    --icon: #64D2FF;
    --tone-lavender: #12253F;
    --tone-lilac: #1C1C1E;
    --tone-peach: #1C1C1E;
    --tone-coral: #1C1C1E;
    --heart-top: #FF6961;
    --heart-bottom: #0A84FF;
    --warn: #FFD60A;
    --warn-bg: #3A2F10;
    --warn-border: #B8892B;
    --conf-medium-bg: #3A2F10;
    --conf-medium-border: #B8892B;
    --conf-low-bg: #3F1D1A;
    --conf-low-border: #E0594C;
    --sys-color: #FF453A;
    --dia-color: #64D2FF;
    --chart-bg: #1C1C1E;
    --chart-grid: #38383A;
    --chart-text: #98989F;
    --chart-edge: #F5F5F7;
    --chart-year: #636366;
    --pulse-color: #30D158;
    --med-1: #7D7AFF;
    --med-2: #FFB340;
    --med-3: #30D158;
    --box-sys: #FF453A;
    --box-dia: #64D2FF;
    --box-pulse: #30D158;
    --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0 14 12H0z' fill='%230A84FF'/%3E%3C/svg%3E");
}
/* Shape and type: flat, hairline edges, tighter corners, tabular numbers. Tap targets stay as big as before. */
:root[data-skin="clinical"], :root[data-skin="clinical"] body { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
:root[data-skin="clinical"] h1, :root[data-skin="clinical"] h2, :root[data-skin="clinical"] h3 { font-weight: 700; letter-spacing: -0.02em; }
:root[data-skin="clinical"] .big-button { border-radius: 12px; box-shadow: none; border: 0.5px solid var(--border); }
:root[data-skin="clinical"] .big-button.primary { border-color: transparent; }
:root[data-skin="clinical"] .body-row { border-radius: 12px; box-shadow: none; border: 0.5px solid var(--border); }
:root[data-skin="clinical"] .card, :root[data-skin="clinical"] .history-item, :root[data-skin="clinical"] .safety-card,
:root[data-skin="clinical"] .chart-card, :root[data-skin="clinical"] .summary-card { border-radius: 12px; box-shadow: none; }
/* White text on the light-cyan badge of a fourth person would be hard to read in dark. */
@media (prefers-color-scheme: dark) { :root[data-skin="clinical"]:not([data-theme="light"]) .person-badge.c4 { color: #00263A; } }
:root[data-skin="clinical"][data-theme="dark"] .person-badge.c4 { color: #00263A; }

/* ---------- The install link (…/?install) ---------- */
.install-screen {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  background: var(--bg-gradient) no-repeat, var(--bg);
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
body.install-open { overflow: hidden; }
.install-panel { max-width: 460px; margin: 0 auto; text-align: center; }
.install-icon { border-radius: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); margin: 8px auto 12px; display: block; }
.install-panel h2 { margin: 0 0 8px; font-size: 1.45rem; }
.install-why { margin: 0 0 20px; line-height: 1.45; color: var(--muted); }
.install-kind { background: var(--card); border: 2px solid var(--accent); border-radius: 14px; padding: 16px 18px 6px; margin-bottom: 16px; text-align: left; }
.install-kind > p { margin: 0 0 12px; line-height: 1.45; }
.install-steps { margin: 0 0 12px; padding-left: 1.4em; line-height: 1.5; font-size: 1.05rem; }
.install-steps li { margin-bottom: 10px; }
.install-glyph { width: 1.3em; height: 1.3em; vertical-align: -0.3em; color: var(--accent); }
.install-arrow { text-align: center; font-size: 2rem; color: var(--accent); margin: 0 0 8px; animation: install-bob 1.4s ease-in-out infinite; }
@keyframes install-bob { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .install-arrow { animation: none; } }
.install-note { font-size: .9rem; color: var(--muted); margin: 0 0 12px; }
.install-kind .big-button { margin-bottom: 12px; }

/* Quick notes in two columns: helps lower BP (left), can raise BP (right); a button and a drop-down each. */
/* one grid for both columns, so the headings, buttons and drop-downs line up across them even when one wraps to two lines */
.note-tags.note-columns, .review.side .review-notes .note-tags.note-columns {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column; gap: 6px 10px; align-items: stretch;
}
.note-col { display: contents; }
.note-col > * { min-width: 0; }
.note-col-label { margin: 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.note-col-lower .note-col-label { color: var(--good, #2E7D4F); }
.note-col-raise .note-col-label { color: var(--warn, #9A4A00); }
.note-col .note-tag { width: 100%; }
.note-more {
  width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.review.side .review-notes .note-more { min-height: 38px; font-size: 0.8rem; padding: 4px 8px; }

/* Save and Send (improve.js): a quieter second button with a short explanation. */
.improve-offer { margin-top: 4px; }
.improve-offer .big-button { width: 100%; }
.improve-note { margin: 6px 2px 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.improve-note a { color: var(--accent); font-weight: 600; }

/* ===================== In-app camera with a guide frame (js/camera.js) ===================== */
body.camera-open { overflow: hidden; }
.camera-view { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; display: flex; flex-direction: column; }
.camera-view { overflow: hidden; }
.camera-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.camera-guide, .camera-hint, .camera-status, .camera-controls { z-index: 1; }
/* The frame: a portrait rectangle, the usual shape of an arm monitor's screen, with the rest dimmed. */
.camera-guide {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(74vw, 50vh); aspect-ratio: 4 / 5;
  border: 3px solid #3DDC84; border-radius: 16px;
  outline: 100vmax solid rgba(0, 0, 0, 0.45);   /* dims everything outside the frame */
  pointer-events: none;
}
/* Corner marks, to make the corners easy to line up */
.camera-guide span { position: absolute; inset: 0; }
.camera-guide::before, .camera-guide::after, .camera-guide span::before, .camera-guide span::after {
  content: ""; position: absolute; width: 28px; height: 28px; border: 6px solid #3DDC84;
}
.camera-guide::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.camera-guide::after { right: -6px; top: -6px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.camera-guide span::before { left: -6px; bottom: -6px; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.camera-guide span::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.camera-hint {
  position: relative; margin: max(16px, env(safe-area-inset-top)) 16px 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.55); font-size: 1rem; line-height: 1.35; text-align: center;
}
.camera-status { position: relative; margin: auto 24px 0; text-align: center; font-size: 1.05rem; }
.camera-status:empty { display: none; }
.camera-view.failed .camera-guide, .camera-view.failed .camera-shutter { display: none; }
.camera-controls {
  position: relative; margin-top: auto; padding: 20px 16px max(24px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.camera-text-button { background: none; border: none; color: #fff; font-size: 1.05rem; padding: 12px 4px; min-height: 48px; }
.camera-text-button:first-child { justify-self: start; }
.camera-text-button:last-child { justify-self: end; text-align: right; }
.camera-shutter {
  width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 6px solid rgba(255, 255, 255, 0.45);
  background-clip: padding-box;
}
.camera-shutter:disabled { opacity: 0.4; }
.camera-text-button:focus-visible, .camera-shutter:focus-visible { outline: 3px solid #3DDC84; outline-offset: 3px; }