/* ============================================================
   Demo Health — Health records, timeline, events, form
   ============================================================ */

/* ============================================================
   VIEW CONTAINERS (health-records)
   ============================================================ */

.view-health-records {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--c-bg-chat);
    animation: viewFadeIn 200ms var(--ease-out);
}

.view-health-scroll {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

@media (prefers-reduced-motion: reduce) {
    .view-health-records { animation: none; }
}

/* ============================================================
   Refonte Lot 2 : HERO d'identité (teal) — fusionne l'ancien en-tête,
   la barre de 3 stats et le bloc allergies/conditions en UNE surface.
   Remplace .health-view-card à l'écran (l'ancien CSS reste défini mais
   n'est plus rendu par le JS).
   ============================================================ */

.health-hero {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 20px;
    color: var(--c-text-inverse);
    box-shadow: var(--shadow-sm);
}

.health-hero-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.health-hero-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.health-hero-avatar--photo { border-color: rgba(255, 255, 255, 0.5); }

.health-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

.health-hero-id { flex: 1; min-width: 0; }

.health-hero-name {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-hero-sub {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 3px;
}

.health-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Chips : poids + profil médical (translucides sur teal) */
.health-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.health-hero-chips:empty { display: none; }

.health-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
}

.health-hero-chip--weight { font-weight: 600; }

.health-hero-chip .pet-tag-remove {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0 0 3px;
}

.health-hero-chip .pet-tag-remove:hover { color: #fff; }

/* Actions sur fond teal : boutons translucides blancs (l'add-btn est sombre par défaut) */
.health-hero .health-view-add-btn,
.health-hero .health-view-share-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid transparent;
    color: #fff;
}

.health-hero .health-view-add-btn:hover,
.health-hero .health-view-share-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: transparent;
    color: #fff;
}

/* Anneau de Score de Soin sur teal : piste + valeur en blanc (sinon invisibles) */
.health-hero .carnet-ring-bg { stroke: rgba(255, 255, 255, 0.28); }
.health-hero .carnet-ring-fg { stroke: #fff; }
.health-hero .carnet-ring--high .carnet-ring-fg { stroke: #fff; }
.health-hero .carnet-ring--low .carnet-ring-fg { stroke: var(--c-accent); }
.health-hero .carnet-ring-value { color: #fff; }
.health-hero .carnet-ring:not(.carnet-ring--loaded) .carnet-ring-value { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 767px) {
    .health-hero { padding: 14px 15px; }
    .health-hero-avatar { width: 46px; height: 46px; font-size: 1.15rem; }
    .health-hero-name { font-size: 1.25rem; }
}

/* (Ancienne section « Suivi & prévention » .carnet-followup retirée — refonte Lot 5 :
   remplacée par les onglets Journal / Poids / Prévention. Classes sans usage supprimées.) */

/* Refonte Lot 4 : barre de filtre compacte (chip « Filtrer » + « × » effacer) —
   remplace la rangée de pastilles. Ouvre une bottom-sheet de sélection. */
.carnet-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.carnet-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    min-height: 38px;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.carnet-filter-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

.carnet-filter-btn.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}

.carnet-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.carnet-filter-clear:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* Refonte Lot 5 : onglets Journal / Poids / Prévention (segmented) — un seul panneau
   visible à la fois (les blocs empilés prenaient trop de place). Panneaux cachés via
   l'attribut [hidden] : NE PAS poser de `display` sur .health-tab-panel (écraserait
   [hidden] — cf. piège projet), le guard [hidden] ci-dessous suffit. */
.health-tabs {
    display: flex;
    gap: 3px;
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 16px;
}

.health-tab {
    flex: 1;
    min-height: 40px;
    padding: 8px 6px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.health-tab.active {
    background: var(--c-bg-card);
    color: var(--c-primary);
    box-shadow: var(--shadow-sm);
}

.health-tab-panel[hidden] { display: none; }

/* ---- Health view header (in main area, consistent with pet profile card) ---- */

.health-view-card {
    background: var(--c-bg-elevated);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.health-view-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
}

.health-view-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.3rem;
    color: white;
    font-weight: 700;
    flex-shrink: 0;
}

.health-view-pet-info {
    flex: 1;
    min-width: 0;
}

.health-view-pet-name {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    color: var(--c-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.health-view-pet-breed {
    font-size: 0.84rem;
    color: var(--c-text-secondary);
    margin-top: 4px;
}

.health-view-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-text);
    background: var(--c-text);
    color: var(--c-bg-card);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
    flex-shrink: 0;
}

.health-view-add-btn:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg-card);
}

/* ============================================================
   HEALTH RECORDS & TIMELINE
   ============================================================ */

/* ---- Health stats bar ---- */

.health-stats-bar {
    display: flex;
    gap: 8px;
    padding: 0 24px 16px;
    border-top: 1px solid var(--c-border-light);
    margin: 0;
    padding-top: 12px;
}

.health-stat-item {
    flex: 1;
    padding: 12px 8px;
    background: var(--c-bg-warm);
    border-radius: var(--r-md);
    text-align: center;
    border: 1px solid var(--c-border-light);
}

.health-stat-value {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--c-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.health-stat-label {
    font-size: 0.7rem;
    color: var(--c-text-muted);
    margin-top: 2px;
}

/* ---- Health category pills ---- */

/* Ancien bloc « allergies & conditions connues » retiré — refonte Lot 2 : le profil
   médical est désormais rendu en chips dans le hero (cf. .health-hero-chip--cond /
   --allergy). Classes .health-known-* supprimées car sans usage (vérifié : 0 émetteur). */

.health-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.health-pills::-webkit-scrollbar {
    display: none;
}

.health-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
    white-space: nowrap;
}

.health-pill:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.health-pill.active {
    background: var(--c-primary);
    color: white;
    border-color: var(--c-primary);
}

/* ---- Health timeline ---- */

.health-timeline {
    position: relative;
    padding-left: 24px;
}

.health-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-border-light);
    border-radius: 1px;
}

.health-month-group {
    margin-bottom: 20px;
}

.health-month-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 0;
}

/* ---- Health event card ---- */

.health-event {
    position: relative;
    margin-bottom: 8px;
    padding: 12px 14px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.health-event:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-sm);
}

.health-event::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: white;
    z-index: 1;
}

.health-event-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.health-event-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.health-event-info {
    flex: 1;
    min-width: 0;
}

.health-event-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-event-meta {
    font-size: 0.72rem;
    color: var(--c-text-muted);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 1px;
}

.health-event-approx {
    font-size: 0.6rem;
    background: var(--c-accent-light);
    color: var(--c-accent-hover);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    font-weight: 500;
}

.health-event-chevron {
    color: var(--c-text-muted);
    transition: transform var(--dur-fast);
    flex-shrink: 0;
}

.health-event.expanded .health-event-chevron {
    transform: rotate(90deg);
}

/* ---- Health event expanded body ---- */

/* Expansion animée sans mesure JS : grid-template-rows 0fr→1fr (l'inner porte
   overflow hidden + min-height 0, le pad porte l'espacement/bordure qui ne doit
   pas rester visible replié). Vieux Safari (< 16) : pas d'interpolation des
   tracks fr → bascule instantanée, états corrects (dégradation gracieuse). */
.health-event-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms var(--ease-out);
}

.health-event.expanded .health-event-body {
    grid-template-rows: 1fr;
}

.health-event-body-inner {
    overflow: hidden;
    min-height: 0;
}

.health-event-body-pad {
    padding-top: 10px;
    border-top: 1px solid var(--c-border-light);
    margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .health-event-body { transition: none; }
}

.health-event-header:focus-visible {
    outline: 2px solid var(--c-primary-soft);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.health-event-desc {
    font-size: 0.82rem;
    color: var(--c-text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.health-event-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.health-meta-tag {
    font-size: 0.72rem;
    padding: 3px 8px;
    background: var(--c-bg);
    border-radius: var(--r-sm);
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border-light);
}

.health-meta-tag strong {
    color: var(--c-text);
    font-weight: 600;
}

.health-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--c-border-light);
}

.health-event-source {
    font-size: 0.68rem;
    color: var(--c-text-muted);
    font-style: italic;
}

.health-event-actions {
    display: flex;
    gap: 4px;
}

.health-event-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
}

.health-event-action-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-bg-warm);
}

.health-event-action-btn.delete:hover {
    border-color: var(--c-danger);
    color: var(--c-danger);
}

/* ---- Health event category colors ---- */

.health-event[data-category="vaccination"]::before { border-color: #10b981; }
.health-event[data-category="vaccination"] .health-event-icon { background: #d1fae5; color: #065f46; }
.health-event[data-category="consultation"]::before { border-color: #3b82f6; }
.health-event[data-category="consultation"] .health-event-icon { background: #dbeafe; color: #1e40af; }
.health-event[data-category="surgery"]::before { border-color: #ef4444; }
.health-event[data-category="surgery"] .health-event-icon { background: #fee2e2; color: #991b1b; }
.health-event[data-category="treatment"]::before { border-color: #f59e0b; }
.health-event[data-category="treatment"] .health-event-icon { background: #fef3c7; color: #92400e; }
.health-event[data-category="symptom"]::before { border-color: #f97316; }
.health-event[data-category="symptom"] .health-event-icon { background: #ffedd5; color: #9a3412; }
.health-event[data-category="test"]::before { border-color: #06b6d4; }
.health-event[data-category="test"] .health-event-icon { background: #cffafe; color: #155e75; }
.health-event[data-category="prevention"]::before { border-color: #84cc16; }
.health-event[data-category="prevention"] .health-event-icon { background: #ecfccb; color: #3f6212; }
.health-event[data-category="weight"]::before { border-color: #64748b; }
.health-event[data-category="weight"] .health-event-icon { background: #e2e8f0; color: #334155; }
.health-event[data-category="diet"]::before { border-color: #a16d4f; }
.health-event[data-category="diet"] .health-event-icon { background: #f4ebe2; color: #5d3f29; }
.health-event[data-category="other"]::before { border-color: #9ca3af; }
.health-event[data-category="other"] .health-event-icon { background: #f3f4f6; color: #374151; }

/* ---- Health form ---- */
/* Le formulaire réutilise les classes pet-form-* / auth-form-group (demo-pets.css) —
   les anciennes règles .health-form-row/actions/save/cancel étaient du code mort. */

.health-form {
    padding: 0;
}

.health-form-dynamic {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-border-light);
}

/* Checkbox « date approximative » (remplace les styles inline hardcodés) */
.health-approx-group {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}

.health-approx-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--c-text-secondary);
}

/* Bouton × de retrait d'une pièce jointe (formulaire d'édition, B-6).
   Toujours visible (règle tactile : pas de hover-only). */
.photo-tile-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(19, 21, 22, 0.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.photo-tile-remove:hover {
    background: var(--c-danger);
}

/* Zone de tap étendue (~44px effectifs) sans changer le visuel 22px — le ::before
   déborde dans la tuile (overflow:hidden du parent la borne au cadre). */
.photo-tile-remove::before {
    content: '';
    position: absolute;
    inset: -11px;
}

/* Dans le strip du formulaire, garder le nom du PDF visible (demo-photos.css masque
   les spans des tuiles small) — sinon impossible de savoir quel document le × supprime. */
#healthPhotosStrip .photo-tile-small .photo-tile-doc-name {
    display: block;
    font-size: 0.5rem;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Health loading skeleton + état d'erreur (B-3) ---- */

.health-skeletons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.health-skeleton-card {
    padding: 14px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
}

.hs-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--c-bg-warm) 25%, var(--c-border-light) 50%, var(--c-bg-warm) 75%);
    background-size: 200% 100%;
    animation: hsShimmer 1.2s linear infinite;
}

.hs-line-1 { width: 55%; margin-bottom: 8px; }
.hs-line-2 { width: 35%; }

@keyframes hsShimmer {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-line { animation: none; }
}

.health-load-error {
    text-align: center;
    padding: 40px 20px;
}

.health-load-error-text {
    font-size: 0.9rem;
    color: var(--c-text-secondary);
    margin-bottom: 14px;
}

.health-retry-btn {
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.health-retry-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* ---- Health empty state ---- */

.health-empty {
    text-align: center;
    padding: 40px 20px;
}

.health-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.health-empty-text {
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--c-text);
    letter-spacing: -0.005em;
}

.health-empty-sub {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 6px;
}

/* ============================================================
   RESPONSIVE — Health
   ============================================================ */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    /* Refonte Lot 5 : dégagement bas — le dernier item doit pouvoir défiler au-dessus du
       FAB (et de la bottom tab bar dans le shell), sinon ses actions restent masquées. */
    .view-health-scroll { padding: 16px 14px 96px; }
    body.has-tabbar .view-health-scroll { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
    .health-view-header { padding: 12px; gap: 10px; }
}

/* Touch devices — always show interactive elements */
@media (hover: none) and (pointer: coarse) {
    .health-event-action-btn { opacity: 1; }
}

/* ============================================================
   Carnet de Vie (2026) — bandeau « rappel à venir » + graphe de poids
   ============================================================ */
.health-reminder-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent-soft);
    border-radius: 14px;
}
.health-reminder-ico { display: flex; align-items: center; color: var(--c-accent-hover); flex-shrink: 0; }
.health-reminder-ico svg { width: 20px; height: 20px; }
.health-reminder-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.health-reminder-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-accent-hover);
}
.health-reminder-detail { font-size: 0.88rem; font-weight: 600; color: var(--c-text); }

.health-weight-chart {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19, 21, 22, 0.04);
}
.health-weight-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.health-weight-chart-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
}
.health-weight-chart-trend { font-size: 0.82rem; font-weight: 700; color: var(--c-text-muted); }
.health-weight-chart-trend.up { color: var(--c-accent-hover); }
.health-weight-chart-trend.down { color: var(--c-success); }
.health-weight-svg { display: block; width: 100%; height: auto; }
.health-weight-svg .hw-area { fill: var(--c-primary-light); opacity: 0.45; }
.health-weight-svg .hw-line {
    fill: none;
    stroke: var(--c-primary-soft);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.health-weight-svg .hw-dots circle { fill: var(--c-primary); }
.health-weight-chart-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--c-text-muted);
}