/*
 * My Health (all six tabs) and Medicines (both tabs) — Apple Health redesign,
 * compact density. The file is named for where it started, the Vitals page.
 * Layout primitives (dash-card, dash-grid, dash-tile, dash-badge, dash-link,
 * dash-alert ...) come from dashboard.css, which this page loads first; only
 * what this page adds lives here, all myh- prefixed. Same contrast rule: text
 * on a tinted or grey surface uses --text-secondary or a *-text token.
 */

/* Condition care target under the opener. */
.myh-target { margin-bottom: 16px; }
.myh-target > .dash-strong { display: flex; align-items: center; gap: 8px; }

/* Latest-reading tiles: four across on a desktop, two on a phone. */
.myh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.myh-tiles .dash-tile { min-height: 132px; min-width: 0; }
/* "Outside the usual range" is wider than a phone-width tile: let the badge
   wrap under the icon instead of overflowing the tile. */
.myh-tiles .dash-tile-top { flex-wrap: wrap; align-items: flex-start; }
.myh-tiles .dash-badge { white-space: normal; }
.myh-badge-in { background: var(--apple-emerald-bg); color: var(--apple-emerald-text); }

/* Card headers on this page put the count / note on the same line. */
.myh-head { margin-bottom: 12px; }
.myh-gap { margin-bottom: 12px; }

/* Trend charts: two per row in the 2/3 column, one on a phone. */
.myh-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* The history table keeps its own .table-wrap / .responsive behaviour; the
   filter bar just needs room under the header. */
#vitals-history .filter-bar { margin-bottom: 12px; }

/* "No conditions / no allergies" declared (FR-PFX-05): a quiet green box. */
.myh-declared {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 16px; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--status-expected-bg); border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--status-expected-mark);
}
.myh-declared-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--status-expected-text); }
.myh-declared-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.myh-declared-form { margin: 0; }
.myh-declared-form .btn { white-space: nowrap; }

/* Published ranges list. */
.myh-range { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * The other five My Health tabs (Conditions, Allergies, Concerns, Procedures,
 * Lifestyle). Their views share one structure - a .mh-metrics row of four
 * stats, then .grid-clinical-split holding the record list and the add form -
 * so the design is applied here, to those shared classes, rather than by
 * rewriting five templates. This file loads only on My Health pages, so these
 * rules reach nothing else.
 * ------------------------------------------------------------------------ */

/* Stat row -> the dashboard's tiles: icon tile on top, name, then the value. */
.mh-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px;
}
.mh-metric {
  flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 116px;
  padding: 12px 14px 14px; border-radius: var(--radius-lg);
  background: var(--apple-card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.mh-metric-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
.mh-metric > div:last-child { display: flex; flex-direction: column-reverse; gap: 2px; margin-top: auto; min-width: 0; }
.mh-metric-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mh-metric-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--text-primary);
}
/* .sm values are words or dates ("3 years", "27 Aug 2026"), not counts. */
.mh-metric-value.sm { font-family: var(--font-sans); font-size: 15px; letter-spacing: -0.2px; }
.mh-metric-value .text-small { font-family: var(--font-sans); font-size: 13px; font-weight: 500; }

/* List + form -> 2/3 + 1/3, stacking on a phone (was a fixed 1.65fr / 1fr grid). */
/* Design parameters (2026-10-17): the same 8/4 split as layout.css - 24px gap,
   20px between 1024px and 1279px, stacked below 1024px. */
.grid-clinical-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.grid-clinical-split > :first-child, .grid-clinical-split > :last-child { min-width: 0; }
@media (max-width: 1279px) { .grid-clinical-split { gap: 20px; } }
@media (max-width: 1023px) { .grid-clinical-split { grid-template-columns: minmax(0, 1fr); } }
.grid-clinical-split > .card {
  padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.grid-clinical-split .card-header h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.grid-clinical-split .filter-bar { margin-bottom: 12px; }
/* Medicines' left column holds several cards inside one wrapper. */
.grid-clinical-split > div > .card {
  padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.grid-clinical-split > div > .card + .card { margin-top: 16px; }

/* ---------------------------------------------------------------------------
 * Medicines (/treatment/medications, /treatment/non-pharma). Same page system;
 * mdx- classes are the pieces only those pages have.
 * ------------------------------------------------------------------------ */
.mdx-banner, .mdx-refill { margin-bottom: 16px; }
.mdx-ix-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mdx-ix {
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--apple-canvas); border: 1px solid var(--card-border);
}
/* Status badges on the patient side (dose status, counts, interaction grade,
   refill window). app.js rewrites className = 'badge <colour>' when a dose is
   logged, so these names are a contract; until now only admin.css styled them. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--apple-slate-bg); color: var(--text-secondary);
}
.badge.green { background: var(--status-expected-bg); color: var(--status-expected-text); }
.badge.amber { background: var(--status-slight-bg); color: var(--status-slight-text); }
.badge.red   { background: var(--status-attention-bg); color: var(--status-attention-text); }
.badge.blue  { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.badge.gray  { background: var(--apple-slate-bg); color: var(--text-secondary); }
.mdx-ix > * + * { margin-top: 2px; }
.mdx-ix-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.mdx-refill { display: flex; align-items: center; gap: 12px; }

/* Today's dose schedule rows. */
.mdx-doses { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mdx-dose {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--apple-canvas); border: 1px solid var(--card-border-subtle);
}
.mdx-dose.is-pending { background: #FFFFFF; border: 1.5px solid var(--apple-blue); }
.mdx-dose-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 220px; }
.mdx-dose-time {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
  background: #FFFFFF; border: 1px solid var(--card-border); font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.mdx-dose-name { overflow-wrap: anywhere; }
.mdx-dose-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mdx-dose-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mdx-dose-actions form { margin: 0; }
/* Outline until it is the recorded state, then filled - the dashboard's colours. */
.mdx-btn-taken { background: #FFFFFF; border-color: rgba(19, 119, 52, 0.35); color: var(--apple-emerald-text); }
.mdx-btn-taken.is-current { background: var(--apple-emerald-text); border-color: var(--apple-emerald-text); color: #FFFFFF; }
.mdx-btn-missed { background: #FFFFFF; border-color: rgba(184, 24, 16, 0.3); color: var(--apple-crimson-text); }
.mdx-btn-missed.is-current { background: var(--apple-crimson-bg); border-color: var(--apple-crimson-text); }
.mdx-btn-skipped { background: #FFFFFF; border-color: var(--control-border); color: var(--text-primary); }
.mdx-btn-skipped.is-current { background: var(--apple-slate-bg); border-color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
 * Health timeline (/timeline). Each month is a card of rows; the base
 * .timeline-event card look (components.css) is flattened into list rows.
 * ------------------------------------------------------------------------ */
.tl-filters { margin-bottom: 0; }
.tl-filters .filter-bar { margin: 0; }
.tl-filters .filter-bar + .filter-bar { margin-top: 8px; }
.tl-filters .filter-btn { text-decoration: none; }
.tl-month { padding: 14px 20px 6px; }
.tl-month.timeline-month { margin-top: 0; }
.tl-month + .tl-month { margin-top: 16px; }
.tl-month-label.timeline-month-label { margin: 0; padding-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.tl-list.timeline-events { gap: 0; }
.tl-event.timeline-event {
  flex-wrap: nowrap; gap: 12px; padding: 12px 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.tl-event + .tl-event { border-top: 1px solid var(--card-border-subtle); }
/* A severe allergy milestone (patch_076): a crimson edge and a worded pill, from
   the stored severity alone. The icon tile stays slate (B10). */
.tl-event.tl-event-severe { box-shadow: inset 4px 0 0 var(--status-attention-mark); padding-left: 14px; }
.tl-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.tl-side-head .dash-h2 { margin: 0; }
.tl-side-alert { margin-bottom: 16px; }
.tl-event .timeline-body { min-width: 0; }
.tl-event .timeline-title { font-size: 14px; }
.tl-event .timeline-summary { font-size: 12px; }
.tl-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tl-meta .timeline-date { width: auto; font-size: 13px; font-weight: 600; }
.tl-count { font-size: 15px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 600px) {
  .tl-event.timeline-event { flex-wrap: wrap; }
  .tl-event .timeline-body { flex: 1 1 calc(100% - 44px); }
  .tl-meta { flex-direction: row; align-items: center; margin-left: 44px; }
}

/* ---------------------------------------------------------------------------
 * Symptom diary (/symptom-diary). Episodes become list rows inside the card;
 * .episode-card-item keeps display:block for app.js's filter, so the row
 * layout is on .sd-episode-row.
 * ------------------------------------------------------------------------ */
.sd-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 14px; color: var(--text-secondary); }
.sd-disclaimer > i { margin-top: 2px; }
.sd-reviews { margin-bottom: 16px; }
.sd-review-list { margin-top: 12px; }
.sd-split .episode-filter-bar { margin-bottom: 4px; }
.sd-episode.episode-card-item {
  margin: 0; padding: 12px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.sd-episode.episode-card-item:hover { box-shadow: none; }
.sd-episode + .sd-episode { border-top: 1px solid var(--card-border-subtle); }
.sd-episode-row { display: flex; align-items: flex-start; gap: 12px; }
.sd-episode-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 4px; }
.sd-episode-name { font-size: 15px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.sd-episode-name:hover { color: var(--apple-blue-text); text-decoration: underline; }
.sd-episode .dash-muted + .dash-muted { margin-top: 2px; }
.sd-episode-actions { margin-top: 10px; }

/* "I take no regular medicines" recorded. */
.mdx-declared {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--apple-emerald-bg);
}
.mdx-declared-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 600;
  color: var(--apple-emerald-text);
}

/* ---------------------------------------------------------------------------
 * Calculators (/calculators). Everything is scoped to the cx- classes the view
 * adds, so the shared .calc-* rules that /predictors also uses are untouched.
 * ------------------------------------------------------------------------ */
.cx-metric-text { font-family: var(--font-sans); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.cx-toolbar { margin-bottom: 16px; }
.cx-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.cx-grid .calc-card { padding: 16px; }
.cx-head { align-items: flex-start; justify-content: flex-start; gap: 10px; margin-bottom: 14px; }
.cx-head-text { min-width: 0; }
.cx-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.cx-head .sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; }
.cx-grid .form-group { margin-bottom: 12px; }
.cx-grid .calc-result {
  margin: 2px 0 10px; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: var(--apple-canvas);
}
.cx-grid .calc-result-value { font-size: 24px; }
.cx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.cx-save { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.cx-save input { width: 18px; height: 18px; margin: 0; accent-color: var(--apple-blue); }
.cx-saved { margin-top: 16px; }

/* ---------------------------------------------------------------------------
 * Predictors hub (/predictors). The cards keep .pred-card-hub for its column
 * layout (button at the foot); dash-card supplies the surface. The disclaimer
 * keeps .pred-disclaimer and is restyled neutral here, as on the symptom diary.
 * ------------------------------------------------------------------------ */
.prx-recommended { margin-bottom: 16px; }
.prx-recommended .dash-strong { display: flex; align-items: center; gap: 8px; }
.prx-tiles { margin-bottom: 0; }
.prx-tile-text { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.prx-tile-date { font-size: 20px; }
.prx-badge-none { background: var(--apple-slate-bg); color: var(--text-secondary); }
.prx-cards.pred-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 0; }
.prx-card.pred-card-hub { padding: 20px; gap: 14px; }
/* Same order as a tile: icon and status on the top row, the title below at
   full width (beside the badge it wrapped to four lines in a half column). */
.prx-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.prx-card-head .dash-badge { order: 2; margin-left: auto; }
.prx-card-title { order: 3; flex: 0 0 100%; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.prx-blurb { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.prx-facts { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--apple-canvas); font-size: 13px; }
.prx-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.prx-facts > div + div { margin-top: 6px; }
.prx-facts dt { color: var(--text-secondary); }
.prx-facts dd { margin: 0; font-weight: 600; color: var(--text-primary); text-align: right; }
.prx-last { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid var(--card-border-subtle); }
.prx-last strong { font-size: 17px; color: var(--text-primary); }
.prx-cta { width: 100%; justify-content: center; text-align: center; }
.prx-future-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 4px; }
.prx-future li { align-items: flex-start; }
.prx-empty { margin-top: 10px; }
.pred-disclaimer.prx-disclaimer {
  margin: 0; gap: 10px; border: 0; background: var(--apple-canvas); color: var(--text-secondary); font-size: 13px;
}
.pred-disclaimer.prx-disclaimer i { color: var(--text-secondary); font-size: 15px; }
.prx-disclaimer strong { color: var(--text-primary); }

/* ---------------------------------------------------------------------------
 * Predictor tools (/predictors/findrisc, /cvd, /metabolic) and /history.
 * The live badges (#frLiveBadge, #cvdLiveBadge) get their whole className
 * rewritten by predictors.js, so they are styled through .prx-result-head.
 * ------------------------------------------------------------------------ */
.prx-back { margin-block: -12px 2px; }
/* pfx_dual_name fixes the plain name at 17px; on a page title it takes the
   title's size, and on a hub card the compact 15px card title. */
.prx-title .pfx-dual-friendly { font-size: inherit; font-weight: inherit; line-height: inherit; }
.prx-title .pfx-dual-clinical { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.prx-card-title .pfx-dual-friendly { font-size: 15px; font-weight: 600; }
.prx-card-title .pfx-dual-clinical { font-size: 12px; }
.prx-age-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; color: var(--apple-amber-text); }
.prx-age-note > i { margin-top: 3px; }
.prx-age-note .dash-panel-text { margin: 0; }
.prx-tool { margin-top: 0; }

/* Questions. */
.prx-form .form-group.prx-q { margin-bottom: 16px; }
fieldset.prx-q { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.prx-q-label { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.prx-legend-plain { font-weight: 500; color: var(--text-secondary); }
.prx-q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.prx-q-head .prx-q-label { margin-bottom: 6px; }
.prx-from-record {
  margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--apple-blue-subtle); color: var(--apple-blue-text); font-size: 11px; font-weight: 600;
}
.prx-q-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.prx-input-unit { display: flex; align-items: center; gap: 8px; }
.prx-input-unit > span { flex: none; font-size: 13px; color: var(--text-secondary); }
.prx-unit-select { flex: 0 0 auto; max-width: 112px; }
.prx-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 16px; }
.prx-choices { display: flex; flex-wrap: wrap; gap: 0 20px; }
.prx-choices-stack { flex-direction: column; }
.prx-choice { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text-primary); cursor: pointer; }
.prx-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--apple-blue); }
.prx-form-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--card-border-subtle); }
.prx-gap { margin-bottom: 12px; }

/* Live result. */
.prx-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; }
.prx-result-head .pill { font-size: 12px; font-weight: 600; }
.prx-big-wrap { padding: 4px 0 8px; text-align: center; }
.prx-big { margin-top: 2px; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.8px; color: var(--text-primary); }
.prx-score { margin-top: 2px; font-size: 24px; font-weight: 700; color: var(--text-primary); }
.prx-big-wrap .pfx-dual-clinical { display: block; margin-top: 4px; }
.prx-meter { margin: 14px 0 6px; }
.prx-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-bottom: 12px; font-size: 11.5px; color: var(--text-secondary); }
.prx-interp { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--apple-canvas); font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.prx-compare.pop-comparison-box { margin: 8px 0 0; padding: 12px 14px; }
.prx-compare-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; font-weight: 600; }
.prx-compare-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.prx-compare-key > span { display: inline-flex; align-items: center; gap: 6px; }
.prx-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.prx-swatch.is-you { background: var(--apple-blue); }
.prx-swatch.is-ref { background: #64748B; }
.prx-recs { margin: 0; }
.prx-recs .pred-rec-item { font-size: 13.5px; }
.prx-recs .pred-rec-item > i { margin-top: 3px; color: var(--apple-blue-text); }

/* Metabolic result. */
.prx-count { margin: 0 0 4px; font-size: 17px; font-weight: 650; color: var(--text-primary); }
.prx-count .dash-muted { display: inline; font-size: 14px; font-weight: 500; }
.prx-warn { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--apple-amber-text); }
.prx-warn > i { margin-top: 3px; }
.prx-criteria { margin: 0; padding: 0; list-style: none; }
.prx-criteria li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--card-border-subtle); }
.prx-criteria .pill { flex: none; }
.prx-criterion-text { flex: 1 1 180px; min-width: 0; }
.prx-criterion-text .dash-muted { display: block; margin-top: 2px; }
.prx-save { margin-top: 12px; }

/* History. */
.prx-filters { margin-bottom: 16px; }
.prx-table th { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.prx-table td { vertical-align: middle; font-size: 14px; }
.prx-nowrap { white-space: nowrap; }
.prx-check { font-weight: 600; color: var(--text-primary); }
.prx-pct { font-weight: 600; color: var(--text-primary); }
.prx-basis { min-width: 220px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.prx-row-action { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * Record edit pages (medicine and non-drug treatment so far). Generic rec-edit-
 * names so the other *_edit views can take the same shape: the correction
 * form in the 2/3 column, Stop / Remove in the 1/3 column. The shared
 * record_delete_card component renders a .card with mt-16; inside the side
 * column it is restyled here rather than changed for all seven callers.
 * ------------------------------------------------------------------------ */
.rec-edit-back { margin-block: -12px 2px; }
.rec-edit { margin-top: 0; }
.rec-edit-badge-on { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.rec-edit-badge-off { background: var(--apple-slate-bg); color: var(--text-secondary); }
.rec-edit .myh-head .dash-sub { margin-top: 4px; }
.rec-edit-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 16px; }
.rec-edit-fieldset { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.rec-edit-fieldset > legend { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rec-edit-choices { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 8px; }
.rec-edit-choice { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.rec-edit-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--apple-blue); }
.rec-edit-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--card-border-subtle); }
.rec-edit-note { margin: 6px 0 12px; }
.rec-edit-danger-icon { color: var(--apple-crimson-text); }
.rec-edit-side .dash-card .form-group { margin-bottom: 12px; }
.rec-edit-side > .card { margin-top: 0; padding: 16px; }
.rec-edit-side > .card .card-header { margin-bottom: 6px; }
.rec-edit-side > .card .card-header h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.rec-edit-side > .card .hint { margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
 * Health & Lifestyle (/for-you) and its articles (/for-you/article).
 * The article body is attested clinical content: only how it is set changes.
 * ------------------------------------------------------------------------ */
.edu-not-advice { display: flex; align-items: center; gap: 6px; margin: -6px 0 16px; }
.edu-badge-condition { background: var(--apple-teal-bg); color: var(--apple-teal-text); }
.edu-badge-general { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.edu-badge-hub, .edu-badge-pillar { background: var(--apple-slate-bg); color: var(--text-secondary); }

.edu-filters { margin-bottom: 0; }
.edu-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.edu-search-field { position: relative; flex: 1 1 240px; min-width: 0; }
.edu-search-field > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-secondary); pointer-events: none; }
.edu-search-field .form-control { width: 100%; padding-left: 34px; }
.edu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.edu-chips a.pill {
  padding: 4px 12px; border: 1px solid var(--card-border); background: #FFFFFF; color: var(--text-primary);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.edu-chips a.pill:hover { border-color: rgba(0, 0, 0, 0.25); }
.edu-chips a.pill.primary { border-color: var(--apple-blue); background: var(--apple-blue); color: #FFFFFF; font-weight: 600; }

.edu-section-head { align-items: center; margin-bottom: 12px; }
.edu-section-head .dash-h2 { display: flex; align-items: center; gap: 8px; }
.edu-layout .dash-main > section + section { margin-top: 8px; }
.edu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.edu-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; }
.edu-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.edu-card-meta .dash-muted { margin-left: auto; }
.edu-card-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; }
.edu-card-title a { color: var(--text-primary); text-decoration: none; }
.edu-card-title a:hover { color: var(--apple-blue-text); text-decoration: underline; }
.edu-card-summary { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.edu-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--card-border-subtle); }

.edu-topics > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.edu-topics > summary::-webkit-details-marker { display: none; }
.edu-topics > summary .dash-h3 { flex: 1; min-width: 0; }
.edu-topics-caret { font-size: 11px; color: var(--text-secondary); transition: transform 0.15s ease; }
.edu-topics[open] .edu-topics-caret { transform: rotate(180deg); }
.edu-topics-sub { margin: 0 0 8px; }
.edu-topics-intro { margin: 8px 0 10px; padding-top: 10px; border-top: 1px solid var(--card-border-subtle); }
.edu-topic-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.edu-topic {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-full); background: #FFFFFF;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.edu-topic input { width: 16px; height: 16px; margin: 0; accent-color: var(--apple-blue); }
.edu-topic:has(input:checked) { border-color: var(--apple-blue); background: var(--apple-blue-subtle); color: var(--apple-blue-text); font-weight: 600; }

/* Article. */
.edu-article-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 32px; }
.edu-article-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.edu-article { padding: 24px 28px; }
.edu-article .edu-card-meta { margin-bottom: 10px; }
.edu-article-title { margin: 0 0 14px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.5px; color: var(--text-primary); }
.edu-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 20px; padding: 10px 0;
  border-block: 1px solid var(--card-border-subtle); font-size: 12.5px; color: var(--text-secondary);
}
.edu-byline strong { color: var(--text-primary); font-weight: 600; }
.edu-summary { margin-bottom: 24px; }
.edu-summary .dash-strong { display: flex; align-items: center; gap: 8px; }
.edu-body { font-size: 15px; line-height: 1.65; color: var(--text-primary); }
.edu-body h2 { margin: 28px 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.edu-body h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; }
.edu-body p { margin: 0 0 14px; }
.edu-body ul { margin: 8px 0 16px 20px; padding: 0; }
.edu-body li { margin-bottom: 6px; }
.edu-practice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 28px; }
.edu-practice > div > * + * { margin-top: 2px; }
.edu-article-disclaimer { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--card-border-subtle); font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 600px) {
  .edu-article { padding: 18px 16px; }
  .edu-article-title { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
 * Account & Settings (/settings). app.js shows one .settings-section at a time
 * and toggles .active on the tabs and .inactive-item on shortcut rows; the
 * look of each state lives here, not in inline styles the script writes.
 * ------------------------------------------------------------------------ */
.set-metric { color: inherit; text-decoration: none; }
.set-metric:hover { box-shadow: var(--card-shadow-hover); }
.set-metric-text { font-family: var(--font-sans); }
.set-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; overflow-x: auto;
  border-radius: var(--radius-full); background: #E9E9EE; scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs .settings-tab-btn {
  flex: 1 0 auto; justify-content: center; gap: 6px; padding: 0 14px; border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.set-tabs .settings-tab-btn:hover { color: var(--text-primary); }
.set-tabs .settings-tab-btn.active { background: #FFFFFF; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.set-tabs .settings-tab-btn.active i { color: var(--apple-blue-text); }
.settings-section + .settings-section { margin-top: 16px; }

.set-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.set-head .dash-sub { margin-top: 4px; }
.set-badge-on { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.set-badge-off { background: var(--apple-slate-bg); color: var(--text-secondary); }
.set-gap { margin-bottom: 14px; }
.set-gap > .dash-muted, .set-gap > .dash-panel-text { margin-top: 4px; }
.set-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.set-suggestions .dash-badge { white-space: normal; }

.set-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.set-counter { font-size: 12px; font-weight: 600; color: var(--apple-blue-text); }
.set-qa-list { display: flex; flex-direction: column; gap: 6px; }
.set-qa-list .qa-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF;
}
.set-qa-list .qa-item.inactive-item { border-style: dashed; background: var(--apple-canvas); }
.set-qa-list .qa-item.inactive-item .dash-icon-tile { background: var(--apple-slate-bg); color: var(--text-secondary); }
.qa-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qa-main .qa-checkbox { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--apple-blue); cursor: pointer; }
.qa-text { min-width: 0; }
.qa-text label { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.set-qa-list .qa-item .qa-text label[for] { min-height: 0; }
.qa-text .dash-muted { display: block; overflow-wrap: anywhere; }
.qa-text code { font-size: 11px; }
.qa-move { display: flex; flex: none; gap: 2px; }
.btn-reorder {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary);
}
.btn-reorder:hover { background: var(--apple-canvas); color: var(--text-primary); }
.set-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border-subtle); }
.set-reset { margin-top: 8px; }

.set-rows { display: flex; flex-direction: column; gap: 8px; }
.setting-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--apple-canvas); cursor: pointer;
}
.setting-row > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--apple-blue); }
.setting-row strong { display: block; font-size: 14px; color: var(--text-primary); }
.setting-row .dash-muted { display: block; margin-top: 2px; }
.setting-row.is-disabled { cursor: default; opacity: 0.8; }
.set-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

.set-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.set-provider {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF;
}
.set-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.set-provider-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.set-provider-text { margin: 0; }
.set-inline-form { margin: 0; }
.set-unlink { color: var(--apple-crimson-text); }
.set-manual { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.set-manual > i { margin-top: 2px; }

/* ---------------------------------------------------------------------------
 * Plan & Billing (/subscription, /subscription/checkout). Moved here from the
 * inline style block in tiers.php. The yearly/monthly switch is pure CSS: two
 * radios, then .pricing-toggle-wrap and .pricing-cards-container as later
 * siblings. Tier accents are colour only, never a result band.
 * ------------------------------------------------------------------------ */
.pricing-toggle-radio {
  /* Visually hidden but keyboard-focusable (arrow keys switch the cycle). */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pricing-toggle-wrap {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px;
  margin: 24px 0 14px;
}
.pricing-toggle-wrap .dash-sub { max-width: 620px; margin-top: 4px; }
.pricing-toggle-box { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: #E9E9EE; }
.pricing-toggle-label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
#cycle_annual:checked ~ .pricing-toggle-wrap label[for="cycle_annual"],
#cycle_monthly:checked ~ .pricing-toggle-wrap label[for="cycle_monthly"] {
  background: #FFFFFF; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
#cycle_annual:focus-visible ~ .pricing-toggle-wrap label[for="cycle_annual"],
#cycle_monthly:focus-visible ~ .pricing-toggle-wrap label[for="cycle_monthly"] {
  outline: 2px solid var(--focus, #0071E3); outline-offset: 2px;
}
#cycle_annual:checked ~ .pricing-cards-container .price-monthly { display: none !important; }
#cycle_annual:checked ~ .pricing-cards-container .price-yearly { display: block !important; }
#cycle_monthly:checked ~ .pricing-cards-container .price-monthly { display: block !important; }
#cycle_monthly:checked ~ .pricing-cards-container .price-yearly { display: none !important; }
.sub-save { padding: 2px 8px; border-radius: var(--radius-full); background: var(--apple-blue-subtle); color: var(--apple-blue-text); font-size: 11px; font-weight: 700; }

.sub-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.sub-banner .dash-panel-text { margin: 0; }
.sub-metric-text { font-family: var(--font-sans); font-size: 17px; line-height: 1.25; }
.sub-metric-unit { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.sub-storage-body { width: 100%; }
.sub-meter { height: 6px; margin-top: 8px; border-radius: var(--radius-full); background: #E5E5EA; overflow: hidden; }
.sub-meter > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--apple-blue); }
.sub-meter > span.is-near { background: var(--apple-amber); }
.sub-meter > span.is-full { background: var(--apple-crimson); }

.pricing-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; align-items: stretch; margin-bottom: 24px; }
.tier-card-pro {
  --tier-accent: var(--text-secondary);
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--apple-card); box-shadow: var(--card-shadow);
}
.tier-myhealth { --tier-accent: var(--apple-blue-text); }
.tier-plus { --tier-accent: var(--apple-indigo-text); }
.tier-concierge { --tier-accent: var(--apple-purple-text); }
.tier-card-popular { border: 2px solid var(--tier-accent); }
.badge-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: var(--radius-full);
  background: var(--tier-accent); color: #FFFFFF; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.sub-tier-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.tier-card-popular .sub-tier-top { margin-top: 4px; }
.sub-tier-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tier-accent); }
.sub-tier-name { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); }
.sub-tier-blurb { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.sub-tier-price { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--card-border-subtle); }
.sub-price { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); }
.sub-price-per { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }
.sub-price-note { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.sub-price-save { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--apple-blue-text); }
.sub-features { margin: 0; padding: 0; list-style: none; }
.sub-features li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.45; color: var(--text-primary); }
.sub-features li > i { flex: none; margin-top: 2px; color: var(--tier-accent); }
.tier-free .sub-features li > i { color: var(--apple-blue-text); }
.sub-features li.is-off, .sub-features li.is-includes { color: var(--text-secondary); }
.sub-features li.is-off > i { color: #C7C7CC; }
.sub-cta-form { margin: 0; }
.sub-cta-btn { width: 100%; justify-content: center; }
.sub-cta-note { margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); }
.sub-cta-note.is-current { font-weight: 600; color: var(--apple-blue-text); }
.sub-cta-cancel { color: var(--apple-crimson-text); }

.sub-passes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: 16px; }
.sub-passes-intro { flex: 1 1 360px; min-width: 0; }
.sub-passes-intro .dash-label { display: flex; align-items: center; gap: 6px; color: var(--apple-purple-text); }
.sub-passes-intro .dash-sub { margin-top: 4px; }
.sub-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-secondary); }
.sub-steps li { display: inline-flex; align-items: center; gap: 6px; }
.sub-steps i { color: var(--apple-purple-text); }
.sub-pass-options { display: flex; flex-wrap: wrap; gap: 12px; }
.sub-pass { min-width: 190px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--apple-canvas); }
.sub-pass .dash-muted { margin: 0 0 8px; }
.sub-pass .btn { width: 100%; justify-content: center; }
.sub-pass-price { margin: 2px 0; font-size: 20px; font-weight: 700; color: var(--text-primary); }

.sub-table-card { margin-bottom: 16px; padding: 0; overflow: hidden; }
.sub-table-head { padding: 16px 20px; border-bottom: 1px solid var(--card-border-subtle); }
.sub-table-head .dash-muted { margin-top: 2px; }
.sub-table { margin: 0; font-size: 13px; }
.sub-table th, .sub-table td { padding: 10px 14px; vertical-align: middle; }
.sub-table thead th { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.sub-table thead th.tier-myhealth, .sub-table thead th.tier-plus, .sub-table thead th.tier-concierge { color: var(--tier-accent); }
.sub-table tbody th { font-weight: 600; color: var(--text-primary); text-align: left; }
.sub-table td i { margin-right: 4px; color: var(--apple-blue-text); }
.sub-table td[class*="tier-"] i { color: var(--tier-accent); }
.sub-table td.is-strong { font-weight: 600; color: var(--tier-accent); }
.sub-table td.is-none { color: var(--text-secondary); }

.sub-checkout { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.sub-back { align-self: flex-start; margin-block: -12px -4px; }
.sub-checkout-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sub-checkout-tier { margin-top: 2px; }
.sub-checkout-amount { text-align: right; }
.sub-checkout-amount .dash-badge { margin-top: 6px; }
.sub-checkout-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0 0; font-size: 13px; }
.sub-checkout-facts dt { font-weight: 600; color: var(--text-secondary); }
.sub-checkout-facts dd { margin: 0; color: var(--text-primary); }
.sub-checkout-para { margin: 4px 0 14px; }
.sub-checkout .dash-panel-text { margin: 0; }

/* ---------------------------------------------------------------------------
 * Snap and Digitize (/concierge, /concierge/upload). Reuses the plans page
 * meter (.sub-meter) and table card (.sub-table-card, .sub-table).
 * ------------------------------------------------------------------------ */
.cq-flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.cq-flash > i { margin-top: 3px; }
.cq-flash .dash-panel-text { margin: 0; }
.cq-metric-unit { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.cq-grid { margin-top: 0; margin-bottom: 16px; }
.cq-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
.cq-head .dash-h2 { margin-top: 8px; }
.cq-head .dash-sub { margin-top: 4px; }
.cq-tier { text-transform: uppercase; letter-spacing: 0.04em; }
.cq-meter { margin: 16px 0 8px; height: 8px; }
.cq-meter-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); }
.cq-how-title { margin-bottom: 12px; }
.cq-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cq-steps li { display: flex; align-items: flex-start; gap: 12px; }
.cq-steps .dash-muted { margin-top: 2px; }
.cq-step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--radius-full); background: var(--apple-blue-subtle); color: var(--apple-blue-text); font-weight: 700;
}
.cq-gap { margin: 8px 0 12px; }
.cq-full { width: 100%; justify-content: center; }

.cq-requests-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cq-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.cq-empty .dash-muted { max-width: 440px; margin: 0 0 8px; }
.cq-table td { vertical-align: top; }
.cq-table .dash-strong, .cq-table .dash-muted { margin: 0; }
.cq-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cq-type .dash-icon-tile { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.cq-type + .dash-badge { margin-top: 6px; }
.cq-badge-progress { background: var(--apple-indigo-bg); color: var(--apple-indigo-text); }
.cq-records { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cq-note { max-width: 240px; }
.cq-nowrap { white-space: nowrap; }
.cq-th-action, .cq-actions { text-align: right; white-space: nowrap; }
.cq-inline-form { display: inline-block; margin: 0 0 0 4px; }
.cq-cancel { color: var(--apple-crimson-text); }

.cq-card-title { margin-bottom: 14px; }
.cq-fieldset { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
/* Match .form-group label, and keep that rule (one class + one element) from
   overriding the choice cards, which are labels inside a .form-group too. */
.cq-fieldset > legend { display: block; margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.cq-fieldset label.cq-choice, .cq-fieldset label.cq-option { display: flex; margin: 0; font-size: 14px; font-weight: 400; color: var(--text-primary); }
.cq-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.cq-choice, .cq-option {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF;
}
.cq-choice input, .cq-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--apple-blue); }
.cq-choice:has(input:checked), .cq-option:has(input:checked) { border-color: var(--apple-blue); background: var(--apple-blue-subtle); }
.cq-choice-title { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cq-choice .dash-muted, .cq-option .dash-muted { display: block; }
.cq-options { display: flex; flex-direction: column; gap: 8px; }

.cq-file-input { display: none; }
.cq-drop {
  padding: 28px 20px; border: 2px dashed var(--apple-blue); border-radius: var(--radius-lg);
  background: var(--apple-canvas); text-align: center; cursor: pointer; transition: background 0.15s ease;
}
.cq-drop:hover, .cq-drop.is-dragover { background: var(--apple-blue-subtle); }
.cq-drop:focus-visible { outline: 3px solid var(--focus, #0071E3); outline-offset: 3px; }
.cq-drop-icon { display: inline-flex; margin-bottom: 8px; font-size: 32px; color: var(--apple-blue-text); }
.cq-drop-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.cq-drop-text { max-width: 380px; margin: 0 auto 12px; }
.cq-drop-btn { pointer-events: none; }
.cq-drop-limits { margin: 10px 0 0; }
.cq-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
.cq-previews:empty { display: none; }
.cq-notes { margin-top: 16px; }
.cq-submit { width: 100%; justify-content: center; min-height: 48px; font-size: 15px; }

.cq-tips { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.cq-tips li + li { margin-top: 4px; }
.cq-side-text { margin-top: 6px; }

/* ---------------------------------------------------------------------------
 * Health Packs (/health-packs, /health-packs/view). Cards reuse the education
 * card pieces (.edu-card, .edu-card-title, .edu-card-summary, .edu-card-foot)
 * and the filter chips (.edu-chips).
 * ------------------------------------------------------------------------ */
.hpk-filters { margin-bottom: 16px; }
.hpk-section + .hpk-section { margin-top: 24px; }
.hpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.hpk-card.is-on { border-color: var(--apple-blue); }
.hpk-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.hpk-card-name { flex: 1; min-width: 0; }
.hpk-card-name .edu-card-title { margin: 0; }
.hpk-card-name .dash-muted { display: block; margin-top: 2px; }
.hpk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; }
.hpk-meta i { margin-right: 4px; }
.hpk-why { margin: 10px 0 0; padding: 8px 10px; font-size: 12.5px; color: var(--text-secondary); }
.hpk-why strong { color: var(--text-primary); }
.hpk-inline-form { margin: 0; }
.hpk-on { font-weight: 600; color: var(--apple-blue-text); }

.hpk-opener { align-items: flex-start; }
.hpk-hero { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 420px; }
.hpk-hero-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; }
.hpk-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hpk-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hpk-off { color: var(--apple-crimson-text); }
.hpk-note { margin-bottom: 16px; }
.hpk-note .dash-muted { margin-top: 4px; }
.hpk-layout { margin-top: 0; }
.hpk-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.hpk-key i { margin-right: 4px; }
.hpk-parts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hpk-part {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 12px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF;
}
.hpk-part.is-locked { background: var(--apple-canvas); }
.hpk-part-text { flex: 1 1 260px; min-width: 0; }
.hpk-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.hpk-part-head strong { font-size: 14px; color: var(--text-primary); }
.hpk-part-text > .dash-muted { margin: 0; }
.hpk-part-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hpk-locked { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.hpk-toggle { min-width: 72px; justify-content: center; border: 1px solid var(--card-border); background: #FFFFFF; color: var(--text-secondary); }
.hpk-toggle.is-on { border-color: var(--apple-blue); background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.hpk-desc { margin: 6px 0 10px; line-height: 1.55; }
.hpk-byline { margin: 0; padding-top: 10px; border-top: 1px solid var(--card-border-subtle); }
.hpk-triggers { display: flex; flex-wrap: wrap; gap: 6px; }
.hpk-triggers .dash-badge { white-space: normal; }
@media (max-width: 760px) {
  .hpk-actions { align-items: flex-start; }
}

/* Record edit pages: intro line under the form heading, and the allergy caution. */
.rec-edit-intro { margin: 4px 0 14px; }
.rec-edit-warn { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--apple-amber-text); }
.rec-edit-warn > i { margin-top: 3px; }

/* Records hub (/records): five record areas as design cards. */
.rec-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.rec-hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rec-hub-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.rec-hub-head .dash-h2 { flex: 1; min-width: 0; font-size: 17px; }
.rec-hub-updated { margin: 0; }
.rec-hub-open { margin-top: 8px; }
.rec-hub-foot { margin-top: 16px; }

/* ---------------------------------------------------------------------------
 * Symptom diary inner pages: an episode, the diary Doctor View (.sd-ep), the
 * classification step and the entry edit (.sd-narrow). The shared
 * entry_fields partial keeps its own markup.
 * ------------------------------------------------------------------------ */
.sd-ep > .dash-card + .dash-card, .sd-ep > .dash-card + .sd-ep-pair, .sd-ep > .mh-metrics + .dash-card { margin-top: 16px; }
.sd-ep .card-header { margin-bottom: 12px; }
.sd-ep .card-header h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.sd-ep .card-header .sub { font-size: 12.5px; }
.sd-ep-status { align-self: center; }
.sd-ep-note { margin-bottom: 16px; }
.sd-ep-note .text-small { margin-top: 4px; }
.sd-ep-grid { margin: 0 0 16px; }
.sd-ep-entries { margin-bottom: 16px; }
.sd-ep-entry { padding: 16px 0; border-top: 1px solid var(--card-border-subtle); scroll-margin-top: 20px; }
.sd-ep-entry:first-of-type { border-top: 0; padding-top: 4px; }
.sd-ep-outcome { padding: 12px 0; border-top: 1px solid var(--card-border-subtle); }
.sd-ep-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.sd-ep-check {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 6px; padding: 8px 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF; cursor: pointer;
}
.sd-ep-check:has(input:checked) { border-color: var(--apple-blue); background: var(--apple-blue-subtle); }
.sd-ep-check input { accent-color: var(--apple-blue); }
.sd-ep-links { margin-bottom: 16px; }
.sd-ep-links > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.sd-ep-remove-toggle { display: flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--apple-crimson-text); }
.sd-ep-remove { color: var(--apple-crimson-text); }
.sd-metric-text { font-family: var(--font-sans); font-size: 17px; }
.sd-dv-alerts { border-color: var(--apple-crimson-bg); }

.sd-narrow { max-width: 820px; margin: 0 auto; }
.sd-gap { margin: 0 0 14px; }
.sd-legend { display: block; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sd-choice {
  display: flex; align-items: flex-start; gap: 12px; min-height: 60px; margin-bottom: 8px; padding: 12px 14px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #FFFFFF; cursor: pointer;
}
.sd-choice.is-dashed { border-style: dashed; }
.sd-choice input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--apple-blue); }
.sd-choice:has(input:checked) { border-color: var(--apple-blue); border-style: solid; background: var(--apple-blue-subtle); }
.sd-narrow fieldset { min-width: 0; margin-inline: 0; padding: 0; border: 0; }

/* ---------------------------------------------------------------------------
 * Alerts and advice (/decision-support) and the assistant (/decision-support/ask).
 * Alert level colours stay: these are stored alert rows (spec 1.2.6).
 * ------------------------------------------------------------------------ */
.ds-refill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.ds-refill .dash-muted { margin-top: 2px; }
.ds-refill-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ds-segment { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: #E9E9EE; min-width: 0; }
.ds-seg-btn {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ds-seg-btn:hover { color: var(--text-primary); }
.ds-seg-btn.is-on { background: #FFFFFF; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.ds-alerts, .ds-supply { margin-bottom: 16px; }
.ds-dot { display: inline-block; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; }
.ds-dot.is-red { background: var(--apple-crimson); }
.ds-dot.is-amber { background: var(--apple-amber); }
.ds-alert-list { display: flex; flex-direction: column; gap: 10px; }
.ds-alert {
  padding: 14px 16px; border: 1px solid var(--card-border); border-left-width: 4px; border-radius: var(--radius-md); background: #FFFFFF;
}
.ds-alert.is-red { border-left-color: var(--apple-crimson); }
.ds-alert.is-amber { border-left-color: var(--apple-amber); }
.ds-alert.is-green { border-left-color: var(--apple-emerald); }
.ds-alert-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ds-alert-source { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ds-alert-message { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-primary); }
.ds-alert-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--card-border-subtle); }
.ds-alert-foot > .dash-muted { margin: 0; }
.ds-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-resolved { font-weight: 600; color: var(--text-primary); }
.ds-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; }
.ds-disclaimer > i { margin-top: 2px; }
.ds-med { flex-direction: column; align-items: stretch; }
.ds-med-days { margin-top: 6px; }
.ds-med-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--card-border-subtle); }

.ds-drawer { margin-bottom: 16px; }
.ds-drawer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ds-context {
  max-height: 220px; margin: 10px 0 0; padding: 12px 14px; overflow-y: auto; white-space: pre-wrap;
  border-radius: var(--radius-md); background: var(--apple-canvas); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-primary);
}
.ds-chat { display: flex; flex-direction: column; height: 620px; margin-bottom: 12px; padding: 0; overflow: hidden; }
.ds-chat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--card-border-subtle); }
.ds-chat-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-live { width: 9px; height: 9px; border-radius: 50%; background: var(--apple-blue); box-shadow: 0 0 0 3px var(--apple-blue-subtle); }
.ds-stream { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; background: #FFFFFF; }
.ds-bubble {
  align-self: flex-start; max-width: 85%; padding: 12px 16px; border-radius: 16px; border-bottom-left-radius: 4px;
  background: var(--apple-canvas); font-size: 14px; line-height: 1.55; color: var(--text-primary);
}
.ds-bubble-title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--apple-blue-text); }
.ds-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--card-border-subtle); font-size: 12px; color: var(--text-secondary); }
.ds-prompts { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; white-space: nowrap; border-top: 1px solid var(--card-border-subtle); background: var(--apple-canvas); }
.ds-prompts .prompt-chip { flex: none; border-radius: var(--radius-full); }
.ds-compose { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--card-border-subtle); }
.ds-compose .form-control { flex: 1; min-width: 0; border-radius: var(--radius-full); }
.ds-send { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.ds-chat-foot { display: flex; justify-content: center; gap: 6px; max-width: 620px; margin: 0 auto; text-align: center; }
@media (max-width: 600px) { .ds-chat { height: 560px; } }

/* Connected Health (/settings/connected-health): sections as design cards on top
   of connected_health.css; status pills are blue (active) or neutral. */
.ch-page .ch-section { margin-bottom: 16px; }
.ch-page .ch-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.ch-page .ch-h-gap { margin-bottom: 12px; }
.ch-page .ch-sub { margin: 0 0 12px; }
.ch-page .ch-sub-top { margin-top: 10px; }
.ch-page .ch-pill-gap { margin-left: 6px; }
.ch-page .ch-icon-ok { margin-top: 3px; color: var(--apple-blue-text); }
.ch-page .dash-opener .dash-greeting i { font-size: 0.8em; color: var(--apple-blue-text); }

/* Help and information (/help, /information): sections as design cards in a grid. */
.info-urgent { margin-bottom: 16px; }
.info-urgent .dash-panel-text { margin: 0; }
.information-page .auth-card + .info-grid { margin-top: 16px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; }
.info-card .dash-h2 { margin: 4px 0 8px; font-size: 17px; }
.info-card p, .info-card li { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.info-card .information-list { margin: 0; padding-left: 18px; }

/* Not found and not-yet-built pages: one centred design card. */
.err-card { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 520px; margin: 48px auto; text-align: center; }
.err-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
.err-card .dash-muted { margin: 0; }
.err-card .btn { margin-top: 8px; }
.err-note { font-size: 12.5px; }

/* REQ-UI-PAT-22 (UI v3.0): flare-up card beside the 30-day severity chart. */
.sd-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
@media (min-width: 64em) { .sd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.sd-top > .dash-card { margin: 0; }
.sd-hero.is-active { border-left: 4px solid #D97706; }
.sd-hero .dash-h2 { font-size: 18px; }
.sd-trend .trend-card { margin-bottom: 0; }