/* Layout for the rebuilt family pages. Their colours are the tokens set at
   the top of this file (the look of 11 Oct), over design-system.css's. */

/* ==========================================================================
   The look of 11 Oct (founder's choices): soft grey page, white rounded cards,
   the phone's own font, terracotta as the warm accent; a near-black dark mode
   (kind to eyes at night and to OLED batteries). data-theme on <html> is set
   by scripts/family/theme-boot.js: light, dark, or auto (follows the phone).
   Every semantic token is redefined here, so the family pages never mix the
   older palette with this one. Charts draw in --chart-ink, never the accent,
   so a chart line can't be mistaken for the red of "low/high".
   ========================================================================== */
body.fy {
  color-scheme: light;
  --surface-page: #f5f5f7; --surface-raised: #ffffff; --surface-sunken: #f1f1f3; --surface-inverse: #c45a2c; --surface-selected: #fbeee7;
  --border-subtle: #e6e6e8; --border-default: #d6d6da; --border-strong: #8e8e96;
  --text-primary: #1d1d1f; --text-secondary: #5c5c63; --text-tertiary: #5c5c63; --text-on-inverse: #ffffff;
  --text-accent: #a84a22; --text-link: #a84a22; --accent-primary: #b85429; --focus-ring: #c45a2c;
  --status-critical-fg: #c0392b; --status-critical-bg: #fdedeb; --status-caution-fg: #96620a; --status-caution-bg: #fdf5e6;
  --status-calm-fg: #1e7a4a; --status-calm-bg: #e8f6ee;
  --chart-ink: #2f6fd6; --shadow-overlay: 0 8px 24px rgba(29, 29, 31, 0.14);
}
html[data-theme="dark"] body.fy {
  color-scheme: dark;
  --surface-page: #0b0c0c; --surface-raised: #161817; --surface-sunken: #101211; --surface-inverse: #ff9a6c; --surface-selected: #2a1d16;
  --border-subtle: #252927; --border-default: #333836; --border-strong: #6b726e;
  --text-primary: #ececea; --text-secondary: #a9aeab; --text-tertiary: #a9aeab; --text-on-inverse: #1a0d06;
  --text-accent: #ff9a6c; --text-link: #ff9a6c; --accent-primary: #e2794b; --focus-ring: #ff9a6c;
  --status-critical-fg: #ff7a85; --status-critical-bg: #331a17; --status-caution-fg: #e8b866; --status-caution-bg: #33260f;
  --status-calm-fg: #6fce9b; --status-calm-bg: #10281c;
  --chart-ink: #8fb4ff; --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.fy, html:not([data-theme]) body.fy {
  color-scheme: dark;
  --surface-page: #0b0c0c; --surface-raised: #161817; --surface-sunken: #101211; --surface-inverse: #ff9a6c; --surface-selected: #2a1d16;
  --border-subtle: #252927; --border-default: #333836; --border-strong: #6b726e;
  --text-primary: #ececea; --text-secondary: #a9aeab; --text-tertiary: #a9aeab; --text-on-inverse: #1a0d06;
  --text-accent: #ff9a6c; --text-link: #ff9a6c; --accent-primary: #e2794b; --focus-ring: #ff9a6c;
  --status-critical-fg: #ff7a85; --status-critical-bg: #331a17; --status-caution-fg: #e8b866; --status-caution-bg: #33260f;
  --status-calm-fg: #6fce9b; --status-calm-bg: #10281c;
  --chart-ink: #8fb4ff; --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}
html[data-text="big"] { font-size: 112.5%; }
html[data-theme="dark"] body.fy img { filter: brightness(0.85); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] body.fy img, html:not([data-theme]) body.fy img { filter: brightness(0.85); } }
/* The page itself (scrollbars, overscroll, the moment before <body>) follows the chosen theme too. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; background: #0b0c0c; }
html[data-theme="auto"] { color-scheme: light dark; }

body.fy { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); }

.fy-nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5);
  background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.fy-nav__brand img { display: block; }
.fy-nav__space { font-weight: 600; font-size: var(--text-base); max-width: 16rem; }
.fy-nav__links { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.fy-nav__link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); color: var(--text-secondary);
  text-decoration: none; font-size: var(--text-sm); }
.fy-nav__link.is-active, .fy-nav__link:hover { background: var(--surface-selected); color: var(--text-primary); }

.fy-page { padding-top: var(--space-6); padding-bottom: var(--space-8); max-width: 44rem; }
.fy-page h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.fy-lead { color: var(--text-secondary); margin: 0 0 var(--space-6); }
.fy-stack > * + * { margin-top: var(--space-4); }
.fy-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.fy-row--between { justify-content: space-between; }
.fy-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }

.fy-list { list-style: none; margin: 0; padding: 0; }
.fy-list > li + li { margin-top: var(--space-3); }
.fy-item { display: block; color: inherit; text-decoration: none; }
.fy-item__title { font-weight: 600; margin: 0; }
.fy-item__meta { color: var(--text-tertiary); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.fy-item__message { margin: var(--space-2) 0 0; color: var(--text-secondary); }

.fy-message { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: 0 0 var(--space-4); }
.fy-message--critical { background: var(--surface-sunken); color: var(--status-critical-fg); }
.fy-message--calm { background: var(--surface-sunken); color: var(--text-primary); }

.fy-notice { font-size: var(--text-sm); color: var(--text-secondary); border-left: 3px solid var(--border-strong);
  padding-left: var(--space-3); margin: 0 0 var(--space-4); }
.fy-section h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.fy-section ul { margin: 0; padding-left: var(--space-5); }
.fy-transcript { white-space: pre-wrap; font-size: var(--text-sm); max-height: 24rem; overflow: auto; }
.fy-muted { color: var(--text-tertiary); }
.fy-hidden { display: none !important; }
.fy-recording { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Reading papers (Piece C1) */
.fy-add-papers { display: block; width: 100%; font-size: var(--text-xl); padding: var(--space-5) var(--space-4); }
.fy-add-papers__hint { margin: var(--space-2) 0 var(--space-4); text-align: center; }
.fy-consent { margin-bottom: var(--space-6); }
.fy-consent__question { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.fy-paper__icon, .fy-doc-icon { font-size: var(--text-xl); line-height: 1; }
.fy-paper__body { flex: 1; min-width: 12rem; }
.fy-dot { font-size: var(--text-lg); line-height: 1; }
.fy-result__main { display: flex; gap: var(--space-3); align-items: center; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fy-result__name { flex: 1; font-weight: 600; }
.fy-result__value { font-variant-numeric: tabular-nums; }
.fy-summary__headline { font-size: var(--text-lg); margin: 0; }
.fy-urgent { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--status-critical-bg); color: var(--status-critical-fg); font-weight: 600; }
.fy-page-view { position: relative; }
/* A page shown turned the right way up: the box keeps the turned page's shape; the photo and its marks turn together. */
.fy-page-turn { position: relative; width: 100%; overflow: hidden; }
.fy-page-turn > .fy-page-view { position: absolute; left: 50%; top: 50%; transform-origin: center; }
.fy-page-view img { display: block; width: 100%; height: auto; }
.fy-page-view__mark { position: absolute; border: 3px solid var(--status-caution-fg); border-radius: var(--radius-sm); }
.fy-pages { list-style: none; margin: 0; padding: 0; }
.fy-pages > li + li { margin-top: var(--space-2); }
.fy-input--short { max-width: 9rem; }
/* A page chosen for "Separate these": the label is the tap target, at least
   the design system's touch minimum in both directions. */
.fy-choose { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min);
  min-width: var(--touch-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.fy-choose input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--accent-primary); }
.fy-choose:has(input:checked) { background: var(--surface-selected); border-color: var(--accent-primary); }
.fy-upload-progress { margin: 0 0 var(--space-4); }
.fy-progress { width: 100%; height: 0.75rem; accent-color: var(--accent-primary); }

/* Selecting several items to delete (home page). The bar is fixed to the
   bottom; the confirmation is a bottom sheet, like .ds-sheet, reachable
   one-handed. */
.fy-select-tools { display: flex; justify-content: flex-end; }
.fy-select-tools .ds-btn { margin: 0 0 var(--space-3); }
.fy-item--selectable { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.fy-item--selectable:has(.fy-item__check:checked) { background: var(--surface-selected); border-color: var(--accent-primary); }
.fy-item__check { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; flex: 0 0 auto; accent-color: var(--accent-primary); }
.fy-item__content { flex: 1; min-width: 0; }
.fy-item--locked { background: var(--surface-sunken); }
.fy-item__reason { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.fy-select-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface-raised); border-top: 1px solid var(--border-default); box-shadow: var(--shadow-overlay); }
.fy-select-tray__count { flex: 1; font-weight: 600; }
body.fy-selecting main { padding-bottom: 9rem; }
.fy-btn--danger { background: var(--status-critical-fg); color: var(--text-on-inverse); }
.fy-confirm { width: 100%; max-width: var(--container-max); max-height: 85vh; margin: auto auto 0; overflow-y: auto; border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-overlay); }
.fy-confirm::backdrop { background: rgba(0, 0, 0, 0.5); }
.fy-confirm h2 { margin-top: 0; }
/* Answer sheet: a ✕ that stays at the top right while a long answer scrolls. Zero height, so nothing moves. */
.fy-answer__x { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; height: 0; overflow: visible; }
.fy-answer__x-btn { flex: none; width: var(--touch-min); height: var(--touch-min); min-width: 3rem; min-height: 3rem; padding: 0; border: 1px solid var(--border-default);
  border-radius: var(--radius-full); background: var(--surface-raised); color: var(--text-primary); font: inherit; font-size: var(--text-lg); line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-overlay); }
.fy-answer__x-btn:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.fy-answer .fy-answer__x ~ h2 { padding-right: 3.5rem; }
.fy-confirm__list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.fy-confirm__warning { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--status-caution-bg); color: var(--text-primary); }
.fy-confirm__actions { justify-content: flex-end; }

/* Whose paper it is (report page). */
.fy-name { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-strong); }
.fy-name--same { border-left-color: var(--status-calm-fg); }
.fy-name--close { border-left-color: var(--accent-primary); background: var(--surface-selected); }
.fy-name-card { background: var(--status-caution-bg); }
.fy-link-button { min-height: var(--touch-min); padding: 0; border: 0; background: none; color: var(--text-link); font: inherit;
  font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Health trends (piece 2): the Health tab. */
.fy-health-waiting { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--status-caution-bg); }
.fy-health-waiting a { color: var(--text-primary); font-weight: 600; }
.fy-area { display: flex; gap: var(--space-3); align-items: center; }
.fy-area--look { border-left: 6px solid var(--status-critical-fg); background: var(--status-critical-bg); }
.fy-area__icon { font-size: var(--text-xl); line-height: 1; }
.fy-area__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fy-area__reason { color: var(--status-critical-fg); font-weight: 700; font-size: var(--text-sm); margin-top: var(--space-1); }
/* Not yet comparable (unsure, or no factor): amber like 🟠, not the red of a value outside its range. */
.fy-area--check { border-left: 6px solid var(--status-caution-fg); background: var(--status-caution-bg); }
.fy-area__reason--check { color: var(--text-primary); }
.fy-test__head { display: flex; flex-direction: column; align-items: flex-end; }
.fy-test__status { font-size: var(--text-sm); color: var(--text-secondary); }
.fy-test__value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.fy-test__value--out { color: var(--status-critical-fg); }
.fy-test__value--in { color: var(--status-calm-fg); }
.fy-trend { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.fy-trend__arrow { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-sunken); font-weight: 700; }
.fy-trend__note { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.fy-info { min-width: var(--touch-min); min-height: var(--touch-min); padding: 0; border: 0; background: none;
  color: var(--text-link); font: inherit; font-size: var(--text-lg); cursor: pointer; }
.fy-chart { display: block; width: 100%; height: auto; max-width: 100%; }
.fy-chart__band { fill: var(--status-calm-fg); fill-opacity: 0.3; }
.fy-chart__line { fill: none; stroke: var(--chart-ink); stroke-width: 2.5; }
.fy-chart__dot { fill: var(--chart-ink); stroke: var(--surface-raised); stroke-width: 2; }
.fy-chart__dot--out { fill: var(--status-critical-fg); }
.fy-chart__dot--hollow { fill: var(--surface-raised); stroke: var(--chart-ink); stroke-width: 2.5; }
.fy-chart__dot--hollow.fy-chart__dot--out { stroke: var(--status-critical-fg); }
.fy-test__facts { margin: 0; padding-left: var(--space-5); }
.fy-readings { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.fy-reading { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle); }
.fy-reading--duplicate { color: var(--text-tertiary); }
.fy-reading__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.fy-times { margin: 0; color: var(--text-secondary); }
.fy-date-card { border-color: var(--status-caution-fg); }
.fy-duplicate { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--status-calm-bg); color: var(--text-primary); }

/* Health timeline (piece 1): check-in, medicines and events, lanes, "that day", banners. */
.fy-emergency { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-critical-bg);
  border-left: 6px solid var(--status-critical-fg); color: var(--text-primary); }
.fy-emergency strong { color: var(--status-critical-fg); }
.fy-hospital { margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-selected); font-weight: 600; }
.fy-checkin-due { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-caution-bg); }
.fy-checkin-due a { color: var(--text-primary); font-weight: 600; }
.fy-question { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.fy-question__label { font-weight: 600; }
.fy-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fy-choice { min-height: var(--touch-min); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--text-primary); font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.fy-choice[aria-pressed="true"], .fy-choice[aria-current="page"] { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-inverse); }
.fy-readings-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.fy-grow { flex: 1; min-width: 0; }
.fy-btn-small { min-height: var(--touch-min); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.fy-care--check { border-left: 6px dashed var(--accent-primary); }
.fy-edit { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.fy-chart__stay { fill: var(--surface-selected); }
.fy-chart__dot--home { fill: var(--surface-raised); stroke: var(--chart-ink); stroke-width: 2.5; }
.fy-lanes { display: flex; flex-direction: column; gap: var(--space-1); }
.fy-lane { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.fy-lane__title { color: var(--text-secondary); }
.fy-lane__bar { display: block; width: 100%; height: auto; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.fy-lane__span { fill: var(--chart-ink); cursor: pointer; }
.fy-lane__span--check { fill: var(--surface-raised); stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 4 2; opacity: 1; }
.fy-lane__mark { fill: var(--chart-ink); cursor: pointer; }
.fy-lane__mark--check { fill: var(--surface-raised); stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.fy-chart__dot, .fy-lane__span, .fy-lane__mark { outline: none; }
.fy-chart__dot:focus-visible, .fy-lane__span:focus-visible, .fy-lane__mark:focus-visible { stroke: var(--text-primary); stroke-width: 3; }
.fy-day { border-top: 4px solid var(--accent-primary); }
.fy-day h3 { margin: 0; }
.fy-day__group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.fy-day__out { color: var(--status-critical-fg); font-weight: 600; }
.fy-reading--home { color: var(--text-secondary); }

/* Today's update for the family. */
.fy-update__item { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-1) 0; cursor: pointer; }
.fy-update__item input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent-primary); }
.fy-update__item--critical { color: var(--status-critical-fg); font-weight: 600; }
.fy-update__text { font-family: inherit; line-height: 1.5; }
.fy-update__warm { padding: var(--space-3); border-radius: var(--radius-md); background: var(--status-caution-bg); }

/* Health v2: tabs, rows with a tiny trend line, a test's page, the care space menu. */
.fy-health-tabs { margin: var(--space-2) 0 var(--space-3); }
.fy-hrows, .fy-section .fy-hrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fy-hrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); text-decoration: none; min-height: var(--touch-min); }
.fy-hrow:hover, .fy-hrow:focus-visible { border-color: var(--accent-primary); }
.fy-hrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fy-hrow__name { font-weight: 600; }
.fy-hrow__line { color: var(--text-secondary); font-size: var(--text-sm); }
.fy-hrow__spark { width: 64px; height: 22px; flex: none; }
.fy-hrow__sparkline { fill: none; stroke-width: 2; stroke: var(--chart-ink); }
.fy-hrow__value { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fy-hrow__chev { color: var(--text-secondary); }
.fy-tone--low, .fy-tone--high { color: var(--status-critical-fg); stroke: var(--status-critical-fg); }
.fy-tone--ok { color: var(--status-calm-fg); stroke: var(--status-calm-fg); }
.fy-tone--check { color: var(--status-caution-fg); stroke: var(--status-caution-fg); }
.fy-pill { display: inline-block; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-sm); padding: 2px var(--space-2); }
.fy-pill--low, .fy-pill--high { background: var(--status-critical-bg); color: var(--status-critical-fg); }
.fy-pill--ok { background: var(--status-calm-bg); color: var(--status-calm-fg); }
.fy-pill--check { background: var(--status-caution-bg); color: var(--status-caution-fg); }
.fy-plain { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.fy-test__latest { margin: 0; }
.fy-chart--big { margin-top: var(--space-2); }
.fy-chart__line--dashed { stroke-dasharray: 5 4; }
.fy-chart__line--b { stroke: var(--status-caution-fg); }
.fy-chart__dot--b { fill: var(--status-caution-fg); }
.fy-chart__dot--b.fy-chart__dot--out { fill: var(--status-critical-fg); }
.fy-chart__dot--b.fy-chart__dot--hollow.fy-chart__dot--out, .fy-chart__dot--b.fy-chart__dot--home.fy-chart__dot--out { fill: var(--surface-raised); stroke: var(--status-critical-fg); }
.fy-chart__dot--b.fy-chart__dot--hollow, .fy-chart__dot--b.fy-chart__dot--home { fill: var(--surface-raised); stroke: var(--status-caution-fg); }
.fy-chart__rangelabel { font-size: 10px; fill: var(--text-secondary); }
.fy-chart__axis { display: flex; justify-content: space-between; margin: 0; color: var(--text-secondary); font-size: var(--text-xs); }
.fy-chart__legend { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.fy-chart__key { color: var(--chart-ink); font-weight: 600; }
.fy-chart__key--b { color: var(--status-caution-fg); }
.fy-chart__grid { stroke: var(--border-subtle); stroke-width: 1; }
.fy-chart__tick { font-size: 10px; fill: var(--text-secondary); paint-order: stroke; stroke: var(--surface-raised); stroke-width: 3px; }
.fy-chart__tick--b { fill: var(--status-caution-fg); }
.fy-chart__band--b { fill: var(--status-caution-fg); fill-opacity: 0.12; }
.fy-chart__break { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; }
.fy-chart__farlabel { font-size: 10px; font-weight: 600; fill: var(--status-critical-fg); paint-order: stroke; stroke: var(--surface-raised); stroke-width: 3px; }
.fy-chart__dot.fy-chart__dot--day { stroke: var(--text-primary); stroke-width: 3; }
.fy-chart__title { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--chart-ink); }
.fy-chart__title.fy-chart__key--b { color: var(--status-caution-fg); }
.fy-health-compare { max-width: 20rem; }
.fy-health-search { margin-bottom: var(--space-2); }
.fy-health-foot { margin-top: var(--space-5); }
.fy-fold { border-top: 1px solid var(--border-subtle); padding: var(--space-2) 0; }
.fy-fold > summary { cursor: pointer; font-weight: 600; min-height: var(--touch-min); display: flex; align-items: center; }
.fy-nav__spacewrap { position: relative; }
.fy-nav__space { border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--text-primary);
  padding: var(--space-1) var(--space-3); cursor: pointer; font: inherit; font-weight: 600; min-height: var(--touch-min); }
.fy-spacemenu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20; min-width: 15rem; padding: var(--space-1);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.fy-spacemenu__item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--text-primary);
  font: inherit; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; min-height: var(--touch-min); }
.fy-spacemenu__item:hover, .fy-spacemenu__item:focus-visible { background: var(--surface-sunken); }
.fy-spacemenu__rule { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-1) 0; }

/* The look of 11 Oct: cards, buttons, the corner tools, and a tab bar at the bottom on phones. */
body.fy .ds-card { border-radius: 14px; border-color: var(--border-subtle); }
body.fy .ds-btn { border-radius: var(--radius-md); }
body.fy .ds-btn--primary { color: var(--text-on-inverse); }
body.fy .ds-field__input { border-color: var(--border-strong); }
body.fy .ds-sheet-backdrop { background: rgba(0, 0, 0, 0.5); }
body.fy .fy-nav__space { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-nav__tools { display: flex; gap: var(--space-2); order: 3; }
.fy-nav__links { order: 2; }
.fy-nav__tool { width: var(--touch-min); height: var(--touch-min); border-radius: 50%; border: 1px solid var(--border-default);
  background: var(--surface-raised); color: var(--text-primary); font: inherit; font-size: 1.1rem; cursor: pointer; padding: 0; }
.fy-nav__tool--text { font-weight: 700; }
.fy-nav__tool[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--accent-primary); }
.fy-nav__icon { margin-right: 0.3em; }
@media (max-width: 640px) {
  body.fy { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 4.5rem; }
  body.fy > header#nav { position: sticky; top: 0; z-index: 10; }
  .fy-nav { padding: var(--space-2) var(--space-4); gap: var(--space-2); flex-wrap: nowrap; }
  .fy-nav__brand img { height: 26px; width: auto; }
  .fy-nav__tools { margin-left: auto; }
  .fy-nav__links { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; display: flex; flex-wrap: nowrap; justify-content: space-around;
    background: var(--surface-raised); border-top: 1px solid var(--border-subtle);
    padding: var(--space-1) 0 calc(var(--space-1) + env(safe-area-inset-bottom)); }
  .fy-nav__link { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; min-height: var(--touch-min);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); }
  .fy-nav__link.is-active, .fy-nav__link:hover { background: none; color: var(--text-accent); font-weight: 700; }
  .fy-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* With the keyboard open, the tab bar would cover the form's buttons. */
  body.fy:has(input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus) .fy-nav__links { display: none; }
  .fy-nav__icon { margin: 0; font-size: 1.3rem; line-height: 1; }
  .fy-page { padding-top: var(--space-4); }
}
.fy-greeting { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--surface-selected); }
.fy-greeting strong { color: var(--text-accent); }

/* PROVIDER-INBOX BEGIN: "From the clinic" and "Clinics and sharing" (clinic.html, clinic-links.html).
   Calm on purpose: only existing tokens, no red for results, every tap target at least --touch-min. */
.fy-clinic-updating { min-height: 1.5em; margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.fy-clinic-ask { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 3.25rem; font-size: var(--text-lg); box-sizing: border-box; }
.fy-clinic-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); min-height: var(--touch-min);
  border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-raised); color: var(--text-primary); text-decoration: none; }
.fy-clinic-row:hover, .fy-clinic-row:focus-visible { border-color: var(--accent-primary); }
.fy-clinic-row.is-new { border-left: 5px solid var(--accent-primary); }
.fy-clinic-row--replaced, .fy-clinic-row--removed { background: var(--surface-sunken); }
.fy-clinic-row--replaced .fy-clinic-row__title, .fy-clinic-row--removed .fy-clinic-row__title { font-weight: 500; color: var(--text-secondary); }
.fy-clinic-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fy-clinic-row__title { font-weight: 700; font-size: var(--text-lg); }
.fy-clinic-new { color: var(--text-accent); font-size: var(--text-sm); font-weight: 700; margin-right: var(--space-2); }
.fy-clinic-tag { display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; color: var(--text-secondary); }
.fy-clinic-back { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--text-link); font-weight: 600; text-decoration: none; }
.fy-clinic-block h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.fy-clinic-block h3 { font-size: var(--text-base); margin: 0 0 var(--space-1); color: var(--text-secondary); }
.fy-clinic-block p, .fy-clinic-block ul { margin: 0; }
.fy-clinic-block ul { padding-left: var(--space-5); }
.fy-clinic-block--lead { padding: var(--space-4); border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--border-subtle); font-size: var(--text-lg); line-height: 1.5; }
.fy-clinic-block--lead li + li { margin-top: var(--space-2); }
.fy-clinic-strong { font-weight: 700; }
.fy-clinic-banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-caution-bg); color: var(--text-primary); }
.fy-clinic-banner p { margin: 0 0 var(--space-2); font-weight: 600; }
.fy-clinic-banner--reason, .fy-clinic-banner--removed { background: var(--surface-sunken); }
.fy-clinic-banner--reason p, .fy-clinic-banner--removed { font-weight: 500; margin: 0; }
.fy-clinic-reviewed { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-selected); }
.fy-clinic-reviewed p { margin: 0; }
.fy-clinic-value h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.fy-clinic-value p { margin: 0; font-variant-numeric: tabular-nums; }
.fy-clinic-value p + p { margin-top: var(--space-1); }
.fy-clinic-notice { padding: var(--space-3) var(--space-4); border: 2px solid var(--border-strong); border-radius: var(--radius-md); font-weight: 600; }
.fy-clinic-shared { color: var(--text-secondary); font-size: var(--text-sm); }
.fy-clinic-delete { color: var(--text-secondary); }
.fy-clinic-foot a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--text-link); font-weight: 600; }
.fy-clinic-consent { white-space: pre-wrap; max-height: 50vh; overflow: auto; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.fy-clinic-code { font-size: var(--text-xl); letter-spacing: 0.2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fy-clinic-log { list-style: none; margin: 0; padding: 0; }
.fy-clinic-log li { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.fy-clinic-home { margin: 0 0 var(--space-4); }
.fy-clinic-home a { display: flex; align-items: center; min-height: var(--touch-min); padding: var(--space-3) var(--space-4); border-radius: 14px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-left: 5px solid var(--accent-primary);
  color: var(--text-primary); font-weight: 600; text-decoration: none; }
.fy-clinic-home a:hover, .fy-clinic-home a:focus-visible { border-color: var(--accent-primary); }
/* PROVIDER-INBOX END */

/* PART-B BEGIN: caring together — thanks, rota, handover, needs (rota.html, needs.html, Home cards).
   Theme tokens only, so light and dark both follow body.fy; every tap target at least --touch-min. */
.fy-care-home:empty { display: none; }
.fy-care-home { margin: 0 0 var(--space-4); }
.fy-care-card { border-left: 5px solid var(--accent-primary); }
.fy-care-card p { margin: 0; }
.fy-care-ask { font-weight: 700; color: var(--text-accent); }
.fy-care-label { margin: 0 0 var(--space-1); font-weight: 700; color: var(--text-secondary); font-size: var(--text-sm); }
.fy-care-note { white-space: pre-wrap; }
.fy-care-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fy-care-list label { min-height: var(--touch-min); align-items: flex-start; }
.fy-care-list input[type=checkbox] { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; flex: none; }
.fy-care-todo--late { color: var(--status-critical-fg); background: var(--status-critical-bg); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.fy-care-todo--late .fy-muted { color: var(--status-critical-fg); }
.fy-care-nudge { padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--surface-selected); color: var(--text-primary); }
.fy-care-swap { padding: var(--space-3); border-radius: var(--radius-md); background: var(--status-caution-bg); color: var(--text-primary); }
.fy-care-needs { margin: 0; }
.fy-care-needs a { display: flex; align-items: center; min-height: var(--touch-min); padding: var(--space-3) var(--space-4); border-radius: 14px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--text-primary); font-weight: 600; text-decoration: none; }
.fy-care-needs a:hover, .fy-care-needs a:focus-visible { border-color: var(--accent-primary); }
.fy-care-urgent { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 2px solid var(--status-critical-fg);
  background: var(--status-critical-bg); color: var(--text-primary); }
.fy-care-urgent p { margin: 0 0 var(--space-1); }
.fy-care-urgent p:last-child { margin: 0; }
.fy-thanks__row { gap: var(--space-2); }
.fy-thanks.is-on { color: var(--text-accent); font-weight: 700; }
.fy-thanks__line { min-height: var(--touch-min); padding: 0 var(--space-1); border: 0; background: none; color: var(--text-secondary);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; text-decoration: underline dotted; }
.fy-care-sheet { max-width: 26rem; }
.fy-care-day__name { margin: 0; font-size: var(--text-lg); }
.fy-care-day__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.fy-care-slot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.fy-care-slot p { margin: 0; }
.fy-care-slot--mine { border-color: var(--accent-primary); background: var(--surface-selected); }
.fy-care-slot--past { opacity: 0.75; }
.fy-care-slot__who { font-weight: 600; }
.fy-care-fieldset { margin: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.fy-care-fieldset legend { padding: 0 var(--space-1); font-weight: 700; }
.fy-care-rowedit > .ds-field__input { flex: 1 1 auto; min-width: 0; }
.fy-care-time { max-width: 9rem; flex: none; }
.fy-care-need--done { background: var(--surface-sunken); }
.fy-care-need--done .fy-item__title { color: var(--text-secondary); text-decoration: line-through; }
.fy-care-need p { margin: 0; }
.fy-care-who { font-size: var(--text-sm); font-weight: 600; }
/* PART-B END */

/* HEALTH-POLISH (12 Oct): charts follow the screen; "Find a test" on the Health lists. */
/* The big chart keeps CHART_HEIGHT (pages/health.js) while a turned phone redraws it, so nothing below jumps. */
.fy-chart.fy-chart--big { height: 160px; }
.fy-chart-box, .fy-lanes-box { min-width: 0; }
.fy-chart__axis { gap: var(--space-2); }
.fy-chart__axis span { white-space: nowrap; }
.fy-health-find { margin: 0 0 var(--space-3); }
.fy-health-find .ds-field__label { margin-bottom: var(--space-1); color: var(--text-primary); }
.fy-health-find .fy-health-search { margin-bottom: 0; }
.fy-health-search::placeholder { color: var(--text-secondary); opacity: 1; }
/* A phone held sideways: a test's page uses the whole width for its chart. */
@media (orientation: landscape) and (max-height: 540px) {
  .fy-page.fy-page--chart { max-width: none; }
}
/* HEALTH-POLISH END */

/* HEALTH-AXIS BEGIN: dates under the chart, each under its own time */
.fy-chart__axis--placed { position: relative; display: block; height: 1.5em; }
.fy-chart__axis--placed span { position: absolute; top: 0; white-space: nowrap; }
.fy-chart__axis--placed .fy-chart__tick--mid { transform: translateX(-50%); }
/* HEALTH-AXIS END */
/* UNDERSTAND BEGIN: ❓ What is this?, the answer sheet, About Papa (tokens only) */
.fy-explain { min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text-accent); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.fy-explain:hover, .fy-explain:focus-visible { border-color: var(--accent-primary); }
.fy-terms { flex-wrap: wrap; gap: var(--space-2); }
.fy-hrow-item { display: flex; align-items: center; gap: var(--space-2); }
.fy-hrow-item > .fy-hrow { flex: 1 1 auto; min-width: 0; }
.fy-answer h3 { margin: 0; font-size: var(--text-base); }
.fy-answer__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.fy-answer__links { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.fy-answer__link { font-size: var(--text-sm); }
.fy-answer__doctor { font-weight: 600; }
.fy-about__rows { margin: 0; display: grid; gap: var(--space-2); }
.fy-about__row dt { font-size: var(--text-sm); color: var(--text-secondary); }
.fy-about__row dd { margin: 0; color: var(--text-primary); }
.fy-about__suggestion { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
/* UNDERSTAND END */
/* UNDERSTAND-ASK BEGIN: the ask box and its chips, What we noticed, Suggested, medicine times (tokens only) */
.fy-ask { display: flex; flex-direction: column; gap: var(--space-2); }
.fy-ask__row { flex-wrap: nowrap; gap: var(--space-2); align-items: center; }
.fy-ask__row .ds-field__input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.fy-ask__chips { flex-wrap: wrap; gap: var(--space-2); }
.fy-chip { min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--text-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.fy-chip:hover, .fy-chip:focus-visible { border-color: var(--accent-primary); }
.fy-ask__history { font-size: var(--text-sm); }
.fy-ask__none { margin: 0; }
.fy-ask__turn + .fy-ask__turn { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.fy-noticed__text { margin: 0; color: var(--text-primary); }
.fy-suggested .fy-item__title { margin: 0; }
.fy-times { margin: 0; padding: 0; border: 0; }
.fy-times__time { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); }
.fy-times-ask { align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
/* UNDERSTAND-ASK END */

/* 📄 Make a PDF (spec 2026-10-14 §2.1) */
.fy-pdf { display: flex; flex-direction: column; gap: var(--space-3); }
.fy-pdf__part { margin: var(--space-2) 0 0; font-weight: 700; }
.fy-pdf__tick { align-items: flex-start; gap: var(--space-2); min-height: var(--touch-min); }
.fy-pdf__tick input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }
.fy-pdf__area { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.fy-pdf__area-name { margin: 0 0 var(--space-1); font-weight: 600; color: var(--text-secondary); }
.fy-pdf__papers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.fy-pdf__papers li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fy-pdf__thumb { width: 3rem; height: 3rem; flex: none; display: inline-flex; align-items: center; justify-content: center; object-fit: cover;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.fy-pdf__estimate { margin: 0; font-weight: 600; }
.fy-pdf__ask { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.fy-pdf__ask p { margin: 0; font-weight: 600; }