/* ══════════════════════════════════════════════════════════════════════ HeartDaily · COMPONENT LAYER — SINGLE SOURCE OF TRUTH heartdailyapp.org · v2 (28/09/2026 — shared by app + dashboard + admin) The canonical, token-driven definitions of the product's reusable components. Built ONLY from var(--token) in /assets/tokens.css, so a token change cascades here, and a component change here cascades everywhere that consumes this file: • /app/ React PWA — heartdaily/src/index.css does @import '../../assets/components.css' → Vite INLINES it into the bundle at build (offline-safe). • /dashboard/ /admin/ — ed with (compact metrics, same components). • /styleguide/ Living design system — links this file so it renders the REAL classes. ONE component, TWO densities (decisions.md [28/09]): sizes come from the density tokens (--btn-*, --input-*, --badge-*, --modal-w …) in tokens.css; the clinician surfaces switch them with `dense`. Colour, radius, weight and states never differ by surface. Where the app and the old dashboard/admin disagreed, the APP's value is the standard. Legacy aliases (.b-red, .btn-teal, .inp, .reg-input, .form-input …) keep the dashboard/admin markup working while it migrates — new markup uses the canonical names. ⚠️ These are the ACTUAL classes every surface renders. Do NOT re-declare them in a surface stylesheet (tools/check-ds-parity.sh enforces it) — edit them HERE. Only class selectors live here: no bare element rules (this file is inlined into the app bundle). Exception: the two global accessibility resets below (:focus-visible, prefers-reduced-motion) are pseudo-class/media rules, not element rules — they carry no specificity risk for a real element and are meant to apply everywhere, which is the whole point of moving them here (29/09: deduped out of heartdaily/src/index.css, which had them but dashboard/admin never did). Requires /assets/tokens.css to be loaded first (for the var(--token)s). ══════════════════════════════════════════════════════════════════════ */ /* ── Icon (29/09) ───────────────────────────────────────────────── */ /* One visual weight for every icon, both surfaces: assets/icons.svg is the single source (app: generated into icons.jsx by tools/gen-icons.js; dashboard: ). Colour is never baked into the symbol — it's the element's `color`, so an icon inherits its context (teal only when interactive/active, neutral otherwise — 60-30-10, @design.md). */ .ico { display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--ico-sw); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .ico-mirror { transform: scaleX(-1); } /* ── Focus & motion (29/09) ─────────────────────────────────────── */ /* Was only in heartdaily/src/index.css (app-only) — dashboard/admin/styleguide had neither a focus ring nor a motion-reduction rule until this moved here. --td (not --t) so the ring itself clears 3:1 non-text contrast (WCAG 1.4.11); --t on white is only 2.45:1. */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Badge ──────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--badge-gap); padding: var(--badge-py) var(--badge-px); border-radius: var(--rpill); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--badge-ls); line-height: var(--badge-lh); } .dense .badge { white-space: nowrap; } .badge-green, .b-grn { background: var(--green-bg); color: var(--green-tx); } .badge-amber, .b-amb, .b-org { background: var(--amber-bg); color: var(--amber-tx); } .badge-red, .b-red { background: var(--red-bg); color: var(--color-text-danger); } .badge-blue, .b-blu, .b-rose { background: var(--blue-bg); color: var(--blue-tx); } .badge-gray, .b-gray { background: var(--color-surface-subtle); color: var(--color-text-secondary); } .badge-teal, .b-pur { background: var(--teal-bg); color: var(--color-text-action); } .b-teal { background: var(--color-surface-subtle); color: var(--color-text-secondary); } /* clinician: teal is reserved for action, so the old "teal" pill is neutral */ /* Opt-in status dot (not default — the app's badges carry no dot). */ .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── Card ───────────────────────────────────────────────────────── */ .card { background: var(--color-surface-card); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; } .cmp-card { /* Neutralised (60-30-10): was a brand soft-gradient + teal border. A generic container should not carry brand colour — reserve gradient for genuine hero/ primary surfaces (btn-primary, HD-ID card). */ background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--r); padding: var(--sp-4); margin-bottom: var(--sp-3); } .hlcard { background: var(--grad); border-radius: var(--r); padding: var(--sp-5); color: #fff; } /* ── BP 3-field input ───────────────────────────────────────────── */ .bp3r { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .bp3l { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); width: 88px; flex-shrink: 0; line-height: 1.4; } .bp3i { flex: 1; background: var(--color-surface-subtle); border-radius: var(--rs); border: 1.5px solid transparent; transition: border-color var(--motion-fast); } .bp3i:focus-within { border-color: var(--t); background: white; } .bp3i input { width: 100%; border: none; background: none; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 500; color: var(--color-text); outline: none; text-align: center; padding: 14px 10px; } .bp3u { font-size: var(--text-sm); color: var(--color-text-muted); width: 36px; flex-shrink: 0; text-align: right; } /* ── Countdown badge ────────────────────────────────────────────── */ .countdown-badge { background: var(--teal-bg); border: 1px solid var(--teal-bd); border-radius: var(--rs); padding: 12px var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--color-text-action); margin-bottom: var(--sp-3); } /* ── Toggle ─────────────────────────────────────────────────────── */ .tog { position: relative; width: 44px; height: 26px; border-radius: var(--rpill); border: none; cursor: pointer; background: var(--bord); transition: background var(--motion-base); flex-shrink: 0; } .tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform var(--motion-base); } .tog.on { background: var(--t); } @media (hover: hover) { .tog:hover { filter: brightness(.95); } } .tog:disabled { opacity: .45; cursor: not-allowed; filter: none; } .tog.on::after { transform: translateX(18px); } /* ── Text input / select / textarea ─────────────────────────────── */ .hd-input, .inp, .reg-input, .form-input, .form-select, .search-input { width: 100%; padding: var(--input-py) var(--input-px); height: var(--input-h); /* a u-h-* utility can still override the height */ border: 1.5px solid var(--color-border); border-radius: var(--rs); font-size: var(--input-fs); font-family: 'Inter', sans-serif; color: var(--color-text); background: white; outline: none; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); -webkit-appearance: none; appearance: none; } .hd-input:focus, .inp:focus, .reg-input:focus, .form-input:focus, .form-select:focus, .search-input:focus { border-color: var(--t); box-shadow: var(--focus-ring); } .hd-input.error, .inp.error, .reg-input.error, .form-input.error, .form-select.error, .search-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.10); } .hd-input::placeholder, .inp::placeholder, .reg-input::placeholder, .form-input::placeholder, .search-input::placeholder { color: var(--color-text-muted); } @media (hover: hover) { .hd-input:hover { border-color: var(--mute); } } .hd-input:disabled { background: var(--color-surface-subtle); color: var(--color-text-muted); cursor: not-allowed; } /*