/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT — cards, callouts, rows, meters, timeline, messages, the journey band.
   Containers are SQUARE and shadowless on health; sport rounds controls only.
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
  box-shadow: none;
}
.card-accent { border-left: 4px solid var(--accent); }

/* ── Hero: solid deep brand, white ink, brand rule underneath ── */
.hero-card {
  display: flex;
  gap: 32px;
  padding: 28px 32px;
  background: var(--brand-deep);
  color: #fff;
  border-bottom: 4px solid var(--brand-primary);
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 900px) { .hero-card { flex-direction: column; gap: 18px; padding: 18px 16px; } }

/* ── Callouts: severity is a HEAVY LEFT RULE, never a tinted box ── */
.safety-card {
  background: var(--safety-bg);
  border: 1px solid var(--border);
  border-left: 8px solid var(--warm-fill);
  padding: 14px 16px;
}
.safety-card .card-title { color: var(--warm); }
.team-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--health-aqua);
  padding: 14px 16px;
}

.alert-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 10px;
}
.alert-card.warning { border-left: 8px solid var(--warm-fill); }
.alert-card.danger { border-left: 8px solid var(--red); }
.alert-card.info { border-left: 8px solid var(--brand-primary); }
.alert-icon { width: 20px; height: 20px; flex-shrink: 0; }
.alert-text { font-size: 15px; line-height: 1.5; flex: 1; }
.alert-time { font-size: 13px; font-family: var(--font-mono); color: var(--text-muted); }

/* Auth-page error/info panels share the callout language. */
.error-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--red);
  color: var(--red);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.info-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--brand-primary);
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ── Signal tile: one measured finding ── */
.signal-tile { background: var(--bg-card); border: 1px solid var(--border); padding: 16px; }
.signal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.signal-name { font-size: 16px; font-weight: 600; }
.signal-status { font-size: 14px; font-weight: 700; }
.signal-text { font-size: 15px; line-height: 1.6; margin-top: 6px; }
.signal-numbers {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 8px;
}

/* ── Roster rows: SQUARE avatars, square status chips ── */
.patient-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  background: var(--bg-card);
}
.patient-row:last-child { border-bottom: none; }
.patient-row:hover { background: var(--surface-hover); }
.patient-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #212b32; /* ink on the aqua/accent fill: white failed AA (2.9:1) */
  flex-shrink: 0;
}
.patient-info { flex: 1; min-width: 0; }
.patient-name { font-size: 15px; font-weight: 600; }
.patient-pathway { font-size: 13px; color: var(--text-muted); }
.patient-status { width: 12px; height: 12px; flex-shrink: 0; }
.status-green { background: var(--green); }
.status-amber { background: var(--warm-fill); }
.status-red { background: var(--red); }

/* ── Progress ── */
.progress-bar { height: 8px; background: var(--chip); border: 1px solid var(--border); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); transition: width 0.4s; }
.progress-dots { display: flex; gap: 6px; }
.progress-dot { width: 36px; height: 5px; background: var(--border-strong); }
.progress-dot.active { background: var(--brand-primary); }
.progress-dot.done { background: var(--green); }

/* ── Timeline: square dots, 3px brand ring ── */
.timeline-item { display: flex; gap: 18px; padding: 14px 0; }
.timeline-dot-col { width: 20px; display: flex; flex-direction: column; align-items: center; }
.timeline-dot { width: 14px; height: 14px; border: 3px solid var(--brand-primary); background: var(--bg-card); flex-shrink: 0; }
.timeline-dot.filled { background: var(--brand-primary); }
.timeline-line { width: 2px; flex: 1; background: var(--border); }
.timeline-date { font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--text-muted); }
.timeline-title { font-size: 16px; font-weight: 600; }
.timeline-desc { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* ── Messages ── */
.chat-container { display: flex; flex-direction: column; gap: 8px; height: 340px; overflow-y: auto; padding: 14px; }
.message-bubble { max-width: 72%; padding: 12px 16px; border-radius: var(--radius); font-size: 15px; line-height: 1.5; }
.msg-in { background: var(--msg-in-bg); border: 1px solid var(--border); align-self: flex-start; }
.msg-out { background: var(--brand-primary); color: var(--on-accent); align-self: flex-end; }
.msg-time { font-size: 12px; font-family: var(--font-mono); color: var(--text-muted); }
.chat-input { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; border: 2px solid var(--text); border-radius: 0; font-size: 16px; }

/* ── Community post ── */
.post-card { padding: 18px 0; border-bottom: 1px solid var(--border); }
.post-header { display: flex; align-items: center; gap: 12px; }
.post-avatar { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.post-author { font-size: 15px; font-weight: 600; }
.post-time { font-size: 13px; color: var(--text-muted); }
.post-body { font-size: 16px; line-height: 1.6; margin-top: 8px; }
.post-reactions { display: flex; gap: 18px; margin-top: 8px; }
.post-reaction { font-size: 14px; color: var(--brand-primary); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font); }

/* ── Misc content ── */
.recovery-codes {
  font-family: var(--font-mono);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px 16px;
  list-style-position: inside;
}

/* ── The journey band: the signature meter. One component, two renderers -
      the sport Road (linear track) and the Health Arc (SVG wave) share every class.
      The marker's pulse is the ONLY pulse allowed in the product. ── */
.journey {
  padding: 12px 32px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 6;
}
.journey-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; min-height: 26px; }
.journey.journey-compact .journey-top { min-height: 0; }
.journey-phase { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.journey-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.journey-chip {
  padding: 3px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--chip);
  font-size: 13px;
  line-height: 1.5;
}
.journey-chip .num { font-size: 13px; font-weight: 700; }
a.journey-chip { text-decoration: none; color: inherit; cursor: pointer; }
a.journey-chip:hover { border-color: var(--brand-primary); }
.journey-chip-warm { border-color: var(--warm-fill); }
.journey-chip-warm .num { color: var(--warm); }
.journey-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius);
  background: var(--chip);
  border: 1px solid var(--border);
}
.journey-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); opacity: 0.85; }
.journey-tick { position: absolute; width: 2px; top: -3px; bottom: -3px; background: var(--border-strong); }
.journey-gatepost { position: absolute; width: 4px; top: -5px; bottom: -5px; background: var(--warm-fill); }
.journey-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.journey-marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent);
  animation: roadPulse 2.6s ease-in-out infinite;
}
@keyframes roadPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
  50% { box-shadow: 0 0 0 7px var(--pulse); }
}
.journey-marker-label { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.journey-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-light); margin-top: 7px; }
.arc-note { color: var(--warm); font-weight: 600; text-align: center; flex: 1; }
.arc-wrap { height: 34px; }
.arc-svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .journey { padding: 10px 16px 8px; } }

/* ── Key/value detail list (account, subject file) ── */
.detail-list { display: flex; flex-direction: column; gap: 12px; }
.detail-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
.detail-list dt { color: var(--text-muted); font-size: 14px; }
.detail-list dd { margin: 0; color: var(--text); }
@media (max-width: 520px) {
  .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Admin roster rows (tenant administration) ── */
.admin-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.admin-row:last-child { border-bottom: none; }
.admin-row-inactive { opacity: 0.62; }
.admin-row-main { flex: 1; min-width: 0; }
.admin-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-role-chip { display: inline-flex; align-items: center; gap: 4px; }
.admin-chip-form { display: inline; margin: 0; }
.admin-chip-x {
  background: none; border: none; cursor: pointer; padding: 0 0 0 2px;
  font-size: 15px; line-height: 1; color: inherit; opacity: 0.6;
}
.admin-chip-x:hover { opacity: 1; color: var(--red); }
.admin-row-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.admin-add-role { display: flex; gap: 6px; align-items: center; margin: 0; }
.admin-add-role select { padding: 6px 8px; font-size: 13px; min-width: 130px; }
/* The status reads under the roles, not beside them: on a phone there is no beside. */
.admin-status { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .admin-row { flex-wrap: wrap; }
  .admin-row-actions { flex-direction: row; align-items: center; width: 100%; }
}

/* ── Data table (audit log, reports) — the shared table component ── */
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table .col-when { white-space: nowrap; color: var(--text-muted); }

/* ── Prescription adjust rows (subject file) ── */
.rx-row { display: flex; align-items: flex-end; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; margin: 0; }
.rx-row:last-child { border-bottom: none; }
.rx-name { flex: 1 1 180px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rx-field { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); gap: 3px; }
.rx-field input, .rx-field select { width: 100%; padding: 7px 9px; font-size: 14px; }
.rx-field input[type=number] { width: 100%; }
.target-edit { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--bg-card); }
/* Target-editor grid: readable columns, text fields that breathe, numbers compact. */
.target-edit .rx-row { align-items: end; gap: 14px; }
.target-edit .t-metric { flex: 2 1 200px; }
.target-edit .t-comparator { flex: 2 1 190px; }
.target-edit .t-direction { flex: 2 1 190px; }
.target-edit .t-value { flex: 0 0 90px; }
.target-edit .t-value input { width: 90px; }
.target-edit .t-wide { flex: 1 1 100%; }
.target-edit .t-half { flex: 1 1 45%; min-width: 220px; }
.target-edit .t-cohort { flex: 0 0 150px; }
.target-edit .t-cohort input { width: 150px; }

/* ── Alert triage board (raised → actioned/dismissed → reopened) ── */
.alert-item { border-bottom: 1px solid var(--border); background: var(--bg-card); }
.alert-item:last-child { border-bottom: none; }
.alert-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px 8px;
  text-decoration: none; color: inherit; }
.alert-main:hover { background: var(--surface-hover); }
.alert-main .patient-info { flex: 1; }
.alert-actions { display: flex; align-items: center; gap: 8px; padding: 0 16px 14px 70px; flex-wrap: wrap; }
.alert-note { flex: 1 1 220px; padding: 7px 10px; font-size: 13px; }
.alert-resolved .alert-main { opacity: 0.82; }

/* ── Hand/finger glyph animations (swing/fold/sway/oppose) ── */
@keyframes glyphSwing { 0%,100% { transform: rotate(var(--a0,0deg)); } 50% { transform: rotate(var(--a1,0deg)); } }
@keyframes glyphFold  { 0%,100% { transform: scale(1); } 50% { transform: scale(var(--sc,1)); } }
@keyframes glyphSway  { 0%,100% { transform: translateX(calc(-1 * var(--sx,0px))); } 50% { transform: translateX(var(--sx,0px)); } }
@keyframes glyphOppose { 0%,100% { transform: none; } 50% { transform: rotate(var(--a1,0deg)) scale(var(--sc,1)); } }
.g-anim { transform-box: view-box; animation-duration: 3.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; }
.g-swing { animation-name: glyphSwing; }
.g-fold { animation-name: glyphFold; }
.g-sway { animation-name: glyphSway; }
.g-oppose { animation-name: glyphOppose; }
@media (prefers-reduced-motion: reduce) { .g-anim { animation-delay: -1.8s !important; animation-play-state: paused; } }

/* ── Teach-by-demonstration camera panel ── */
.teach-cam { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #0b0f14; border-radius: 8px; overflow: hidden; }
.teach-cam .camera-feed, .teach-cam .tracking-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teach-status { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.62); color: #fff; padding: 9px 12px; font-size: 13px; }
[data-role="glyph"] svg { display: block; }

/* ── Taxonomy explorer: sticky section nav + collapsible groups ── */
.tax-nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; padding: 10px 4px; margin-bottom: 18px; background: var(--bg); border-bottom: 1px solid var(--border); }
.tax-nav a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 14px;
  padding: 6px 12px; border-radius: 999px; }
.tax-nav a:hover { background: var(--surface-hover); color: var(--text); }
.tax-nav-stats { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tax-section { margin-bottom: 34px; scroll-margin-top: 64px; }
.tax-h { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.tax-lede { margin-bottom: 12px; max-width: 70ch; }
details.tax-group { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); margin-bottom: 8px; }
details.tax-group > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; user-select: none; }
details.tax-group > summary::-webkit-details-marker { display: none; }
details.tax-group > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--text-muted); transition: transform .12s; }
details.tax-group[open] > summary::before { transform: rotate(90deg); }
details.tax-group > summary:hover { background: var(--surface-hover); border-radius: 10px; }
details.tax-group[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
details.tax-group > div, details.tax-group > .card, details.tax-group > p { margin-left: 16px; margin-right: 16px; }
details.tax-group[open] { padding-bottom: 12px; }

/* ── Message thread ── */
.thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; }
.msg-body { white-space: pre-wrap; line-height: 1.45; }
.msg-when { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.msg-theirs { align-self: flex-start; background: var(--surface-hover); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-mine { align-self: flex-end; background: var(--brand-primary); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msg-mine .msg-when { color: var(--on-accent); opacity: 0.8; }
.msg-compose { display: flex; gap: 10px; align-items: flex-end; }
.msg-compose textarea { flex: 1; }
/* Nav unread pill */
.nav-badge { margin-left: auto; background: var(--accent); color: var(--on-accent); font-size: 11px;
  font-weight: 700; border-radius: 10px; padding: 1px 7px; min-width: 18px; text-align: center; }

/* ── Patient coach widget ─────────────────────────────────────────────────────
   A pill that opens a short, bounded conversation. Hidden entirely when the org
   has no AI key (the open call reports unavailable and the widget never mounts). */
.coach-pill{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:8px;
  background:#005eb8;color:#fff;border:none;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,0.22);cursor:pointer}
.coach-pill:hover{background:#004a93}
.coach-dot{width:9px;height:9px;border-radius:50%;background:#8fd3f4;box-shadow:0 0 0 0 rgba(143,211,244,0.7);animation:coachPulse 2s infinite}
@keyframes coachPulse{0%{box-shadow:0 0 0 0 rgba(143,211,244,0.7)}70%{box-shadow:0 0 0 8px rgba(143,211,244,0)}100%{box-shadow:0 0 0 0 rgba(143,211,244,0)}}
@media (prefers-reduced-motion: reduce){.coach-dot{animation:none}}
.coach-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(380px,calc(100vw - 40px));max-height:min(560px,80vh);
  display:flex;flex-direction:column;background:#fff;border:1px solid #d8dde0;border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,0.26);overflow:hidden}
.coach-head{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;background:#f4f8fb;border-bottom:1px solid #e3e9ee}
.coach-sub{font-size:12px;color:#4c6272;margin-top:2px}
.coach-signal{font-size:11px;color:#697077;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px}
.coach-head-actions{display:flex;align-items:flex-start;gap:8px;flex-shrink:0}
.coach-tech-toggle{background:none;border:1px solid #c3ccd2;border-radius:6px;font-size:11px;padding:3px 7px;color:#4c6272;cursor:pointer;white-space:nowrap}
.coach-close{background:none;border:none;font-size:20px;line-height:1;color:#697077;cursor:pointer}
.coach-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.coach-turn{display:flex;flex-direction:column;max-width:85%}
.coach-turn-coach{align-self:flex-start;align-items:flex-start}
.coach-turn-patient{align-self:flex-end;align-items:flex-end}
.coach-chip{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#005eb8;margin-bottom:3px}
.coach-bubble{background:#eef4f9;color:#212b32;padding:9px 12px;border-radius:12px 12px 12px 3px;font-size:14px;line-height:1.4}
.coach-bubble-patient{background:#005eb8;color:#fff;border-radius:12px 12px 3px 12px}
.coach-bubble-escalate{background:rgba(245,166,35,0.16);border:1px solid rgba(245,166,35,0.5)}
.coach-bubble-close{background:#f2f5f7;color:#4c6272}
.coach-foot{display:flex;gap:8px;padding:10px;border-top:1px solid #e3e9ee}
.coach-input{flex:1;border:1px solid #c3ccd2;border-radius:8px;padding:8px 10px;font-size:14px}
.coach-send{flex-shrink:0;padding:8px 14px}
.coach-done{font-size:12px;color:#697077;text-align:center;font-style:italic;padding:6px 0}

/* ── Trend charts (charts.js) — one renderer, wired on Progress + the clinician file ─────────── */
.trend-chart { width: 100%; }
.trend-svg { width: 100%; height: auto; display: block; }
/* Every colour here is a skin token. The health greys that used to be hard-coded were 3:1 on
   white and a grey smear on the sport skin's dark cards (the white text halo included). The
   line colours live in charts.js and are resolved from the same tokens at render time. */
.trend-grid { stroke: rgba(127,127,127,0.18); stroke-width: 1; }
.trend-axis { font-size: 9px; fill: var(--text-muted); }
.trend-target { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.trend-target-label { font-size: 8.5px; fill: var(--text-muted); }
.trend-last { font-size: 11px; font-weight: 700; fill: currentColor; }
.trend-hover { font-size: 10px; font-weight: 600; fill: var(--text); }
.trend-last, .trend-axis {
  paint-order: stroke;
  stroke: var(--bg-card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.trend-hover-bg { fill: var(--bg-card); stroke: var(--border); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); }
.trend-empty { font-size: 12px; color: var(--text-muted); padding: 18px 0; text-align: center; }

/* A trend card: the read is as prominent as the picture — never a chart without a meaning. */
.trend-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.trend-name { font-weight: 600; font-size: 14px; }
.trend-latest { font-family: ui-monospace, monospace; font-weight: 700; }
.trend-read { font-size: 12.5px; margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; }
.trend-read .dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.dir-improving { color: var(--green); } .dir-improving .dot { background: var(--green); }
.dir-declining { color: var(--warm); } .dir-declining .dot { background: var(--warm); }
.dir-steady { color: var(--text-muted); } .dir-steady .dot { background: var(--border-strong); }
.dir-insufficient { color: var(--text-muted); } .dir-insufficient .dot { background: var(--border-strong); } /* muted ink is 4.5:1+ in both skins; the light grey failed AA */
.trend-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* CSS-only tabs (used on "How I'm doing" — check-in / sleep & fuel). Radios are the state; no JS. */
.tabs { position: relative; }
/* Radio-tab pattern container (NOT .tabs — that one is display:flex for link tabs, which laid
   the panels out BESIDE the tab strip). */
.tab-set { display: block; }
.tab-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
/* Skin tokens, never literals: the health greys hard-coded here were invisible on the sport
   skin's dark ground (active ink 1.3:1, inactive 3.7:1). Tokens give 5.8:1+ health, 7.5:1+ sport. */
.tab-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab-label { padding: 8px 14px; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; font-weight: 600; font-size: 14px; margin-bottom: -1px; }
.tab-label:hover { color: var(--text); }
.tab-panel { display: none; }
#wtab-checkin:checked ~ .tab-bar label[for="wtab-checkin"],
#wtab-lifestyle:checked ~ .tab-bar label[for="wtab-lifestyle"] { color: var(--text); border-bottom-color: var(--brand-primary); }
#wtab-checkin:checked ~ .tab-panel[data-tab="checkin"],
#wtab-lifestyle:checked ~ .tab-panel[data-tab="lifestyle"] { display: block; }

/* ── The published accessibility statement (/accessibility): a plain reading page in either language ── */
.statement { max-width: 760px; margin: 0 auto; padding: 32px 20px 56px; }
.statement h1 { font-family: var(--font-display); font-size: 32px; margin: 0 0 8px; }
.statement h2 { font-size: 22px; margin: 28px 0 8px; }
.statement h3 { font-size: 18px; margin: 20px 0 6px; }
.statement p, .statement li { font-size: 16px; line-height: 1.6; }
.statement-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--brand-deep, #003087); color: #fff; }
/* Size the lockup only - the mark and the tagline both fill it. The logo is a link home, but the
   lockup must not wear a link underline. */
.statement-head .brand-lockup { width: 200px; }
.statement-head a { text-decoration: none; }
.statement-lang { font-size: 14px; margin-left: auto; }
.statement-lang form { display: inline; }
.statement-lang button { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* ── Long unbroken strings ──
   A URI, token or key has no spaces to break at, so on a phone it pushes the whole page wider than
   the screen and every page then scrolls sideways. The MFA setup page did exactly that with its
   otpauth:// URI. Anywhere one of these is shown to a reader, it wraps. */
.wrap-anywhere { overflow-wrap: anywhere; }