From 92a9c488e9edf1b71686548367972d64499eb548 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 3 May 2026 21:47:17 +0000
Subject: [PATCH 1/5] Style calculator with LI palette and add status terminal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligns the embed styling with the main LI website (cream background,
blue accent, dark navy text) and tackles the layout issues called out
in review:

- Inputs and selects share padding, border-radius, and a common focus
  ring; selects get a custom chevron and uniform width so they no
  longer look like raw OS controls.
- Form labels are right-aligned in their column so they sit flush
  against the inputs; body is centred with a sensible max width so
  alerts no longer feel detached on wide iframes.
- Date-of-birth and test-date fields each sit in a soft info card;
  the card escalates to an error tone when an inline message is
  injected (e.g. "Must be after date of birth"), so the message
  visually belongs to the field it relates to.
- Range warnings/errors render attached to the input above (no border
  between them) so it's obvious which field they describe.
- Unit selects are removed from tab order (`tabindex="-1"`), giving
  consistent keyboard navigation regardless of whether a row has
  alternative units. Mouse and assistive-tech access is unchanged.
- New terminal-style status panel collects non-field events (CSV
  loaded, defaults filled, calculation complete, awaiting input,
  configuration errors). Field-specific errors stay inline only — no
  more duplicate "Error: Test date must be after date of birth"
  alongside the inline message.

https://claude.ai/code/session_019k6FFmsULqWJPK5F5uifZW
---
 embed/calculators/phenoage/index.html      |   8 +
 embed/calculators/phenoage/phenoage.js     | 185 +++++++----
 embed/calculators/phenoage/strings/en.json |  30 +-
 embed/shared/embed.css                     | 353 ++++++++++++++++-----
 4 files changed, 421 insertions(+), 155 deletions(-)

diff --git a/embed/calculators/phenoage/index.html b/embed/calculators/phenoage/index.html
index fb00c65..8388144 100644
--- a/embed/calculators/phenoage/index.html
+++ b/embed/calculators/phenoage/index.html
@@ -27,6 +27,14 @@ <h1>Biological age calculator</h1>
 
   <div id="resultWarnings"></div>
 
+  <div id="statusTerminal" class="status-terminal" aria-live="polite" aria-atomic="false">
+    <div class="status-terminal__header">
+      <span class="status-terminal__dot" aria-hidden="true"></span>
+      <span class="status-terminal__label">Status</span>
+    </div>
+    <div id="statusTerminalBody" class="status-terminal__body"></div>
+  </div>
+
   <div id="shareSection" style="display: none;">
     <div id="shareCardContainer"></div>
     <a id="shareCardImageLink" style="display:none;" download="my-biological-age.png"><img id="shareCardImage" alt="" style="max-width:100%; height:auto; border-radius:4px;"></a>
diff --git a/embed/calculators/phenoage/phenoage.js b/embed/calculators/phenoage/phenoage.js
index 6abcba8..e4d1055 100644
--- a/embed/calculators/phenoage/phenoage.js
+++ b/embed/calculators/phenoage/phenoage.js
@@ -378,6 +378,32 @@ function parseInput(value) {
   return Number(value);
 }
 
+// --- Status terminal ---
+//
+// Single bottom-of-page log for non-field-specific events (CSV loaded, defaults
+// filled, calculation complete, awaiting input, etc.). Field-specific errors
+// stay inline next to the field they relate to — we don't double them up here.
+
+function setStatusHeading() {
+  var label = document.querySelector('.status-terminal__label');
+  if (label) label.textContent = t('status_heading');
+}
+
+function addStatus(text, level) {
+  var body = document.getElementById('statusTerminalBody');
+  if (!body || !text) return;
+  // Skip if the latest line already says exactly this — avoids spam from
+  // rapid input events.
+  var last = body.lastElementChild;
+  if (last && last.textContent === text && last.dataset.level === (level || '')) return;
+  var line = document.createElement('div');
+  line.className = 'status-terminal__line' + (level ? ' status-terminal__line--' + level : '');
+  line.dataset.level = level || '';
+  line.textContent = text;
+  body.appendChild(line);
+  body.scrollTop = body.scrollHeight;
+}
+
 function clearInputErrors() {
   var errors = document.querySelectorAll('.errorNaN, .input-error, .input-warning');
   for (var i = 0; i < errors.length; i++) {
@@ -389,16 +415,29 @@ function clearInputErrors() {
   for (var i = 0; i < msgs.length; i++) {
     msgs[i].remove();
   }
+  // Clear date-row error tone (placeDobPrompt will re-apply info/error as
+  // appropriate for the current state).
+  ['dobRow', 'testdateRow'].forEach(function(id) {
+    var row = document.getElementById(id);
+    if (row) row.classList.remove('date-row--error');
+  });
 }
 
 function markInputError(elementId, message) {
   var el = document.getElementById(elementId);
-  if (el) el.classList.add('errorNaN');
-  if (message) {
+  if (el) el.classList.add('errorNaN', 'input-error');
+  if (message && el && el.parentNode) {
     var msg = document.createElement('span');
     msg.className = 'error-message';
-    msg.textContent = ' ' + message;
-    if (el && el.parentNode) el.parentNode.appendChild(msg);
+    msg.textContent = message;
+    el.parentNode.appendChild(msg);
+  }
+  // For date-row inputs, escalate the surrounding card to the error tone so
+  // the message and the field share the same visual container.
+  var row = el && el.closest && el.closest('.date-row');
+  if (row) {
+    row.classList.remove('date-row--info');
+    row.classList.add('date-row--error');
   }
 }
 
@@ -553,7 +592,8 @@ function calculateResult() {
   }
 
   if (errors.length > 0) {
-    warningsDiv.innerHTML = '<p>' + t('error_prefix', errors.join('; ')) + '</p>';
+    warningsDiv.innerHTML = '';
+    addStatus(t('error_prefix', errors.join('; ')), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -576,29 +616,17 @@ function calculateResult() {
 
   if (!hasDates) {
     // Show DOB prompt — escalate to error style if all biomarker values are filled.
-    // Wording adapts to which date(s) are missing.
-    if (dobPrompt) {
-      dobPrompt.style.display = '';
-      var missingDob = !dobVal;
-      var missingTest = !testdateVal;
-      var promptKey;
-      if (allFilled) {
-        promptKey = (missingDob && missingTest) ? 'dob_prompt_error_both'
-          : missingDob ? 'dob_prompt_error_dob'
-          : 'dob_prompt_error_testdate';
-        dobPrompt.className = 'dob-prompt dob-prompt-error';
-      } else {
-        promptKey = (missingDob && missingTest) ? 'dob_prompt_both'
-          : missingDob ? 'dob_prompt'
-          : 'dob_prompt_testdate';
-        dobPrompt.className = 'dob-prompt';
-      }
-      dobPrompt.textContent = t(promptKey);
-    }
+    // Wording adapts to which date(s) are missing, and the prompt is parented
+    // to whichever row needs filling so the visual card wraps it.
+    placeDobPrompt(allFilled);
+    warningsDiv.innerHTML = '';
     if (!allFilled) {
-      warningsDiv.innerHTML = '<p>' + t('prompt_enter_all_values') + '</p>';
+      addStatus(t('prompt_enter_all_values'), 'warn');
     } else {
-      warningsDiv.innerHTML = '';
+      var statusKey = (!dobVal && !testdateVal) ? 'status_awaiting_dates'
+        : !dobVal ? 'status_awaiting_dob'
+        : 'status_awaiting_testdate';
+      addStatus(t(statusKey), 'warn');
     }
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
@@ -615,21 +643,24 @@ function calculateResult() {
   var dob = new Date(dobVal + 'T00:00:00');
   var testDate = new Date(testdateVal + 'T00:00:00');
 
+  // Date validation: inline-only, no duplicate in the status panel — the
+  // input card already shows the message right next to the field.
+  var dateError = false;
   if (isNaN(dob.getTime())) {
     markInputError('dob', t('error_invalid_date'));
-    errors.push(t('error_invalid_value', t('label_dob')));
+    dateError = true;
   }
   if (isNaN(testDate.getTime())) {
     markInputError('testdate', t('error_invalid_date'));
-    errors.push(t('error_invalid_value', t('label_test_date')));
+    dateError = true;
   }
   if (!isNaN(dob.getTime()) && !isNaN(testDate.getTime()) && testDate <= dob) {
     markInputError('testdate', t('error_test_date_after_dob'));
-    errors.push(t('error_test_date_after_dob_detail'));
+    dateError = true;
   }
 
-  if (errors.length > 0) {
-    warningsDiv.innerHTML = '<p>' + t('error_prefix', errors.join('; ')) + '</p>';
+  if (dateError) {
+    warningsDiv.innerHTML = '';
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -638,7 +669,8 @@ function calculateResult() {
 
   var age = calculateAge(dob, testDate);
   if (age < 0 || age > 150) {
-    warningsDiv.innerHTML = '<p>' + t('error_prefix', t('error_age_out_of_range', age.toFixed(1))) + '</p>';
+    warningsDiv.innerHTML = '';
+    addStatus(t('error_prefix', t('error_age_out_of_range', age.toFixed(1))), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -646,7 +678,8 @@ function calculateResult() {
   }
 
   if (!allFilled) {
-    warningsDiv.innerHTML = '<p>' + t('prompt_enter_all_values') + '</p>';
+    warningsDiv.innerHTML = '';
+    addStatus(t('prompt_enter_all_values'), 'warn');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -694,13 +727,16 @@ function calculateResult() {
 
   // Display the result
   if (isNaN(phenoAge) || !isFinite(phenoAge)) {
-    warningsDiv.innerHTML = '<p>' + t('error_calculation_failed') + '</p>';
+    warningsDiv.innerHTML = '';
+    addStatus(t('error_calculation_failed'), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
     return;
   }
 
+  addStatus(t('status_complete', phenoAge.toFixed(1), age.toFixed(1)), 'ok');
+
   // 1. Share card (the primary visual result)
   generateShareCard(phenoAge, age, acceleration);
 
@@ -1090,6 +1126,7 @@ function createFormElements() {
 
   var dobRow = document.createElement('div');
   dobRow.className = 'date-row';
+  dobRow.id = 'dobRow';
   var dobLabel = document.createElement('label');
   dobLabel.setAttribute('for', 'dob');
   dobLabel.textContent = t('label_dob');
@@ -1111,6 +1148,7 @@ function createFormElements() {
 
   var testdateRow = document.createElement('div');
   testdateRow.className = 'date-row';
+  testdateRow.id = 'testdateRow';
   var testdateLabel = document.createElement('label');
   testdateLabel.setAttribute('for', 'testdate');
   testdateLabel.textContent = t('label_test_date');
@@ -1148,13 +1186,16 @@ function createFormElements() {
 
   formDiv.appendChild(dateSection);
 
-  // DOB prompt — shown when date of birth is not yet entered
+  // DOB prompt — placed inside whichever date row needs filling, so the row's
+  // info-card styling visually wraps the message.
   var dobPrompt = document.createElement('div');
   dobPrompt.className = 'dob-prompt';
   dobPrompt.id = 'dobPrompt';
   dobPrompt.textContent = t('dob_prompt');
-  if (saved && saved.dob) dobPrompt.style.display = 'none';
-  formDiv.appendChild(dobPrompt);
+  if (saved && saved.dob && saved.testdate) dobPrompt.style.display = 'none';
+  // Initial parent: dob row (it'll be moved by updateDobPrompt as needed).
+  dobRow.appendChild(dobPrompt);
+  updateDobPrompt();
 
   // Biomarker inputs table
   var formTable = document.createElement('table');
@@ -1194,6 +1235,11 @@ function createFormElements() {
     var select = document.createElement('select');
     select.setAttribute('id', formTests[i].id + 'Unit');
     select.setAttribute('oninput', 'calculateResult()');
+    // Skip in tab order: unit changes are essentially always done with the
+    // mouse, and including them gives an inconsistent number of tab stops per
+    // row (rows whose only available unit is canonical use a disabled select,
+    // which the browser already skips).
+    select.setAttribute('tabindex', '-1');
     unitCell.appendChild(select);
     formRow.appendChild(unitCell);
 
@@ -1265,34 +1311,58 @@ function createFormElements() {
 
 // --- Fill missing values with age-appropriate population defaults ---
 
-function updateDobPrompt() {
+// Move the DOB prompt into whichever date row it relates to, so the row's
+// info-card styling visually wraps the prompt right under the field that
+// needs filling in.
+function clearDateRowState() {
+  ['dobRow', 'testdateRow'].forEach(function(id) {
+    var row = document.getElementById(id);
+    if (row) row.classList.remove('date-row--info', 'date-row--error');
+  });
+}
+
+function placeDobPrompt(asError) {
   var prompt = document.getElementById('dobPrompt');
   if (!prompt) return;
   var dobVal = document.getElementById('dob').value;
   var testdateVal = document.getElementById('testdate').value;
+  clearDateRowState();
   if (dobVal && testdateVal) {
     prompt.style.display = 'none';
     return;
   }
-  prompt.style.display = '';
-  prompt.className = 'dob-prompt';
   var missingDob = !dobVal;
   var missingTest = !testdateVal;
-  var key = (missingDob && missingTest) ? 'dob_prompt_both'
-    : missingDob ? 'dob_prompt'
-    : 'dob_prompt_testdate';
-  prompt.textContent = t(key);
+  var promptKey, targetId;
+  if (asError) {
+    promptKey = (missingDob && missingTest) ? 'dob_prompt_error_both'
+      : missingDob ? 'dob_prompt_error_dob'
+      : 'dob_prompt_error_testdate';
+  } else {
+    promptKey = (missingDob && missingTest) ? 'dob_prompt_both'
+      : missingDob ? 'dob_prompt'
+      : 'dob_prompt_testdate';
+  }
+  targetId = missingDob ? 'dobRow' : 'testdateRow';
+
+  prompt.style.display = '';
+  prompt.className = 'dob-prompt' + (asError ? ' dob-prompt-error' : '');
+  prompt.textContent = t(promptKey);
+  var target = document.getElementById(targetId);
+  if (target) {
+    if (prompt.parentNode !== target) target.appendChild(prompt);
+    target.classList.add(asError ? 'date-row--error' : 'date-row--info');
+  }
+}
+
+function updateDobPrompt() {
+  placeDobPrompt(false);
 }
 
 function showDefaultsMessage(text, type) {
-  var section = document.getElementById('defaultsSection');
-  if (!section) return;
-  var existing = section.querySelector('.defaults-message');
-  if (existing) existing.remove();
-  var msg = document.createElement('p');
-  msg.className = 'defaults-message' + (type === 'success' ? ' success' : '');
-  msg.textContent = text;
-  section.appendChild(msg);
+  // Routed through the status terminal so all non-field messages live in the
+  // same place (and we only have one log to look at).
+  addStatus(text, type === 'success' ? 'ok' : 'warn');
 }
 
 function updateDefaultsButton() {
@@ -1465,14 +1535,7 @@ function pad(n) {
 }
 
 function showCSVMessage(text, isError) {
-  var row = document.querySelector('.csv-load-row');
-  if (!row) return;
-  var existing = row.querySelector('.csv-message');
-  if (existing) existing.remove();
-  var msg = document.createElement('span');
-  msg.className = 'csv-message' + (isError ? ' csv-message-error' : '');
-  msg.textContent = text;
-  row.appendChild(msg);
+  addStatus(text, isError ? 'err' : 'ok');
 }
 
 function handleCSVUpload(fileInput) {
@@ -1596,9 +1659,11 @@ function clearLocalStorage() {
 
 window.onload = function() {
   loadStrings('en').then(function() {
+    setStatusHeading();
     return loadConfig();
   }).then(function() {
     createFormElements();
+    addStatus(t('status_ready'));
   }).catch(function(err) {
     console.error('Failed to load config:', err);
     document.getElementById('phenoAgeForm').innerHTML =
diff --git a/embed/calculators/phenoage/strings/en.json b/embed/calculators/phenoage/strings/en.json
index 2f86369..265fd1c 100644
--- a/embed/calculators/phenoage/strings/en.json
+++ b/embed/calculators/phenoage/strings/en.json
@@ -6,12 +6,12 @@
 
   "dob_prompt": "Please enter your date of birth above to get started.",
   "dob_prompt_testdate": "Please enter the date of your test above to get started.",
-  "dob_prompt_both": "Please enter your date of birth and test date above to get started.",
+  "dob_prompt_both": "Please enter your date of birth and date of your blood tests above to get started.",
   "dob_prompt_error_dob": "Please enter your date of birth to calculate your biological age.",
-  "dob_prompt_error_testdate": "Please enter your test date to calculate your biological age.",
+  "dob_prompt_error_testdate": "Please enter the date of your blood tests to calculate your biological age.",
   "dob_prompt_error_both": "Please enter your date of birth and test date to calculate your biological age.",
 
-  "legacy_note": "Your test results were loaded from an older version of this calculator which stored your age directly. Please enter your date of birth and the date of the test so we can calculate your age more accurately.",
+  "legacy_note": "Your test results were loaded from an older version of this calculator which stored your age directly. Please enter your date of birth and the date of your blood tests.",
 
   "error_invalid_value": "Invalid value for {0}",
   "error_must_be_positive": "Must be > 0",
@@ -19,19 +19,19 @@
   "error_invalid_date": "Invalid date",
   "error_test_date_after_dob": "Must be after date of birth",
   "error_test_date_after_dob_detail": "Test date must be after date of birth",
-  "error_age_out_of_range": "Calculated age ({0}) is out of range",
+  "error_age_out_of_range": "Based on the dates you entered, you were {0} years old on the day of the test! This is out of range.",
   "error_prefix": "Error: {0}",
   "error_calculation_failed": "Could not calculate result. Please check your inputs.",
   "error_config_failed": "Error loading calculator configuration. Please try refreshing the page.",
 
   "prompt_enter_all_values": "Please enter all values above to calculate your biological age.",
 
-  "range_implausible": "Are the value and units correct? {0} is typically {1}\u2013{2} {3}.",
-  "range_suggest_unit": "Did you mean to select {0}?",
-  "range_warning": "{0} is typically {1}\u2013{2} {3}. Your result may still be valid if this value is correct.",
+  "range_implausible": "{0} is almost always between {1} and {2}\u00a0{3}. Are the value and units correct? ",
+  "range_suggest_unit": "Should the units be {0}?",
+  "range_warning": "{0} is usually between {1} and {2}\u00a0{3}. This value might be right—it’s just unusual.",
 
   "result_summary": "Your chronological age at the test date was {0} years, and your calculated biological age was {1} years, which means that your risk of death from age-related causes in the coming year is approximately {2}%, or around 1 in {3}.",
-  "result_summary_low_risk": "Your chronological age at the test date was {0} years, and your calculated biological age was {1} years, which means that your risk of death from age-related causes in the coming year is less than 0.1%, or around 1 in {2}.",
+  "result_summary_low_risk": "Your chronological age at the test date was {0} years, and your calculated biological age was {1} years, which means that your risk of death from age-related causes in the coming year is around 1 in {2}, which is less than 0.1%.",
   "defaults_warning_one": "This result is approximate: one value is a population average.",
   "defaults_warning_few": "This result is approximate: {0} of {1} values are population averages.",
   "defaults_warning_very": "This result is very approximate: {0} of {1} values are population averages.",
@@ -71,12 +71,12 @@
   "card_biological_label": "biological",
   "card_chronological_label": "chronological",
   "card_cta": "Calculate yours at",
-  "card_url": "the-li.org/calc",
+  "card_url": "the-li.org/bioage",
   "card_methodology": "blood biomarkers using PhenoAge",
   "card_aria_label": "Biological age result card: biological age {0}, chronological age {1}, {2}",
 
   "defaults_button": "Fill missing values with population averages for my age",
-  "defaults_note": "Uses median values from the NHANES III population study for your age.",
+  "defaults_note": "Uses median values from the NHANES\u00a0III population study for your age.",
   "defaults_need_dates": "Please enter your date of birth and test date first.",
   "defaults_need_valid_dates": "Please enter valid dates first.",
   "defaults_filled": "Filled {0} field{1} with population averages.",
@@ -85,5 +85,13 @@
 
   "storage_restored": "Your previous values were restored from this browser\u2019s storage.",
   "storage_clear_link": "Clear saved data",
-  "storage_cleared": "Saved data cleared."
+  "storage_cleared": "Saved data cleared.",
+
+  "status_heading": "Status",
+  "status_ready": "Ready. Enter your details to calculate your biological age.",
+  "status_complete": "Calculation complete \u2014 biological age {0} years (chronological {1} years).",
+  "status_awaiting_values": "Waiting for the remaining biomarker values.",
+  "status_awaiting_dates": "Waiting for date of birth and test date.",
+  "status_awaiting_dob": "Waiting for date of birth.",
+  "status_awaiting_testdate": "Waiting for test date."
 }
diff --git a/embed/shared/embed.css b/embed/shared/embed.css
index 9da7ef8..76d90c6 100644
--- a/embed/shared/embed.css
+++ b/embed/shared/embed.css
@@ -39,19 +39,20 @@
 
 :root {
   /* LI brand light (default) */
-  --calc-bg: #f8f7f4;
-  --calc-text: #1a1a2e;
+  --calc-bg: #eae8e6;
+  --calc-text: #0f2846;
   --calc-text-muted: #555;
-  --calc-text-faint: #888;
-  --calc-accent: #0066cc;
-  --calc-link: #0066cc;
+  --calc-text-faint: #807d78;
+  --calc-accent: #2e5ea8;
+  --calc-accent-soft: rgba(46, 94, 168, 0.15);
+  --calc-link: #2e5ea8;
   --calc-input-bg: #ffffff;
-  --calc-input-border: #ccc;
-  --calc-btn-bg: #f0f0ed;
-  --calc-btn-hover: #e2e2dd;
-  --calc-border: #ddd;
-  --calc-card-bg: #edf3fa;
-  --calc-card-border: #d0e3f0;
+  --calc-input-border: #c0bcb5;
+  --calc-btn-bg: #e0deda;
+  --calc-btn-hover: #d4d1ca;
+  --calc-border: #d4d1ca;
+  --calc-card-bg: #e3ecf6;
+  --calc-card-border: #b8cce6;
 
   /* Semantic colours (don't change with theme) */
   --calc-warning-text: #664d03;
@@ -63,44 +64,55 @@
   --calc-success-text: #0f5132;
   --calc-success-bg: #d1e7dd;
   --calc-success-border: #badbcc;
-  --calc-info-text: #055160;
-  --calc-info-bg: #cff4fc;
-  --calc-info-border: #b6effb;
+  --calc-info-text: #0f2846;
+  --calc-info-bg: #e3ecf6;
+  --calc-info-border: #b8cce6;
+
+  /* Terminal / status panel */
+  --calc-terminal-bg: #0f2846;
+  --calc-terminal-text: #c5d4e6;
+  --calc-terminal-prompt: #5bc198;
+  --calc-terminal-ok: #5bc198;
+  --calc-terminal-warn: #fbbf24;
+  --calc-terminal-err: #ff8a8a;
+  --calc-terminal-border: #1f3a5e;
 }
 
 /* Dark theme */
 .theme-dark {
-  --calc-bg: #1a1a2e;
-  --calc-text: #e0e0e0;
-  --calc-text-muted: #aaa;
-  --calc-text-faint: #888;
+  --calc-bg: #0f2846;
+  --calc-text: #eae8e6;
+  --calc-text-muted: #b0bccb;
+  --calc-text-faint: #7d8ca3;
   --calc-accent: #5b9bd5;
+  --calc-accent-soft: rgba(91, 155, 213, 0.2);
   --calc-link: #7db8f0;
-  --calc-input-bg: #2a2a3e;
-  --calc-input-border: #444;
-  --calc-btn-bg: #2a2a3e;
-  --calc-btn-hover: #3a3a4e;
-  --calc-border: #3a3a4e;
-  --calc-card-bg: #222240;
-  --calc-card-border: #3a3a5e;
+  --calc-input-bg: #16314f;
+  --calc-input-border: #2c4666;
+  --calc-btn-bg: #1a3354;
+  --calc-btn-hover: #234271;
+  --calc-border: #234271;
+  --calc-card-bg: #1a3354;
+  --calc-card-border: #2c4666;
 }
 
 /* Auto theme: follows user's OS preference */
 @media (prefers-color-scheme: dark) {
   .theme-auto {
-    --calc-bg: #1a1a2e;
-    --calc-text: #e0e0e0;
-    --calc-text-muted: #aaa;
-    --calc-text-faint: #888;
+    --calc-bg: #0f2846;
+    --calc-text: #eae8e6;
+    --calc-text-muted: #b0bccb;
+    --calc-text-faint: #7d8ca3;
     --calc-accent: #5b9bd5;
+    --calc-accent-soft: rgba(91, 155, 213, 0.2);
     --calc-link: #7db8f0;
-    --calc-input-bg: #2a2a3e;
-    --calc-input-border: #444;
-    --calc-btn-bg: #2a2a3e;
-    --calc-btn-hover: #3a3a4e;
-    --calc-border: #3a3a4e;
-    --calc-card-bg: #222240;
-    --calc-card-border: #3a3a5e;
+    --calc-input-bg: #16314f;
+    --calc-input-border: #2c4666;
+    --calc-btn-bg: #1a3354;
+    --calc-btn-hover: #234271;
+    --calc-border: #234271;
+    --calc-card-bg: #1a3354;
+    --calc-card-border: #2c4666;
   }
 }
 
@@ -109,7 +121,15 @@ body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: var(--calc-bg);
   color: var(--calc-text);
-  padding: 0 0.5em;
+  padding: 0 1em;
+  max-width: 720px;
+  margin: 0 auto;
+  line-height: 1.5;
+}
+
+h1 {
+  font-weight: 500;
+  letter-spacing: -0.02em;
 }
 
 a {
@@ -124,6 +144,7 @@ a {
 .error-message {
   color: var(--calc-error-text);
   font-size: 0.85em;
+  margin-left: 0.4em;
 }
 
 .bioageform .result {
@@ -147,44 +168,117 @@ a {
 .bioageform select:disabled {
     appearance: none;
     border: none;
-    display: inline;
     background: none;
     color: var(--calc-text);
+    padding-right: 0;
+    background-image: none;
+    cursor: default;
+}
+
+/* Biomarker form table */
+.bioageform table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0.5em 0;
+}
+
+.bioageform tbody tr > th,
+.bioageform tbody tr > td {
+  padding: 4px 0;
+  vertical-align: middle;
+}
+
+.bioageform tbody tr > th {
+  text-align: right;
+  padding-right: 0.8em;
+  font-weight: 500;
+  font-size: 0.95em;
+  width: 40%;
+  white-space: nowrap;
+}
+
+.bioageform tbody tr > th label {
+  cursor: pointer;
+}
+
+.bioageform tbody tr > td:nth-of-type(1) input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.bioageform tbody tr > td:nth-of-type(2) {
+  width: 8em;
+  padding-left: 6px;
+}
+
+.bioageform tbody tr > td:nth-of-type(2) select {
+  width: 100%;
+  box-sizing: border-box;
 }
 
 /* Date of birth and test date section */
 .date-section {
-  margin-bottom: 1em;
+  margin: 1em 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6em;
 }
 
 .csv-load-row {
-  margin-top: 0.3em;
   display: flex;
   align-items: center;
   gap: 0.8em;
+  flex-wrap: wrap;
 }
 
-.csv-message {
-  font-size: 0.85em;
-  color: var(--calc-success-text);
+.date-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6em;
+  padding: 0.6em 0.8em;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
 
-.csv-message-error {
-  color: var(--calc-error-text);
+.date-row > label {
+  font-weight: 500;
+  min-width: 8em;
 }
 
-.date-row {
-  margin-bottom: 0.5em;
+.date-row input[type="date"] {
+  font-size: 1em;
 }
 
-.date-row label {
-  display: inline-block;
-  width: 10em;
-  font-weight: bold;
+/* Soft info card when a date row needs guidance, escalates to error tone
+   when there's an inline error. Class-toggled in JS so the visual card
+   wraps the inline message that gets injected into it. */
+.date-row.date-row--info {
+  background: var(--calc-info-bg);
+  border-color: var(--calc-info-border);
 }
 
-.date-row input[type="date"] {
-  font-size: 1em;
+.date-row.date-row--error {
+  background: var(--calc-error-bg);
+  border-color: var(--calc-error-border);
+}
+
+.date-row .dob-prompt,
+.date-row .input-alert,
+.date-row .error-message {
+  flex-basis: 100%;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 0.85em;
+}
+
+.date-row .error-message {
+  color: var(--calc-error-text);
+  font-weight: 500;
 }
 
 /* Form inputs */
@@ -192,9 +286,41 @@ input[type="text"],
 input[type="number"],
 input[type="date"],
 select {
+  font: inherit;
+  font-size: 1em;
+  padding: 0.45em 0.6em;
   background: var(--calc-input-bg);
   color: var(--calc-text);
   border: 1px solid var(--calc-input-border);
+  border-radius: 4px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+select:focus {
+  outline: none;
+  border-color: var(--calc-accent);
+  box-shadow: 0 0 0 3px var(--calc-accent-soft);
+}
+
+/* Custom chevron on selects (so they all look uniform regardless of OS) */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 2em;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%230f2846' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.7em center;
+  background-size: 10px 6px;
+  cursor: pointer;
+}
+
+.theme-dark select,
+.theme-auto select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23eae8e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
 }
 
 /* Hide spinner controls on number inputs — users will type values, not step. */
@@ -210,41 +336,41 @@ input[type="number"] {
 
 /* Range validation states on inputs */
 .input-warning {
-  border: 1px solid var(--calc-warning-border);
+  border-color: #d4a72c;
   background: var(--calc-warning-bg);
 }
 
 .input-error {
-  border: 1px solid var(--calc-error-border);
+  border-color: #c0392b;
   background: var(--calc-error-bg);
 }
 
-/* Prompt to enter DOB, shown above the biomarker table */
+/* Prompt to enter DOB, shown inside the relevant date row */
 .dob-prompt {
-  margin: 0.5em 0 1em;
-  padding: 0.6em 0.8em;
-  font-size: 0.95em;
+  font-size: 0.9em;
   color: var(--calc-info-text);
-  background: var(--calc-info-bg);
-  border: 1px solid var(--calc-info-border);
-  border-radius: 4px;
 }
 
 .dob-prompt-error {
   color: var(--calc-error-text);
-  background: var(--calc-error-bg);
-  border-color: var(--calc-error-border);
 }
 
-/* Informational alerts attached to form inputs */
+/* Informational alerts attached to form inputs (range warnings/errors).
+   Sit in a tr below the input, span all columns, and visually anchor to the
+   input via the same coloured border. */
+.bioageform .range-alert > td {
+  padding: 0 0 8px;
+}
+
 .input-alert {
-  margin: 0.3em 0 0.2em;
+  margin: 0;
   padding: 0.5em 0.7em;
   font-size: 0.85em;
   color: var(--calc-warning-text);
   background: var(--calc-warning-bg);
   border: 1px solid var(--calc-warning-border);
-  border-radius: 4px;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
 }
 
 .input-alert-error {
@@ -253,14 +379,22 @@ input[type="number"] {
   border-color: var(--calc-error-border);
 }
 
+/* Make the input above an alert visually attach to it (no rounded bottom). */
+.bioageform tr:has(+ .range-alert) input,
+.bioageform tr:has(+ .range-alert) select {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 /* Warning banner shown under result when implausible values present */
 .result-warning {
   margin: 0.8em 0;
-  padding: 0.6em 0.8em;
+  padding: 0.6em 0.9em;
   font-size: 0.9em;
   color: var(--calc-error-text);
   background: var(--calc-error-bg);
   border: 1px solid var(--calc-error-border);
+  border-left: 3px solid var(--calc-error-text);
   border-radius: 4px;
 }
 
@@ -336,17 +470,20 @@ input[type="number"] {
 }
 
 .defaults-section button {
+  font: inherit;
   font-size: 0.95em;
-  padding: 0.4em 1em;
+  padding: 0.5em 1em;
   cursor: pointer;
   border: 1px solid var(--calc-input-border);
   border-radius: 4px;
   background: var(--calc-btn-bg);
   color: var(--calc-text);
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
 
 .defaults-section button:hover:not(:disabled) {
   background: var(--calc-btn-hover);
+  border-color: var(--calc-text-muted);
 }
 
 .defaults-section button:disabled {
@@ -354,28 +491,76 @@ input[type="number"] {
   cursor: default;
 }
 
-.defaults-message {
+.defaults-note {
+  font-size: 0.8em;
+  color: var(--calc-text-faint);
+  margin: 0.3em 0 0;
+}
+
+/* Terminal-style status panel — non-field messages collect here so the user
+   has a single, predictable place to look for what just happened. */
+.status-terminal {
+  margin: 1.2em 0;
+  background: var(--calc-terminal-bg);
+  border: 1px solid var(--calc-terminal-border);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 0.85em;
-  padding: 0.4em 0.6em;
-  margin: 0.4em 0 0;
-  border-radius: 4px;
-  background: var(--calc-warning-bg);
-  color: var(--calc-warning-text);
-  border: 1px solid var(--calc-warning-border);
+  color: var(--calc-terminal-text);
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.defaults-message.success {
-  background: var(--calc-success-bg);
-  color: var(--calc-success-text);
-  border-color: var(--calc-success-border);
+.status-terminal__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--calc-terminal-border);
+  color: rgba(197, 212, 230, 0.7);
+  font-size: 0.85em;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-.defaults-note {
-  font-size: 0.8em;
-  color: var(--calc-text-faint);
-  margin: 0.3em 0 0;
+.status-terminal__dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #ff6058;
+  box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #28c941;
+  margin-right: 18px;
 }
 
+.status-terminal__body {
+  padding: 8px 10px;
+  max-height: 180px;
+  overflow-y: auto;
+  line-height: 1.5;
+}
+
+.status-terminal__line {
+  display: flex;
+  gap: 6px;
+  word-break: break-word;
+}
+
+.status-terminal__line::before {
+  content: ">";
+  color: var(--calc-terminal-prompt);
+  flex-shrink: 0;
+}
+
+.status-terminal__line--ok { color: var(--calc-terminal-ok); }
+.status-terminal__line--warn { color: var(--calc-terminal-warn); }
+.status-terminal__line--err { color: var(--calc-terminal-err); }
+
+.status-terminal__line--ok::before { content: "✓"; color: var(--calc-terminal-ok); }
+.status-terminal__line--warn::before { content: "!"; color: var(--calc-terminal-warn); }
+.status-terminal__line--err::before { content: "✗"; color: var(--calc-terminal-err); }
+
 /* CSV download button */
 .csv-download {
   font-size: 0.9em;

From 29c8f0f992552f0c847d46dcfab0b4da4715a401 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 4 May 2026 08:53:23 +0000
Subject: [PATCH 2/5] Tighten status panel and tweak warning severity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the traffic-light dots from the terminal header — too elaborate;
  the "Status" label is enough.
- Status panel now shows a single, current-state line rather than
  accumulating a log. "Ready", "awaiting values" and "complete" no
  longer coexist.
- Fix `t()` returning the key when a string value is the empty string
  (so "{1}" plural suffixes resolve correctly — previously rendered
  as e.g. "field defaults_filled_singular").
- Reroute defaults warnings: 1 or "few" defaults surface in the
  status panel as a heads-up; "very" approximates use a yellow result
  banner; "extreme"/"all" are red. The previous styling had base/severe
  inverted, so a single default was rendered red and most defaults
  yellow.
- Strengthen the biomarker label selector so right-alignment actually
  applies (was being missed because of an over-specific tbody chain).
- Widen the unit selector cell so longer units (mmol/L, µkat/L) fit
  without bulging out of the form.
- Show the calculated age at the test date next to the test-date
  field, so users can sanity-check the dates without scrolling down.

https://claude.ai/code/session_019k6FFmsULqWJPK5F5uifZW
---
 embed/calculators/phenoage/index.html  |  3 +-
 embed/calculators/phenoage/phenoage.js | 88 +++++++++++++++++++-------
 embed/shared/embed.css                 | 46 ++++++++------
 3 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/embed/calculators/phenoage/index.html b/embed/calculators/phenoage/index.html
index 8388144..1dc0296 100644
--- a/embed/calculators/phenoage/index.html
+++ b/embed/calculators/phenoage/index.html
@@ -27,9 +27,8 @@ <h1>Biological age calculator</h1>
 
   <div id="resultWarnings"></div>
 
-  <div id="statusTerminal" class="status-terminal" aria-live="polite" aria-atomic="false">
+  <div id="statusTerminal" class="status-terminal" aria-live="polite" aria-atomic="true">
     <div class="status-terminal__header">
-      <span class="status-terminal__dot" aria-hidden="true"></span>
       <span class="status-terminal__label">Status</span>
     </div>
     <div id="statusTerminalBody" class="status-terminal__body"></div>
diff --git a/embed/calculators/phenoage/phenoage.js b/embed/calculators/phenoage/phenoage.js
index e4d1055..32ad51f 100644
--- a/embed/calculators/phenoage/phenoage.js
+++ b/embed/calculators/phenoage/phenoage.js
@@ -20,7 +20,9 @@ function loadStrings(lang) {
 
 /** Look up a translated string by key, with optional positional placeholders {0}, {1}, etc. */
 function t(key) {
-  var s = strings[key] || key;
+  // Note: explicit `in` check, not `||`, so deliberately empty values like
+  // the singular suffix in "field{1}" don't fall back to returning the key.
+  var s = (key in strings) ? strings[key] : key;
   for (var i = 1; i < arguments.length; i++) {
     s = s.split('{' + (i - 1) + '}').join(arguments[i]);
   }
@@ -389,19 +391,21 @@ function setStatusHeading() {
   if (label) label.textContent = t('status_heading');
 }
 
+// Replaces the panel content with a single line describing the current state.
+// We don't accumulate a log — past states ("Ready", "awaiting values") aren't
+// useful once superseded by the new state, and stacking them up just adds
+// noise.
 function addStatus(text, level) {
   var body = document.getElementById('statusTerminalBody');
   if (!body || !text) return;
-  // Skip if the latest line already says exactly this — avoids spam from
-  // rapid input events.
-  var last = body.lastElementChild;
-  if (last && last.textContent === text && last.dataset.level === (level || '')) return;
+  var current = body.firstElementChild;
+  if (current && current.textContent === text && current.dataset.level === (level || '')) return;
+  body.innerHTML = '';
   var line = document.createElement('div');
   line.className = 'status-terminal__line' + (level ? ' status-terminal__line--' + level : '');
   line.dataset.level = level || '';
   line.textContent = text;
   body.appendChild(line);
-  body.scrollTop = body.scrollHeight;
 }
 
 function clearInputErrors() {
@@ -510,6 +514,10 @@ function calculateResult() {
   var summaryEl = document.getElementById('resultSummary');
   clearInputErrors();
   var errors = [];
+  // A status message a downstream block wants to show in place of the default
+  // "Calculation complete" line (e.g. "1 of N values is a population
+  // average"). Set by the defaults block; emitted at the end.
+  var pendingStatus = null;
 
   // Read biomarker values and selected units from the form (always, even without DOB)
   var rawValues = [];
@@ -735,7 +743,8 @@ function calculateResult() {
     return;
   }
 
-  addStatus(t('status_complete', phenoAge.toFixed(1), age.toFixed(1)), 'ok');
+  // Defer emitting the success status until after the defaults check below
+  // so a "1 of N is a population average" message can take precedence.
 
   // 1. Share card (the primary visual result)
   generateShareCard(phenoAge, age, acceleration);
@@ -743,7 +752,10 @@ function calculateResult() {
   // 2. Warnings (defaults, implausible values)
   warningsDiv.innerHTML = '';
 
-  // Note if any values are population defaults — graduated warning
+  // Note if any values are population defaults — graduated warning. Low
+  // counts surface in the status panel (informational); higher counts get
+  // the more attention-grabbing result-warning banner near the result, with
+  // the most severe cases in the red error tone.
   var defaultCount = 0;
   for (var i = 0; i < formTests.length; i++) {
     var input = document.getElementById(formTests[i].id);
@@ -751,22 +763,24 @@ function calculateResult() {
   }
   if (defaultCount > 0) {
     var totalTests = formTests.length;
-    var warningKey;
-    if (defaultCount >= totalTests) {
-      warningKey = 'defaults_warning_all';
-    } else if (defaultCount >= Math.ceil(totalTests * 2 / 3)) {
-      warningKey = 'defaults_warning_extreme';
-    } else if (defaultCount >= Math.ceil(totalTests / 3)) {
-      warningKey = 'defaults_warning_very';
-    } else if (defaultCount === 1) {
-      warningKey = 'defaults_warning_one';
+    var oneThird = Math.ceil(totalTests / 3);
+    var twoThirds = Math.ceil(totalTests * 2 / 3);
+    if (defaultCount < oneThird) {
+      // Small number of defaults — gentle, status-panel notice.
+      var key = (defaultCount === 1) ? 'defaults_warning_one' : 'defaults_warning_few';
+      pendingStatus = { text: t(key, defaultCount, totalTests), level: 'warn' };
     } else {
-      warningKey = 'defaults_warning_few';
+      var warningKey, modifier;
+      if (defaultCount >= totalTests) {
+        warningKey = 'defaults_warning_all'; modifier = ' result-warning-severe';
+      } else if (defaultCount >= twoThirds) {
+        warningKey = 'defaults_warning_extreme'; modifier = ' result-warning-severe';
+      } else {
+        warningKey = 'defaults_warning_very'; modifier = ' result-warning--mild';
+      }
+      warningsDiv.innerHTML += '<div class="result-warning' + modifier + '">' +
+        t(warningKey, defaultCount, totalTests) + '</div>';
     }
-    var level = (defaultCount >= Math.ceil(totalTests / 3)) ? 'error' : 'warning';
-    warningsDiv.innerHTML += '<div class="result-warning' +
-      (level === 'error' ? ' result-warning-severe' : '') + '">' +
-      t(warningKey, defaultCount, totalTests) + '</div>';
   }
 
   // Warning if any values look implausible
@@ -778,6 +792,13 @@ function calculateResult() {
       warningText + '</div>';
   }
 
+  // Final status line: defaults notice if relevant, otherwise success.
+  if (pendingStatus) {
+    addStatus(pendingStatus.text, pendingStatus.level);
+  } else {
+    addStatus(t('status_complete', phenoAge.toFixed(1), age.toFixed(1)), 'ok');
+  }
+
   // 3. Descriptive summary text (below the share buttons).
   // Use a dedicated "less than 0.1%" phrasing for tiny risks — otherwise a
   // healthy 30-year-old sees something like "0.0050%" which reads as noise.
@@ -1164,6 +1185,10 @@ function createFormElements() {
   }
   testdateRow.appendChild(testdateLabel);
   testdateRow.appendChild(testdateInput);
+  var ageReadout = document.createElement('span');
+  ageReadout.id = 'ageReadout';
+  ageReadout.className = 'age-readout';
+  testdateRow.appendChild(ageReadout);
   dateSection.appendChild(testdateRow);
 
   // CSV upload — available at the top so users can load data before entering values
@@ -1357,6 +1382,25 @@ function placeDobPrompt(asError) {
 
 function updateDobPrompt() {
   placeDobPrompt(false);
+  updateAgeReadout();
+}
+
+// Show the user's age at the test date next to the test-date field, so they
+// can sanity-check the dates without scrolling down to the result.
+function updateAgeReadout() {
+  var el = document.getElementById('ageReadout');
+  if (!el) return;
+  var dobVal = document.getElementById('dob').value;
+  var testdateVal = document.getElementById('testdate').value;
+  if (!dobVal || !testdateVal) { el.textContent = ''; return; }
+  var dob = new Date(dobVal + 'T00:00:00');
+  var testDate = new Date(testdateVal + 'T00:00:00');
+  if (isNaN(dob.getTime()) || isNaN(testDate.getTime()) || testDate <= dob) {
+    el.textContent = '';
+    return;
+  }
+  var age = calculateAge(dob, testDate);
+  el.textContent = '(age ' + age.toFixed(1) + ' at test date)';
 }
 
 function showDefaultsMessage(text, type) {
diff --git a/embed/shared/embed.css b/embed/shared/embed.css
index 76d90c6..706799f 100644
--- a/embed/shared/embed.css
+++ b/embed/shared/embed.css
@@ -183,13 +183,13 @@ a {
   margin: 0.5em 0;
 }
 
-.bioageform tbody tr > th,
-.bioageform tbody tr > td {
+.bioageform th,
+.bioageform td {
   padding: 4px 0;
   vertical-align: middle;
 }
 
-.bioageform tbody tr > th {
+.bioageform th {
   text-align: right;
   padding-right: 0.8em;
   font-weight: 500;
@@ -198,21 +198,21 @@ a {
   white-space: nowrap;
 }
 
-.bioageform tbody tr > th label {
+.bioageform th label {
   cursor: pointer;
 }
 
-.bioageform tbody tr > td:nth-of-type(1) input {
+.bioageform td:nth-of-type(1) input {
   width: 100%;
   box-sizing: border-box;
 }
 
-.bioageform tbody tr > td:nth-of-type(2) {
-  width: 8em;
+.bioageform td:nth-of-type(2) {
+  width: 9.5em;
   padding-left: 6px;
 }
 
-.bioageform tbody tr > td:nth-of-type(2) select {
+.bioageform td:nth-of-type(2) select {
   width: 100%;
   box-sizing: border-box;
 }
@@ -248,6 +248,15 @@ a {
   min-width: 8em;
 }
 
+.age-readout {
+  font-size: 0.85em;
+  color: var(--calc-text-faint);
+}
+
+.age-readout:empty {
+  display: none;
+}
+
 .date-row input[type="date"] {
   font-size: 1em;
 }
@@ -398,11 +407,18 @@ input[type="number"] {
   border-radius: 4px;
 }
 
-/* Severe result warning (many defaults / all defaults) */
-.result-warning-severe {
+/* Milder result warning (e.g. "very approximate" — a third of values are
+   defaults). Yellow rather than red since it's a heads-up, not an error. */
+.result-warning--mild {
   color: var(--calc-warning-text);
   background: var(--calc-warning-bg);
   border-color: var(--calc-warning-border);
+  border-left-color: var(--calc-warning-text);
+}
+
+/* Severe result warning (most or all values are defaults). Reuses the base
+   red tone but with bold text to flag how unreliable the result is. */
+.result-warning-severe {
   font-weight: bold;
 }
 
@@ -524,16 +540,6 @@ input[type="number"] {
   text-transform: uppercase;
 }
 
-.status-terminal__dot {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: #ff6058;
-  box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #28c941;
-  margin-right: 18px;
-}
-
 .status-terminal__body {
   padding: 8px 10px;
   max-height: 180px;

From f99d790c5dfc8fb5e41b9ee6b24de6be48cd1b38 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 4 May 2026 09:14:08 +0000
Subject: [PATCH 3/5] Refactor calculator CSS and tighten status panel
 behaviour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS: rewrite for clarity. One generic button selector covers all
  calculator buttons (was four near-identical declarations); dead
  rules dropped (errorNaN, .bioageform .result, the inverted
  result-warning-severe etc.); colour vars used everywhere; biomarker
  labels are bold again. Disabled unit selects now keep their box
  shape (faded text, no chevron) so the unit column reads as a
  consistent grid even when the unit can't be changed.
- Default-flagged values now serialise as the AUTO_TOKEN string
  ("auto") in URL anchors, CSVs, and localStorage, rather than
  storing the rounded computed value. On load they're re-imputed
  from the user's current age, so a saved link still uses sensible
  defaults if the imputation method changes (and it doesn't
  masquerade as user-entered data when inspected). Legacy formats
  ("isDefault: true" in localStorage; " (population default)" suffix
  in old CSVs) still load.
- Status terminal now reflects current state across multiple lines:
  "Calculation complete" plus the defaults-count notice plus the
  implausible-values warning all stack together. Cleared and rebuilt
  on every calculateResult call so superseded states never linger.
  The standalone result-warning HTML banners are gone.
- Storage-restored notice (with "Clear saved data" link) groups with
  the "Load from CSV" button on the right of the date section, so
  it doesn't sit alone at the bottom of the form.
- Result summary text moved above the share image — was previously
  unmoored at the bottom of the share section.
- Move hardcoded "Warning: " prefix from JS into en.json.

https://claude.ai/code/session_019k6FFmsULqWJPK5F5uifZW
---
 embed/calculators/phenoage/index.html      |   4 +-
 embed/calculators/phenoage/phenoage.js     | 254 ++++----
 embed/calculators/phenoage/strings/en.json |   4 +-
 embed/shared/embed.css                     | 659 ++++++++-------------
 4 files changed, 386 insertions(+), 535 deletions(-)

diff --git a/embed/calculators/phenoage/index.html b/embed/calculators/phenoage/index.html
index 1dc0296..fd456cc 100644
--- a/embed/calculators/phenoage/index.html
+++ b/embed/calculators/phenoage/index.html
@@ -25,8 +25,6 @@ <h1>Biological age calculator</h1>
     <code>This form requires JavaScript to run. Please open in a browser with it enabled. It doesn’t store your data or do anything intrusive so don’t worry if you disable JavaScript for privacy reasons. :)</code>
   </div>
 
-  <div id="resultWarnings"></div>
-
   <div id="statusTerminal" class="status-terminal" aria-live="polite" aria-atomic="true">
     <div class="status-terminal__header">
       <span class="status-terminal__label">Status</span>
@@ -35,6 +33,7 @@ <h1>Biological age calculator</h1>
   </div>
 
   <div id="shareSection" style="display: none;">
+    <p id="resultSummary" class="result-summary"></p>
     <div id="shareCardContainer"></div>
     <a id="shareCardImageLink" style="display:none;" download="my-biological-age.png"><img id="shareCardImage" alt="" style="max-width:100%; height:auto; border-radius:4px;"></a>
     <div class="share-buttons">
@@ -42,7 +41,6 @@ <h1>Biological age calculator</h1>
       <button id="nativeShareBtn" onclick="nativeShare()" style="display: none;">Share</button>
     </div>
     <p id="shareImageNote" class="share-image-note"></p>
-    <p id="resultSummary" class="result-summary"></p>
     <script>
       if (navigator.share && navigator.canShare) {
         document.getElementById('nativeShareBtn').style.display = '';
diff --git a/embed/calculators/phenoage/phenoage.js b/embed/calculators/phenoage/phenoage.js
index 32ad51f..fefb821 100644
--- a/embed/calculators/phenoage/phenoage.js
+++ b/embed/calculators/phenoage/phenoage.js
@@ -343,14 +343,28 @@ function extractValuesFromAnchor(url) {
   return result;
 }
 
+// Token used in serialised forms (URL anchor, CSV, localStorage) for values
+// that came from the population-defaults table rather than the user. Recorded
+// as a token rather than the computed number so they can re-imputed if the
+// imputation method changes, and so they don't masquerade as user data when
+// inspected.
+var AUTO_TOKEN = 'auto';
+
+function isAutoValue(v) {
+  return typeof v === 'string' && v.toLowerCase() === AUTO_TOKEN;
+}
+
 function createAnchorFromValues(dob, testdate, formTests, values, units) {
   var url = '#dob=' + encodeURIComponent(dob) +
     anchorKeysSeparator + 'testdate=' + encodeURIComponent(testdate);
 
   for (var i = 0; i < formTests.length; i++) {
+    var input = document.getElementById(formTests[i].id);
+    var isDefault = input && input.classList.contains('default-value');
+    var serialisedValue = isDefault ? AUTO_TOKEN : values[i];
     url += anchorKeysSeparator +
       encodeURIComponent(formTests[i].id) + '=' +
-      encodeURIComponent(values[i]) + anchorUnitsSeparator +
+      encodeURIComponent(serialisedValue) + anchorUnitsSeparator +
       encodeURIComponent(units[i]);
   }
   return url;
@@ -391,19 +405,21 @@ function setStatusHeading() {
   if (label) label.textContent = t('status_heading');
 }
 
-// Replaces the panel content with a single line describing the current state.
-// We don't accumulate a log — past states ("Ready", "awaiting values") aren't
-// useful once superseded by the new state, and stacking them up just adds
-// noise.
+// The terminal shows every message that's currently true, so a single calc
+// pass can emit several lines (e.g. "complete" + "1 default" + "implausible
+// values"). Callers are responsible for clearing first if they want a fresh
+// view; calculateResult always clears.
+function clearStatus() {
+  var body = document.getElementById('statusTerminalBody');
+  if (body) body.innerHTML = '';
+}
+
 function addStatus(text, level) {
+  if (!text) return;
   var body = document.getElementById('statusTerminalBody');
-  if (!body || !text) return;
-  var current = body.firstElementChild;
-  if (current && current.textContent === text && current.dataset.level === (level || '')) return;
-  body.innerHTML = '';
+  if (!body) return;
   var line = document.createElement('div');
   line.className = 'status-terminal__line' + (level ? ' status-terminal__line--' + level : '');
-  line.dataset.level = level || '';
   line.textContent = text;
   body.appendChild(line);
 }
@@ -510,14 +526,13 @@ function showRangeAlert(elementId, level, message) {
 function calculateResult() {
   var shareSection = document.getElementById('shareSection');
   var saveSection = document.getElementById('saveSection');
-  var warningsDiv = document.getElementById('resultWarnings');
   var summaryEl = document.getElementById('resultSummary');
   clearInputErrors();
+  // Terminal reflects current state, so wipe and rebuild on every call. All
+  // status messages this pass produces are pushed in order; the last addStatus
+  // wins visibility-wise but every line stays visible.
+  clearStatus();
   var errors = [];
-  // A status message a downstream block wants to show in place of the default
-  // "Calculation complete" line (e.g. "1 of N values is a population
-  // average"). Set by the defaults block; emitted at the end.
-  var pendingStatus = null;
 
   // Read biomarker values and selected units from the form (always, even without DOB)
   var rawValues = [];
@@ -600,7 +615,6 @@ function calculateResult() {
   }
 
   if (errors.length > 0) {
-    warningsDiv.innerHTML = '';
     addStatus(t('error_prefix', errors.join('; ')), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
@@ -627,15 +641,13 @@ function calculateResult() {
     // Wording adapts to which date(s) are missing, and the prompt is parented
     // to whichever row needs filling so the visual card wraps it.
     placeDobPrompt(allFilled);
-    warningsDiv.innerHTML = '';
     if (!allFilled) {
       addStatus(t('prompt_enter_all_values'), 'warn');
-    } else {
-      var statusKey = (!dobVal && !testdateVal) ? 'status_awaiting_dates'
-        : !dobVal ? 'status_awaiting_dob'
-        : 'status_awaiting_testdate';
-      addStatus(t(statusKey), 'warn');
     }
+    var dateStatusKey = (!dobVal && !testdateVal) ? 'status_awaiting_dates'
+      : !dobVal ? 'status_awaiting_dob'
+      : 'status_awaiting_testdate';
+    addStatus(t(dateStatusKey), 'warn');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -668,7 +680,6 @@ function calculateResult() {
   }
 
   if (dateError) {
-    warningsDiv.innerHTML = '';
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
     if (summaryEl) summaryEl.textContent = '';
@@ -677,7 +688,6 @@ function calculateResult() {
 
   var age = calculateAge(dob, testDate);
   if (age < 0 || age > 150) {
-    warningsDiv.innerHTML = '';
     addStatus(t('error_prefix', t('error_age_out_of_range', age.toFixed(1))), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
@@ -686,7 +696,6 @@ function calculateResult() {
   }
 
   if (!allFilled) {
-    warningsDiv.innerHTML = '';
     addStatus(t('prompt_enter_all_values'), 'warn');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
@@ -735,7 +744,6 @@ function calculateResult() {
 
   // Display the result
   if (isNaN(phenoAge) || !isFinite(phenoAge)) {
-    warningsDiv.innerHTML = '';
     addStatus(t('error_calculation_failed'), 'err');
     if (shareSection) shareSection.style.display = 'none';
     if (saveSection) saveSection.style.display = 'none';
@@ -743,19 +751,14 @@ function calculateResult() {
     return;
   }
 
-  // Defer emitting the success status until after the defaults check below
-  // so a "1 of N is a population average" message can take precedence.
-
   // 1. Share card (the primary visual result)
   generateShareCard(phenoAge, age, acceleration);
 
-  // 2. Warnings (defaults, implausible values)
-  warningsDiv.innerHTML = '';
+  // 2. Terminal — calc complete first, then any caveats. We collect issues
+  // here rather than scattering them across separate banners so the user has
+  // one place to look for "what's still imperfect about this answer".
+  addStatus(t('status_complete', phenoAge.toFixed(1), age.toFixed(1)), 'ok');
 
-  // Note if any values are population defaults — graduated warning. Low
-  // counts surface in the status panel (informational); higher counts get
-  // the more attention-grabbing result-warning banner near the result, with
-  // the most severe cases in the red error tone.
   var defaultCount = 0;
   for (var i = 0; i < formTests.length; i++) {
     var input = document.getElementById(formTests[i].id);
@@ -765,38 +768,26 @@ function calculateResult() {
     var totalTests = formTests.length;
     var oneThird = Math.ceil(totalTests / 3);
     var twoThirds = Math.ceil(totalTests * 2 / 3);
-    if (defaultCount < oneThird) {
-      // Small number of defaults — gentle, status-panel notice.
-      var key = (defaultCount === 1) ? 'defaults_warning_one' : 'defaults_warning_few';
-      pendingStatus = { text: t(key, defaultCount, totalTests), level: 'warn' };
+    var defaultsKey, defaultsLevel;
+    if (defaultCount >= totalTests) {
+      defaultsKey = 'defaults_warning_all'; defaultsLevel = 'err';
+    } else if (defaultCount >= twoThirds) {
+      defaultsKey = 'defaults_warning_extreme'; defaultsLevel = 'err';
+    } else if (defaultCount >= oneThird) {
+      defaultsKey = 'defaults_warning_very'; defaultsLevel = 'warn';
+    } else if (defaultCount === 1) {
+      defaultsKey = 'defaults_warning_one'; defaultsLevel = 'warn';
     } else {
-      var warningKey, modifier;
-      if (defaultCount >= totalTests) {
-        warningKey = 'defaults_warning_all'; modifier = ' result-warning-severe';
-      } else if (defaultCount >= twoThirds) {
-        warningKey = 'defaults_warning_extreme'; modifier = ' result-warning-severe';
-      } else {
-        warningKey = 'defaults_warning_very'; modifier = ' result-warning--mild';
-      }
-      warningsDiv.innerHTML += '<div class="result-warning' + modifier + '">' +
-        t(warningKey, defaultCount, totalTests) + '</div>';
+      defaultsKey = 'defaults_warning_few'; defaultsLevel = 'warn';
     }
+    addStatus(t(defaultsKey, defaultCount, totalTests), defaultsLevel);
   }
 
-  // Warning if any values look implausible
   if (implausibleNames.length > 0) {
     var warningText = implausibleNames.length === 1
       ? t('result_implausible_warning_one', implausibleNames[0])
       : t('result_implausible_warning_many', joinAndList(implausibleNames));
-    warningsDiv.innerHTML += '<div class="result-warning"><strong>Warning:</strong> ' +
-      warningText + '</div>';
-  }
-
-  // Final status line: defaults notice if relevant, otherwise success.
-  if (pendingStatus) {
-    addStatus(pendingStatus.text, pendingStatus.level);
-  } else {
-    addStatus(t('status_complete', phenoAge.toFixed(1), age.toFixed(1)), 'ok');
+    addStatus(t('result_implausible_warning_prefix') + warningText, 'err');
   }
 
   // 3. Descriptive summary text (below the share buttons).
@@ -1191,23 +1182,31 @@ function createFormElements() {
   testdateRow.appendChild(ageReadout);
   dateSection.appendChild(testdateRow);
 
-  // CSV upload — available at the top so users can load data before entering values
-  var csvRow = document.createElement('div');
-  csvRow.className = 'date-row csv-load-row';
+  // CSV upload + (when applicable) "clear saved data" link, grouped on the
+  // right of the date section so they don't sit alone in the page.
+  var toolsRow = document.createElement('div');
+  toolsRow.className = 'date-tools';
   var csvBtn = document.createElement('button');
   csvBtn.setAttribute('type', 'button');
-  csvBtn.className = 'csv-upload';
   csvBtn.textContent = t('save_upload_csv');
   csvBtn.onclick = uploadCSV;
-  csvRow.appendChild(csvBtn);
+  toolsRow.appendChild(csvBtn);
   var csvFileInput = document.createElement('input');
   csvFileInput.setAttribute('type', 'file');
   csvFileInput.setAttribute('id', 'csvFileInput');
   csvFileInput.setAttribute('accept', '.csv');
   csvFileInput.style.display = 'none';
   csvFileInput.setAttribute('onchange', 'handleCSVUpload(this)');
-  csvRow.appendChild(csvFileInput);
-  dateSection.appendChild(csvRow);
+  toolsRow.appendChild(csvFileInput);
+  if (fromStorage) {
+    var storageNotice = document.createElement('span');
+    storageNotice.id = 'storageNotice';
+    storageNotice.className = 'storage-notice-inline';
+    storageNotice.innerHTML = t('storage_restored') +
+      ' <a href="#" onclick="clearLocalStorage(); return false;">' + t('storage_clear_link') + '</a>';
+    toolsRow.appendChild(storageNotice);
+  }
+  dateSection.appendChild(toolsRow);
 
   formDiv.appendChild(dateSection);
 
@@ -1251,7 +1250,16 @@ function createFormElements() {
       }
     }
     if (savedTest) {
-      input.setAttribute('value', savedTest.value);
+      // If this row was a population-default in the saved state, mark it so
+      // fillAutoValues can fill it in with a freshly-computed average for
+      // the user's current age (rather than restoring whatever number the
+      // saved file had pre-rounded). Both the explicit AUTO_TOKEN and the
+      // legacy isDefault flag are honoured.
+      if (isAutoValue(savedTest.value) || savedTest.isDefault) {
+        input.classList.add('pending-auto');
+      } else {
+        input.setAttribute('value', savedTest.value);
+      }
     }
     inputCell.appendChild(input);
     formRow.appendChild(inputCell);
@@ -1287,19 +1295,9 @@ function createFormElements() {
   form.appendChild(formTable);
   formDiv.appendChild(form);
 
-  // Restore default-value styling for fields loaded from localStorage
-  if (fromStorage) {
-    for (var i = 0; i < formTests.length; i++) {
-      var storedTest = null;
-      for (var k = 0; k < saved.tests.length; k++) {
-        if (saved.tests[k].id === formTests[i].id) { storedTest = saved.tests[k]; break; }
-      }
-      if (storedTest && storedTest.isDefault) {
-        var inp = document.getElementById(formTests[i].id);
-        if (inp) inp.classList.add('default-value');
-      }
-    }
-  }
+  // Materialise any rows flagged as defaults in the saved data (URL anchor,
+  // localStorage, or CSV pending an auto fill) into actual numbers.
+  fillAutoValues();
 
   // "Fill missing with defaults" button
   var defaultsDiv = document.createElement('div');
@@ -1317,16 +1315,6 @@ function createFormElements() {
   defaultsDiv.appendChild(defaultsNote);
   formDiv.appendChild(defaultsDiv);
 
-  // Storage notice
-  if (fromStorage) {
-    var storageDiv = document.createElement('div');
-    storageDiv.className = 'storage-notice';
-    storageDiv.id = 'storageNotice';
-    storageDiv.innerHTML = t('storage_restored') + ' ' +
-      '<a href="#" onclick="clearLocalStorage(); return false;">' + t('storage_clear_link') + '</a>';
-    formDiv.appendChild(storageDiv);
-  }
-
   if (saved && saved.dob && saved.tests.length > 0) {
     calculateResult();
   }
@@ -1480,7 +1468,8 @@ function fillMissingWithDefaults() {
   }
 
   if (filled > 0) {
-    showDefaultsMessage(t('defaults_filled', filled, filled > 1 ? t('defaults_filled_plural') : t('defaults_filled_singular')), 'success');
+    // No transient "Filled N fields" message — calculateResult will rebuild
+    // the status panel and the defaults_warning line names the count anyway.
     calculateResult();
   }
 
@@ -1492,6 +1481,55 @@ function clearDefaultStyling(input) {
   input.classList.remove('default-value');
 }
 
+// Walk the form and replace any inputs whose current value is the AUTO_TOKEN
+// (or whose row is flagged as a default in saved data) with population
+// averages for the user's age. Runs after a fresh form is built from a saved
+// URL/CSV/localStorage state so default-flagged values get materialised.
+function fillAutoValues() {
+  var dobVal = document.getElementById('dob').value;
+  var testdateVal = document.getElementById('testdate').value;
+  if (!dobVal || !testdateVal) return;
+  var dob = new Date(dobVal + 'T00:00:00');
+  var testDate = new Date(testdateVal + 'T00:00:00');
+  if (isNaN(dob.getTime()) || isNaN(testDate.getTime()) || testDate <= dob) return;
+  var age = calculateAge(dob, testDate);
+
+  // Build a canonical context from explicit (non-auto) values so dependent
+  // tests like lymphocytes-as-absolute-count can resolve.
+  var ctx = { age: age };
+  for (var i = 0; i < formTests.length; i++) {
+    var input = document.getElementById(formTests[i].id);
+    if (!input || isAutoValue(input.value) || input.classList.contains('pending-auto')) continue;
+    var raw = parseInput(input.value);
+    if (isNaN(raw)) continue;
+    var unitSelect = document.getElementById(formTests[i].id + 'Unit');
+    var unit = unitSelect.options[unitSelect.selectedIndex].text;
+    var canon = toCanonical(raw, unit, formTests[i].id, ctx);
+    if (canon != null && !isNaN(canon)) ctx[formTests[i].id] = canon;
+  }
+
+  for (var i = 0; i < formTests.length; i++) {
+    var input = document.getElementById(formTests[i].id);
+    if (!input) continue;
+    if (!isAutoValue(input.value) && !input.classList.contains('pending-auto')) continue;
+    var canonicalDefault = getDefaultForAge(age, formTests[i].id);
+    if (canonicalDefault == null) { input.value = ''; input.classList.remove('pending-auto'); continue; }
+    var unitSelect = document.getElementById(formTests[i].id + 'Unit');
+    var unit = unitSelect.options[unitSelect.selectedIndex].text;
+    var displayVal = fromCanonical(canonicalDefault, unit, formTests[i].id, ctx);
+    if (displayVal == null || isNaN(displayVal)) { input.value = ''; input.classList.remove('pending-auto'); continue; }
+    var rounded;
+    if (displayVal < 0.1) rounded = displayVal.toPrecision(2);
+    else if (displayVal < 10) rounded = displayVal.toFixed(2);
+    else if (displayVal < 100) rounded = displayVal.toFixed(1);
+    else rounded = displayVal.toFixed(0);
+    input.value = rounded;
+    input.classList.add('default-value');
+    input.classList.remove('pending-auto');
+    ctx[formTests[i].id] = canonicalDefault;
+  }
+}
+
 // --- CSV download ---
 
 function downloadCSV() {
@@ -1506,8 +1544,8 @@ function downloadCSV() {
     var input = document.getElementById(formTests[i].id);
     var unitSelect = document.getElementById(formTests[i].id + 'Unit');
     var unit = unitSelect.options[unitSelect.selectedIndex].text;
-    var isDefault = input.classList.contains('default-value') ? ' (population default)' : '';
-    lines.push(formTests[i].id + ',' + input.value + isDefault + ',' + unit);
+    var serialised = input.classList.contains('default-value') ? AUTO_TOKEN : input.value;
+    lines.push(formTests[i].id + ',' + serialised + ',' + unit);
   }
 
   // Add result if available
@@ -1615,14 +1653,20 @@ function handleCSVUpload(fileInput) {
           if (dateInput.value) loaded++;
         }
       } else {
-        // Biomarker value — strip " (population default)" suffix if present
+        // Biomarker value. Honour both the new AUTO_TOKEN format and the
+        // legacy " (population default)" suffix from older CSVs.
         var cleanValue = value ? value.replace(/\s*\(population default\)/, '') : '';
         var input = document.getElementById(field);
         if (input && cleanValue) {
-          input.value = cleanValue;
-          input.classList.remove('default-value');
+          if (isAutoValue(cleanValue)) {
+            input.value = '';
+            input.classList.remove('default-value');
+            input.classList.add('pending-auto');
+          } else {
+            input.value = cleanValue;
+            input.classList.remove('default-value');
+          }
           loaded++;
-          // Set the matching unit if available
           if (unit) {
             var unitSelect = document.getElementById(field + 'Unit');
             if (unitSelect) {
@@ -1639,9 +1683,10 @@ function handleCSVUpload(fileInput) {
     }
 
     if (loaded > 0) {
-      showCSVMessage(t('save_upload_success', loaded,
-        loaded > 1 ? t('save_upload_success_plural') : t('save_upload_success_singular')), false);
+      // Form is now visibly populated — that's the confirmation. Skip a
+      // transient success message that calculateResult would clear anyway.
       updateDobPrompt();
+      fillAutoValues();
       updateDefaultsButton();
       calculateResult();
     } else {
@@ -1668,11 +1713,11 @@ function saveToLocalStorage() {
     for (var i = 0; i < formTests.length; i++) {
       var input = document.getElementById(formTests[i].id);
       var unitSelect = document.getElementById(formTests[i].id + 'Unit');
+      var isDef = input.classList.contains('default-value');
       data.tests.push({
         id: formTests[i].id,
-        value: input.value,
-        units: unitSelect.options[unitSelect.selectedIndex].text,
-        isDefault: input.classList.contains('default-value')
+        value: isDef ? AUTO_TOKEN : input.value,
+        units: unitSelect.options[unitSelect.selectedIndex].text
       });
     }
     localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
@@ -1706,8 +1751,11 @@ window.onload = function() {
     setStatusHeading();
     return loadConfig();
   }).then(function() {
-    createFormElements();
+    // Seed the panel with a "ready" line. createFormElements may immediately
+    // run calculateResult if there's saved data — that wipes the panel and
+    // populates with the real state. If not, the ready line stays.
     addStatus(t('status_ready'));
+    createFormElements();
   }).catch(function(err) {
     console.error('Failed to load config:', err);
     document.getElementById('phenoAgeForm').innerHTML =
diff --git a/embed/calculators/phenoage/strings/en.json b/embed/calculators/phenoage/strings/en.json
index 265fd1c..e5f7c1f 100644
--- a/embed/calculators/phenoage/strings/en.json
+++ b/embed/calculators/phenoage/strings/en.json
@@ -39,6 +39,7 @@
   "defaults_warning_all": "This result is entirely based on population averages! Please enter some of your own blood test results to get a meaningful biological age estimate.",
   "result_implausible_warning_one": "The value for {0} looks implausible. Please check it and the selected units before relying on this result.",
   "result_implausible_warning_many": "The values for {0} look implausible. Please check them and the selected units before relying on this result.",
+  "result_implausible_warning_prefix": "Warning: ",
   "list_and": "and",
 
   "save_section_heading": "Save your result",
@@ -93,5 +94,6 @@
   "status_awaiting_values": "Waiting for the remaining biomarker values.",
   "status_awaiting_dates": "Waiting for date of birth and test date.",
   "status_awaiting_dob": "Waiting for date of birth.",
-  "status_awaiting_testdate": "Waiting for test date."
+  "status_awaiting_testdate": "Waiting for test date.",
+  "status_storage_restored": "Restored your previous values from this browser\u2019s storage."
 }
diff --git a/embed/shared/embed.css b/embed/shared/embed.css
index 706799f..e4ae4d9 100644
--- a/embed/shared/embed.css
+++ b/embed/shared/embed.css
@@ -2,83 +2,69 @@
    Weights: 300 (light), 400 (regular), 500 (medium), 700 (bold)
    Source: Google Fonts, Inter v18 by Rasmus Andersson
    License: SIL Open Font License 1.1 */
-
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
+  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
   src: url('fonts/inter-300.woff2') format('woff2');
 }
-
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
+  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
   src: url('fonts/inter-400.woff2') format('woff2');
 }
-
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
+  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
   src: url('fonts/inter-500.woff2') format('woff2');
 }
-
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
+  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
   src: url('fonts/inter-700.woff2') format('woff2');
 }
 
-/* --- Theme: CSS custom properties --- */
+/* ===== Theme tokens =====
+   Palette is taken from the LI brand site so the embed sits naturally
+   alongside it on the page. Semantic tones (info / warning / error) don't
+   change between themes — colour is doing real work there. */
 
 :root {
-  /* LI brand light (default) */
   --calc-bg: #eae8e6;
   --calc-text: #0f2846;
   --calc-text-muted: #555;
   --calc-text-faint: #807d78;
+
   --calc-accent: #2e5ea8;
   --calc-accent-soft: rgba(46, 94, 168, 0.15);
   --calc-link: #2e5ea8;
+
   --calc-input-bg: #ffffff;
   --calc-input-border: #c0bcb5;
+  --calc-input-border-error: #c0392b;
+  --calc-input-border-warn: #d4a72c;
+
   --calc-btn-bg: #e0deda;
   --calc-btn-hover: #d4d1ca;
   --calc-border: #d4d1ca;
-  --calc-card-bg: #e3ecf6;
-  --calc-card-border: #b8cce6;
 
-  /* Semantic colours (don't change with theme) */
+  --calc-info-text: #0f2846;
+  --calc-info-bg: #e3ecf6;
+  --calc-info-border: #b8cce6;
   --calc-warning-text: #664d03;
   --calc-warning-bg: #fff3cd;
   --calc-warning-border: #ffecb5;
   --calc-error-text: #842029;
   --calc-error-bg: #f8d7da;
   --calc-error-border: #f5c2c7;
-  --calc-success-text: #0f5132;
-  --calc-success-bg: #d1e7dd;
-  --calc-success-border: #badbcc;
-  --calc-info-text: #0f2846;
-  --calc-info-bg: #e3ecf6;
-  --calc-info-border: #b8cce6;
 
-  /* Terminal / status panel */
   --calc-terminal-bg: #0f2846;
+  --calc-terminal-border: #1f3a5e;
   --calc-terminal-text: #c5d4e6;
   --calc-terminal-prompt: #5bc198;
   --calc-terminal-ok: #5bc198;
   --calc-terminal-warn: #fbbf24;
   --calc-terminal-err: #ff8a8a;
-  --calc-terminal-border: #1f3a5e;
+  --calc-terminal-link: #7db8f0;
+
+  --calc-radius: 4px;
 }
 
-/* Dark theme */
 .theme-dark {
   --calc-bg: #0f2846;
   --calc-text: #eae8e6;
@@ -92,11 +78,8 @@
   --calc-btn-bg: #1a3354;
   --calc-btn-hover: #234271;
   --calc-border: #234271;
-  --calc-card-bg: #1a3354;
-  --calc-card-border: #2c4666;
 }
 
-/* Auto theme: follows user's OS preference */
 @media (prefers-color-scheme: dark) {
   .theme-auto {
     --calc-bg: #0f2846;
@@ -111,12 +94,11 @@
     --calc-btn-bg: #1a3354;
     --calc-btn-hover: #234271;
     --calc-border: #234271;
-    --calc-card-bg: #1a3354;
-    --calc-card-border: #2c4666;
   }
 }
 
-/* Base typography */
+/* ===== Base ===== */
+
 body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: var(--calc-bg);
@@ -132,50 +114,116 @@ h1 {
   letter-spacing: -0.02em;
 }
 
-a {
-  color: var(--calc-link);
+a { color: var(--calc-link); }
+
+/* ===== Form controls ===== */
+
+input[type="text"],
+input[type="number"],
+input[type="date"],
+select {
+  font: inherit;
+  padding: 0.45em 0.6em;
+  background: var(--calc-input-bg);
+  color: var(--calc-text);
+  border: 1px solid var(--calc-input-border);
+  border-radius: var(--calc-radius);
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
 }
 
-.errorNaN {
-  color: var(--calc-error-text);
-  border: solid 1px var(--calc-error-border);
+input:focus,
+select:focus {
+  outline: none;
+  border-color: var(--calc-accent);
+  box-shadow: 0 0 0 3px var(--calc-accent-soft);
 }
 
-.error-message {
-  color: var(--calc-error-text);
-  font-size: 0.85em;
-  margin-left: 0.4em;
+/* Custom chevron so selects look uniform regardless of OS. The disabled
+   variant keeps the same border and dimensions but drops the chevron and
+   fades the text — gives the form a consistent grid even when units can't
+   be changed. */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 2em;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%230f2846' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.7em center;
+  background-size: 10px 6px;
+  cursor: pointer;
 }
 
-.bioageform .result {
-  font-size: 1.2em;
-  color: var(--calc-accent);
+.theme-dark select,
+.theme-auto select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23eae8e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
 }
 
-.result-summary {
-  font-size: 0.95em;
-  color: var(--calc-text-muted);
-  line-height: 1.6;
+select:disabled {
+  background-image: none;
+  background-color: var(--calc-bg);
+  color: var(--calc-text-faint);
+  cursor: default;
+  opacity: 0.85;
 }
 
-.share-image-note {
-  font-size: 0.85em;
-  color: var(--calc-text-muted);
-  margin: 0.4em 0 0.8em;
+/* No spinner controls on number inputs — users will type values, not step. */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.input-warning {
+  border-color: var(--calc-input-border-warn);
+  background: var(--calc-warning-bg);
+}
+.input-error {
+  border-color: var(--calc-input-border-error);
+  background: var(--calc-error-bg);
+}
+
+/* Population-default fills — italicised to signal "we made this up". */
+.default-value {
+  color: var(--calc-text-faint);
   font-style: italic;
+  background: var(--calc-btn-bg);
 }
 
-.bioageform select:disabled {
-    appearance: none;
-    border: none;
-    background: none;
-    color: var(--calc-text);
-    padding-right: 0;
-    background-image: none;
-    cursor: default;
+/* ===== Buttons (calculator-scoped) =====
+   One look for every button inside the form/save/share areas. Specific
+   variants only adjust size or emphasis. */
+
+#phenoAgeForm button,
+#shareSection button,
+#saveSection button {
+  font: inherit;
+  font-size: 0.95em;
+  padding: 0.4em 1em;
+  cursor: pointer;
+  border: 1px solid var(--calc-input-border);
+  border-radius: var(--calc-radius);
+  background: var(--calc-btn-bg);
+  color: var(--calc-text);
+  transition: background 0.15s, border-color 0.15s;
+}
+#phenoAgeForm button:hover:not(:disabled),
+#shareSection button:hover:not(:disabled),
+#saveSection button:hover:not(:disabled) {
+  background: var(--calc-btn-hover);
+  border-color: var(--calc-text-muted);
+}
+#phenoAgeForm button:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
-/* Biomarker form table */
+/* ===== Biomarker form table ===== */
+
 .bioageform table {
   width: 100%;
   border-collapse: separate;
@@ -192,32 +240,47 @@ a {
 .bioageform th {
   text-align: right;
   padding-right: 0.8em;
-  font-weight: 500;
+  font-weight: 700;
   font-size: 0.95em;
   width: 40%;
   white-space: nowrap;
 }
+.bioageform th label { cursor: pointer; }
 
-.bioageform th label {
-  cursor: pointer;
-}
+.bioageform td:first-of-type input { width: 100%; box-sizing: border-box; }
+.bioageform td:nth-of-type(2) { width: 9.5em; padding-left: 6px; }
+.bioageform td:nth-of-type(2) select { width: 100%; box-sizing: border-box; }
 
-.bioageform td:nth-of-type(1) input {
-  width: 100%;
-  box-sizing: border-box;
+/* Range alerts sit in a tr below the input, sharing its border-bottom so
+   the alert visually attaches to the field it describes. */
+.bioageform .range-alert > td { padding: 0 0 8px; }
+.bioageform tr:has(+ .range-alert) input,
+.bioageform tr:has(+ .range-alert) select {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.bioageform td:nth-of-type(2) {
-  width: 9.5em;
-  padding-left: 6px;
+.input-alert {
+  margin: 0;
+  padding: 0.5em 0.7em;
+  font-size: 0.85em;
+  color: var(--calc-warning-text);
+  background: var(--calc-warning-bg);
+  border: 1px solid var(--calc-warning-border);
+  border-top: none;
+  border-radius: 0 0 var(--calc-radius) var(--calc-radius);
 }
-
-.bioageform td:nth-of-type(2) select {
-  width: 100%;
-  box-sizing: border-box;
+.input-alert-error {
+  color: var(--calc-error-text);
+  background: var(--calc-error-bg);
+  border-color: var(--calc-error-border);
 }
 
-/* Date of birth and test date section */
+/* ===== Date section =====
+   DOB and test-date sit in flex rows that become coloured cards (info /
+   error) when guidance applies, and visually wrap any inline message
+   that gets injected into the row. */
+
 .date-section {
   margin: 1em 0;
   display: flex;
@@ -225,13 +288,6 @@ a {
   gap: 0.6em;
 }
 
-.csv-load-row {
-  display: flex;
-  align-items: center;
-  gap: 0.8em;
-  flex-wrap: wrap;
-}
-
 .date-row {
   display: flex;
   flex-wrap: wrap;
@@ -240,40 +296,23 @@ a {
   padding: 0.6em 0.8em;
   border: 1px solid transparent;
   border-radius: 6px;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition: background 0.15s, border-color 0.15s;
 }
-
 .date-row > label {
-  font-weight: 500;
+  font-weight: 700;
   min-width: 8em;
 }
-
-.age-readout {
-  font-size: 0.85em;
-  color: var(--calc-text-faint);
-}
-
-.age-readout:empty {
-  display: none;
-}
-
-.date-row input[type="date"] {
-  font-size: 1em;
-}
-
-/* Soft info card when a date row needs guidance, escalates to error tone
-   when there's an inline error. Class-toggled in JS so the visual card
-   wraps the inline message that gets injected into it. */
 .date-row.date-row--info {
   background: var(--calc-info-bg);
   border-color: var(--calc-info-border);
 }
-
 .date-row.date-row--error {
   background: var(--calc-error-bg);
   border-color: var(--calc-error-border);
 }
 
+/* Inline messages inside a date row reset to plain text — the row's
+   coloured background already does the visual work. */
 .date-row .dob-prompt,
 .date-row .input-alert,
 .date-row .error-message {
@@ -284,422 +323,186 @@ a {
   border: none;
   font-size: 0.85em;
 }
-
 .date-row .error-message {
   color: var(--calc-error-text);
   font-weight: 500;
 }
 
-/* Form inputs */
-input[type="text"],
-input[type="number"],
-input[type="date"],
-select {
-  font: inherit;
-  font-size: 1em;
-  padding: 0.45em 0.6em;
-  background: var(--calc-input-bg);
-  color: var(--calc-text);
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-input[type="date"]:focus,
-select:focus {
-  outline: none;
-  border-color: var(--calc-accent);
-  box-shadow: 0 0 0 3px var(--calc-accent-soft);
-}
-
-/* Custom chevron on selects (so they all look uniform regardless of OS) */
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding-right: 2em;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%230f2846' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 0.7em center;
-  background-size: 10px 6px;
-  cursor: pointer;
-}
-
-.theme-dark select,
-.theme-auto select {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23eae8e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
-}
-
-/* Hide spinner controls on number inputs — users will type values, not step. */
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type="number"] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-/* Range validation states on inputs */
-.input-warning {
-  border-color: #d4a72c;
-  background: var(--calc-warning-bg);
-}
-
-.input-error {
-  border-color: #c0392b;
-  background: var(--calc-error-bg);
-}
+.dob-prompt { font-size: 0.9em; color: var(--calc-info-text); }
+.dob-prompt-error { color: var(--calc-error-text); }
 
-/* Prompt to enter DOB, shown inside the relevant date row */
-.dob-prompt {
-  font-size: 0.9em;
-  color: var(--calc-info-text);
-}
-
-.dob-prompt-error {
+.error-message {
   color: var(--calc-error-text);
-}
-
-/* Informational alerts attached to form inputs (range warnings/errors).
-   Sit in a tr below the input, span all columns, and visually anchor to the
-   input via the same coloured border. */
-.bioageform .range-alert > td {
-  padding: 0 0 8px;
-}
-
-.input-alert {
-  margin: 0;
-  padding: 0.5em 0.7em;
   font-size: 0.85em;
-  color: var(--calc-warning-text);
-  background: var(--calc-warning-bg);
-  border: 1px solid var(--calc-warning-border);
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-}
-
-.input-alert-error {
-  color: var(--calc-error-text);
-  background: var(--calc-error-bg);
-  border-color: var(--calc-error-border);
-}
-
-/* Make the input above an alert visually attach to it (no rounded bottom). */
-.bioageform tr:has(+ .range-alert) input,
-.bioageform tr:has(+ .range-alert) select {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* Warning banner shown under result when implausible values present */
-.result-warning {
-  margin: 0.8em 0;
-  padding: 0.6em 0.9em;
-  font-size: 0.9em;
-  color: var(--calc-error-text);
-  background: var(--calc-error-bg);
-  border: 1px solid var(--calc-error-border);
-  border-left: 3px solid var(--calc-error-text);
-  border-radius: 4px;
-}
-
-/* Milder result warning (e.g. "very approximate" — a third of values are
-   defaults). Yellow rather than red since it's a heads-up, not an error. */
-.result-warning--mild {
-  color: var(--calc-warning-text);
-  background: var(--calc-warning-bg);
-  border-color: var(--calc-warning-border);
-  border-left-color: var(--calc-warning-text);
-}
-
-/* Severe result warning (most or all values are defaults). Reuses the base
-   red tone but with bold text to flag how unreliable the result is. */
-.result-warning-severe {
-  font-weight: bold;
-}
-
-/* Share card */
-#shareSection {
-  margin-top: 1.5em;
-}
-
-.share-card {
-  width: 100%;
-  max-width: 600px;
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.share-card-inner {
-  transform-origin: top left;
-}
-
-/* Scale inner 600px card to fit container */
-@media (max-width: 600px) {
-  .share-card-inner {
-    transform: scale(calc(100vw / 640));
-  }
-  .share-card {
-    height: calc(600px * (100vw / 640));
-  }
-}
-
-#shareCardImage {
-  max-width: 600px;
-  border: 1px solid var(--calc-border);
-  border-radius: 4px;
-}
-
-.share-buttons {
-  margin-top: 0.5em;
-}
-
-.share-buttons button {
-  font-size: 1em;
-  padding: 0.4em 1.2em;
-  margin-right: 0.5em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
-}
-
-.share-buttons button:hover {
-  background: var(--calc-btn-hover);
+  margin-left: 0.4em;
 }
 
-/* Default-value styling for population-average-filled inputs */
-.default-value {
+.age-readout {
+  font-size: 0.85em;
   color: var(--calc-text-faint);
-  font-style: italic;
-  background: var(--calc-btn-bg);
 }
+.age-readout:empty { display: none; }
 
-/* Defaults section */
-.defaults-section {
-  margin: 1em 0;
+/* CSV upload + storage actions sit on the right of the date section */
+.date-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6em;
+  align-items: center;
+  margin-top: 0.2em;
 }
-
-.defaults-section button {
-  font: inherit;
-  font-size: 0.95em;
-  padding: 0.5em 1em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
-  transition: background 0.15s ease, border-color 0.15s ease;
+.storage-notice-inline {
+  font-size: 0.85em;
+  color: var(--calc-text-muted);
 }
-
-.defaults-section button:hover:not(:disabled) {
-  background: var(--calc-btn-hover);
-  border-color: var(--calc-text-muted);
+.storage-notice-inline a {
+  color: var(--calc-link);
+  text-decoration: underline;
 }
 
-.defaults-section button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
+/* ===== Defaults section ===== */
 
+.defaults-section { margin: 1em 0; }
 .defaults-note {
   font-size: 0.8em;
   color: var(--calc-text-faint);
   margin: 0.3em 0 0;
 }
 
-/* Terminal-style status panel — non-field messages collect here so the user
-   has a single, predictable place to look for what just happened. */
+/* ===== Status terminal =====
+   Single panel for all current, non-field-specific messages — defaults
+   warnings, implausible-value summary, awaiting-input states, and one-shot
+   confirmations. Rebuilt from scratch on every calculateResult so it
+   reflects current state, not history. */
+
 .status-terminal {
   margin: 1.2em 0;
   background: var(--calc-terminal-bg);
   border: 1px solid var(--calc-terminal-border);
   border-radius: 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.85em;
   color: var(--calc-terminal-text);
   overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
-
 .status-terminal__header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
   padding: 6px 10px;
   background: rgba(255, 255, 255, 0.04);
   border-bottom: 1px solid var(--calc-terminal-border);
   color: rgba(197, 212, 230, 0.7);
-  font-size: 0.85em;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
-
 .status-terminal__body {
   padding: 8px 10px;
-  max-height: 180px;
+  max-height: 220px;
   overflow-y: auto;
   line-height: 1.5;
 }
-
 .status-terminal__line {
   display: flex;
   gap: 6px;
   word-break: break-word;
 }
-
+.status-terminal__line a {
+  color: var(--calc-terminal-link);
+  text-decoration: underline;
+}
 .status-terminal__line::before {
   content: ">";
   color: var(--calc-terminal-prompt);
   flex-shrink: 0;
 }
+.status-terminal__line--ok    { color: var(--calc-terminal-ok); }
+.status-terminal__line--warn  { color: var(--calc-terminal-warn); }
+.status-terminal__line--err   { color: var(--calc-terminal-err); }
+.status-terminal__line--ok::before   { content: "✓"; color: var(--calc-terminal-ok); }
+.status-terminal__line--warn::before { content: "!"; color: var(--calc-terminal-warn); }
+.status-terminal__line--err::before  { content: "✗"; color: var(--calc-terminal-err); }
 
-.status-terminal__line--ok { color: var(--calc-terminal-ok); }
-.status-terminal__line--warn { color: var(--calc-terminal-warn); }
-.status-terminal__line--err { color: var(--calc-terminal-err); }
+/* ===== Share card ===== */
 
-.status-terminal__line--ok::before { content: "✓"; color: var(--calc-terminal-ok); }
-.status-terminal__line--warn::before { content: "!"; color: var(--calc-terminal-warn); }
-.status-terminal__line--err::before { content: "✗"; color: var(--calc-terminal-err); }
+#shareSection { margin-top: 1.5em; }
 
-/* CSV download button */
-.csv-download {
-  font-size: 0.9em;
-  padding: 0.3em 0.8em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
+.share-card {
+  width: 100%;
+  max-width: 600px;
+  overflow: hidden;
+  border-radius: var(--calc-radius);
+}
+.share-card-inner { transform-origin: top left; }
+@media (max-width: 600px) {
+  .share-card-inner { transform: scale(calc(100vw / 640)); }
+  .share-card { height: calc(600px * (100vw / 640)); }
 }
 
-.csv-download:hover,
-.csv-upload:hover {
-  background: var(--calc-btn-hover);
+#shareCardImage {
+  max-width: 600px;
+  border: 1px solid var(--calc-border);
+  border-radius: var(--calc-radius);
 }
 
-.csv-upload {
-  font-size: 0.9em;
-  padding: 0.3em 0.8em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
+.share-buttons {
+  margin-top: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
 }
 
-/* localStorage notice */
-.storage-notice {
+.result-summary {
+  font-size: 0.95em;
+  color: var(--calc-text-muted);
+  line-height: 1.6;
+  margin: 0 0 1em;
+}
+.share-image-note {
   font-size: 0.85em;
   color: var(--calc-text-muted);
-  margin: 0.5em 0;
-  padding: 0.4em 0.7em;
-  background: var(--calc-card-bg);
-  border: 1px solid var(--calc-card-border);
-  border-radius: 4px;
+  margin: 0.4em 0 0.8em;
+  font-style: italic;
 }
 
-/* Save your result section */
+/* ===== Save section ===== */
+
 .save-section {
   margin-top: 1.5em;
   padding-top: 1em;
   border-top: 1px solid var(--calc-border);
 }
-
-.save-section h3 {
-  margin: 0 0 0.5em;
-}
-
+.save-section h3 { margin: 0 0 0.5em; }
 .save-section label {
   display: block;
   font-size: 0.9em;
   color: var(--calc-text-muted);
   margin-bottom: 0.3em;
 }
-
 .save-link-row {
   display: flex;
   gap: 0.4em;
   margin-bottom: 0.3em;
 }
-
 .result-link-input {
   flex: 1;
   font-size: 0.85em;
   padding: 0.4em 0.6em;
   border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
+  border-radius: var(--calc-radius);
   background: var(--calc-input-bg);
   color: var(--calc-text);
   min-width: 0;
 }
-
-.result-link-input:focus {
-  outline: 2px solid var(--calc-accent);
-  outline-offset: -1px;
-}
-
-.copy-btn {
-  font-size: 0.85em;
-  padding: 0.4em 0.8em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
-  white-space: nowrap;
-}
-
-.copy-btn:hover {
-  background: var(--calc-btn-hover);
-}
-
-.save-privacy-note {
-  font-size: 0.8em;
-  color: var(--calc-text-faint);
-  margin: 0.3em 0 0.8em;
-}
-
-.save-option {
-  margin-top: 0.8em;
-}
-
+.save-privacy-note,
 .save-option-note {
   font-size: 0.8em;
   color: var(--calc-text-faint);
-  margin: 0.3em 0 0;
-}
-
-.save-buttons {
-  display: flex;
-  gap: 0.5em;
-  flex-wrap: wrap;
-}
-
-.save-browser-btn {
-  font-size: 0.9em;
-  padding: 0.3em 0.8em;
-  cursor: pointer;
-  border: 1px solid var(--calc-input-border);
-  border-radius: 4px;
-  background: var(--calc-btn-bg);
-  color: var(--calc-text);
-}
-
-.save-browser-btn:hover {
-  background: var(--calc-btn-hover);
+  margin: 0.3em 0 0.8em;
 }
+.save-option { margin-top: 0.8em; }
+.save-buttons { display: flex; gap: 0.5em; flex-wrap: wrap; }
+.save-browser-warning { color: var(--calc-error-text); }
 
-.save-browser-warning {
-  color: var(--calc-error-text);
-}
+/* ===== Embed link ===== */
 
-/* Embed / attribution link */
 .embed-link {
   margin-top: 2em;
   padding-top: 1em;

From 88add030eef3c17de52da99c185788394ef7d1bc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 4 May 2026 11:45:11 +0000
Subject: [PATCH 4/5] Style auto-filled values in friendly blue and drop legacy
 compat

- Auto-filled biomarker inputs now share the same friendly-blue tint
  as the date-of-birth prompt (italic info-bg/text), so they read
  visually as "we filled this in for you" rather than as a real
  entry.
- "Fill missing values..." button changes to a faded blue when
  defaults are present and reports how many are filled (e.g. "1
  value filled with a population average" / "9 values filled with
  population averages"). Reverts to the original CTA if the user
  types over every default.
- Drop legacy compat for the pre-public formats: the `isDefault` hint
  in old localStorage and the " (population default)" suffix in old
  CSVs. AUTO_TOKEN is the only serialised flag.

https://claude.ai/code/session_019k6FFmsULqWJPK5F5uifZW
---
 embed/calculators/phenoage/phenoage.js     | 40 +++++++++++++---------
 embed/calculators/phenoage/strings/en.json |  5 ++-
 embed/shared/embed.css                     | 20 +++++++++--
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/embed/calculators/phenoage/phenoage.js b/embed/calculators/phenoage/phenoage.js
index fefb821..9c4a6bb 100644
--- a/embed/calculators/phenoage/phenoage.js
+++ b/embed/calculators/phenoage/phenoage.js
@@ -1250,12 +1250,9 @@ function createFormElements() {
       }
     }
     if (savedTest) {
-      // If this row was a population-default in the saved state, mark it so
-      // fillAutoValues can fill it in with a freshly-computed average for
-      // the user's current age (rather than restoring whatever number the
-      // saved file had pre-rounded). Both the explicit AUTO_TOKEN and the
-      // legacy isDefault flag are honoured.
-      if (isAutoValue(savedTest.value) || savedTest.isDefault) {
+      if (isAutoValue(savedTest.value)) {
+        // Population-default flag — fillAutoValues will fill it in once the
+        // form is built and the user's age is known.
         input.classList.add('pending-auto');
       } else {
         input.setAttribute('value', savedTest.value);
@@ -1400,11 +1397,24 @@ function showDefaultsMessage(text, type) {
 function updateDefaultsButton() {
   var btn = document.getElementById('defaultsBtn');
   if (!btn) return;
-  var allFilled = formTests.every(function(t) {
-    var input = document.getElementById(t.id);
-    return input && input.value !== '';
-  });
+  var allFilled = true;
+  var defaultCount = 0;
+  for (var i = 0; i < formTests.length; i++) {
+    var input = document.getElementById(formTests[i].id);
+    if (!input) continue;
+    if (input.value === '') allFilled = false;
+    if (input.classList.contains('default-value')) defaultCount++;
+  }
   btn.disabled = allFilled;
+  if (defaultCount > 0) {
+    btn.classList.add('defaults-btn--filled');
+    btn.textContent = defaultCount === 1
+      ? t('defaults_button_filled_one')
+      : t('defaults_button_filled_many', defaultCount);
+  } else {
+    btn.classList.remove('defaults-btn--filled');
+    btn.textContent = t('defaults_button');
+  }
 }
 
 function fillMissingWithDefaults() {
@@ -1653,17 +1663,15 @@ function handleCSVUpload(fileInput) {
           if (dateInput.value) loaded++;
         }
       } else {
-        // Biomarker value. Honour both the new AUTO_TOKEN format and the
-        // legacy " (population default)" suffix from older CSVs.
-        var cleanValue = value ? value.replace(/\s*\(population default\)/, '') : '';
+        // Biomarker value.
         var input = document.getElementById(field);
-        if (input && cleanValue) {
-          if (isAutoValue(cleanValue)) {
+        if (input && value) {
+          if (isAutoValue(value)) {
             input.value = '';
             input.classList.remove('default-value');
             input.classList.add('pending-auto');
           } else {
-            input.value = cleanValue;
+            input.value = value;
             input.classList.remove('default-value');
           }
           loaded++;
diff --git a/embed/calculators/phenoage/strings/en.json b/embed/calculators/phenoage/strings/en.json
index e5f7c1f..c8a7f82 100644
--- a/embed/calculators/phenoage/strings/en.json
+++ b/embed/calculators/phenoage/strings/en.json
@@ -77,12 +77,11 @@
   "card_aria_label": "Biological age result card: biological age {0}, chronological age {1}, {2}",
 
   "defaults_button": "Fill missing values with population averages for my age",
+  "defaults_button_filled_one": "1 value filled with a population average",
+  "defaults_button_filled_many": "{0} values filled with population averages",
   "defaults_note": "Uses median values from the NHANES\u00a0III population study for your age.",
   "defaults_need_dates": "Please enter your date of birth and test date first.",
   "defaults_need_valid_dates": "Please enter valid dates first.",
-  "defaults_filled": "Filled {0} field{1} with population averages.",
-  "defaults_filled_plural": "s",
-  "defaults_filled_singular": "",
 
   "storage_restored": "Your previous values were restored from this browser\u2019s storage.",
   "storage_clear_link": "Clear saved data",
diff --git a/embed/shared/embed.css b/embed/shared/embed.css
index e4ae4d9..f1a1953 100644
--- a/embed/shared/embed.css
+++ b/embed/shared/embed.css
@@ -187,11 +187,14 @@ input[type="number"] {
   background: var(--calc-error-bg);
 }
 
-/* Population-default fills — italicised to signal "we made this up". */
+/* Population-default fills — italic and tinted with the same friendly blue
+   used for the date-of-birth prompt, so they read as "we filled this in for
+   you" rather than as a real entry. */
 .default-value {
-  color: var(--calc-text-faint);
+  color: var(--calc-info-text);
   font-style: italic;
-  background: var(--calc-btn-bg);
+  background: var(--calc-info-bg);
+  border-color: var(--calc-info-border);
 }
 
 /* ===== Buttons (calculator-scoped) =====
@@ -369,6 +372,17 @@ input[type="number"] {
   margin: 0.3em 0 0;
 }
 
+/* When the button has filled some values, show that visually with the same
+   friendly-blue tint as the default values themselves. The button is also
+   disabled at this point — opacity carries that. */
+#defaultsBtn.defaults-btn--filled,
+#defaultsBtn.defaults-btn--filled:disabled {
+  background: var(--calc-info-bg);
+  border-color: var(--calc-info-border);
+  color: var(--calc-info-text);
+  opacity: 0.85;
+}
+
 /* ===== Status terminal =====
    Single panel for all current, non-field-specific messages — defaults
    warnings, implausible-value summary, awaiting-input states, and one-shot

From bbad07c3a51f1ec861ed89335c5b5599b5194337 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 4 May 2026 11:56:40 +0000
Subject: [PATCH 5/5] Fix calculator default-value styling and disabled selects

- input.default-value now beats the input[type] selectors on
  specificity, so auto-filled biomarker rows actually get the
  friendly-blue tint and italics.
- Disabled unit selects keep normal text colour and background;
  only the chevron and pointer are removed. Faded text was making
  it look like something was broken.
- Range alerts are self-contained banners with all four borders
  and the standard radius, separated from the input above by a
  small gap. The "attached to input" trick relied on hidden
  bottom-border math that the user (rightly) read as a bug.
- fillAutoValues now also calls updateDefaultsButton at its tail,
  so the "Fill missing values" button reliably reflects the count
  of defaults regardless of which entry path triggered the fill.

https://claude.ai/code/session_019k6FFmsULqWJPK5F5uifZW
---
 embed/calculators/phenoage/phenoage.js |  2 ++
 embed/shared/embed.css                 | 29 +++++++++++++-------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/embed/calculators/phenoage/phenoage.js b/embed/calculators/phenoage/phenoage.js
index 9c4a6bb..7589e7f 100644
--- a/embed/calculators/phenoage/phenoage.js
+++ b/embed/calculators/phenoage/phenoage.js
@@ -1538,6 +1538,8 @@ function fillAutoValues() {
     input.classList.remove('pending-auto');
     ctx[formTests[i].id] = canonicalDefault;
   }
+  // Reflect the new default count in the "Fill missing values" button.
+  updateDefaultsButton();
 }
 
 // --- CSV download ---
diff --git a/embed/shared/embed.css b/embed/shared/embed.css
index f1a1953..836b51c 100644
--- a/embed/shared/embed.css
+++ b/embed/shared/embed.css
@@ -159,12 +159,15 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23eae8e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
 }
 
+/* Disabled selects (units that can't be changed) keep the same box shape,
+   text colour, and background as enabled ones — only the chevron and pointer
+   go away. Faded text would look like something's broken. */
 select:disabled {
   background-image: none;
-  background-color: var(--calc-bg);
-  color: var(--calc-text-faint);
+  background-color: var(--calc-input-bg);
+  color: var(--calc-text);
+  opacity: 1;
   cursor: default;
-  opacity: 0.85;
 }
 
 /* No spinner controls on number inputs — users will type values, not step. */
@@ -189,8 +192,9 @@ input[type="number"] {
 
 /* Population-default fills — italic and tinted with the same friendly blue
    used for the date-of-birth prompt, so they read as "we filled this in for
-   you" rather than as a real entry. */
-.default-value {
+   you" rather than as a real entry. Selector deliberately scoped to inputs
+   so the (more specific) attribute selector earlier doesn't override it. */
+input.default-value {
   color: var(--calc-info-text);
   font-style: italic;
   background: var(--calc-info-bg);
@@ -254,14 +258,10 @@ input[type="number"] {
 .bioageform td:nth-of-type(2) { width: 9.5em; padding-left: 6px; }
 .bioageform td:nth-of-type(2) select { width: 100%; box-sizing: border-box; }
 
-/* Range alerts sit in a tr below the input, sharing its border-bottom so
-   the alert visually attaches to the field it describes. */
-.bioageform .range-alert > td { padding: 0 0 8px; }
-.bioageform tr:has(+ .range-alert) input,
-.bioageform tr:has(+ .range-alert) select {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
+/* Range alerts sit in a tr below the input as their own self-contained
+   banner. They span the full table width so a long message wraps naturally;
+   the small top gap separates them from the input above. */
+.bioageform .range-alert > td { padding: 4px 0 8px; }
 
 .input-alert {
   margin: 0;
@@ -270,8 +270,7 @@ input[type="number"] {
   color: var(--calc-warning-text);
   background: var(--calc-warning-bg);
   border: 1px solid var(--calc-warning-border);
-  border-top: none;
-  border-radius: 0 0 var(--calc-radius) var(--calc-radius);
+  border-radius: var(--calc-radius);
 }
 .input-alert-error {
   color: var(--calc-error-text);