/* global React */
/* ============================================================
   Arogya — Mini visualizations for every use case
   55 distinct cards across Adults / Children / Elders / Pets,
   each with a compact graph or visual artifact.
============================================================ */

/* ---------- shared frame ---------- */

function UCFrame({ title, eyebrow, flag, height, children }) {
  return (
    <div className="ucv-card" style={ height ? { minHeight: height } : undefined }>
      <div className="ucv-card-head">
        {eyebrow && <div className="ucv-eyebrow">{eyebrow}</div>}
        <div className="ucv-row">
          <div className="ucv-title">{title}</div>
          {flag && <span className={"ucv-flag ucv-flag--" + (flag.k || "ok")}>{flag.t}</span>}
        </div>
      </div>
      <div className="ucv-card-body">
        {children}
      </div>
    </div>
  );
}

/* ---------- PRIMITIVES ---------- */

function Spark({ points, color = "var(--c-brand)", height = 42, dots = "last" }) {
  const max = Math.max(...points), min = Math.min(...points);
  const range = (max - min) || 1;
  const w = 200, h = height;
  const norm = points.map(p => (p - min) / range);
  const path = norm.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (points.length - 1)) * w} ${h - v * h}`).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h + 4}`} preserveAspectRatio="none" style={{ width: "100%", height: height + 4 }}>
      <path d={`${path} L ${w} ${h} L 0 ${h} Z`} fill={`color-mix(in oklab, ${color} 16%, transparent)`} />
      <path d={path} stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      {norm.map((v, i) => {
        const show = dots === "all" || (dots === "last" && i === norm.length - 1);
        return show ? <circle key={i} cx={(i / (points.length - 1)) * w} cy={h - v * h} r="2.4" fill={color} /> : null;
      })}
    </svg>
  );
}

function MultiSpark({ lines, height = 44 }) {
  /* lines = [{label, points, color}] — all share the same x-axis */
  const allPts = lines.flatMap(l => l.points);
  const max = Math.max(...allPts), min = Math.min(...allPts);
  const range = (max - min) || 1;
  const w = 200, h = height;
  return (
    <div>
      <svg viewBox={`0 0 ${w} ${h + 4}`} preserveAspectRatio="none" style={{ width: "100%", height: height + 4 }}>
        {lines.map((L, idx) => {
          const norm = L.points.map(p => (p - min) / range);
          const path = norm.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (L.points.length - 1)) * w} ${h - v * h}`).join(" ");
          return <path key={idx} d={path} stroke={L.color} strokeWidth="1.5" fill="none" strokeLinecap="round" />;
        })}
      </svg>
      <div className="ucv-legend">
        {lines.map((L, i) => (
          <span key={i} className="ucv-legend-item">
            <span className="ucv-legend-dot" style={{ background: L.color }} />
            {L.label}
          </span>
        ))}
      </div>
    </div>
  );
}

function RingProgress({ value, total, center, sub, color = "var(--c-brand)" }) {
  const r = 24, c = 2 * Math.PI * r;
  const pct = total ? value / total : value;
  return (
    <div className="ucv-ring-row">
      <svg width="58" height="58" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r={r} fill="none"
          stroke="color-mix(in oklab, var(--c-brand) 10%, var(--c-bg-2))" strokeWidth="6" />
        <circle cx="30" cy="30" r={r} fill="none"
          stroke={color} strokeWidth="6" strokeLinecap="round"
          strokeDasharray={`${pct * c} ${c}`} transform="rotate(-90 30 30)" />
        {center && <text x="30" y="35" textAnchor="middle"
          fontFamily="var(--serif)" fontSize="15" fontWeight="600" fill="var(--c-ink)">{center}</text>}
      </svg>
      {sub && <div className="ucv-ring-sub">{sub}</div>}
    </div>
  );
}

function DotRow({ items }) {
  /* items: [{label, status: 'done'|'due'|'flagged'|'·', value?}] */
  return (
    <div className="ucv-list">
      {items.map((it, i) => (
        <div key={i} className="ucv-list-row">
          <span className={"ucv-status ucv-status--" + (it.status || "·")}>
            {it.status === "done" ? "✓" : it.status === "flagged" ? "!" : it.status === "due" ? "·" : "·"}
          </span>
          <span className="ucv-list-label">{it.label}</span>
          {it.value && <span className="ucv-list-val">{it.value}</span>}
        </div>
      ))}
    </div>
  );
}

function BarRow({ bars, max, color = "var(--c-brand)" }) {
  const peak = max || Math.max(...bars.map(b => b.v));
  return (
    <div className="ucv-bars">
      {bars.map((b, i) => (
        <div key={i} className="ucv-bar-row">
          <span className="ucv-bar-label">{b.l}</span>
          <div className="ucv-bar-track">
            <div className="ucv-bar-fill" style={{ width: `${Math.min(100, (b.v / peak) * 100)}%`, background: b.c || color }} />
          </div>
          {b.t && <span className="ucv-bar-val">{b.t}</span>}
        </div>
      ))}
    </div>
  );
}

function ChipCloud({ chips, dense }) {
  return (
    <div className={"ucv-chips" + (dense ? " is-dense" : "")}>
      {chips.map((c, i) => {
        const obj = typeof c === "string" ? { t: c } : c;
        return (
          <span key={i} className={"ucv-chip ucv-chip--" + (obj.k || "default")} style={obj.bg ? { background: obj.bg } : undefined}>
            {obj.t}
          </span>
        );
      })}
    </div>
  );
}

function Timeline({ steps }) {
  /* steps: [{label, done, current}] */
  return (
    <div className="ucv-tl">
      <div className="ucv-tl-line" />
      {steps.map((s, i) => (
        <div key={i} className="ucv-tl-step">
          <span className={"ucv-tl-dot" + (s.done ? " is-done" : "") + (s.current ? " is-current" : "")} />
          <span className="ucv-tl-label">{s.label}</span>
        </div>
      ))}
    </div>
  );
}

function PillGrid({ pills }) {
  /* pills: [{n, t, c}] — name, time (AM/PM), color */
  return (
    <div className="ucv-pills">
      {pills.map((p, i) => (
        <div key={i} className="ucv-pill">
          <span className="ucv-pill-glyph" style={{ background: p.c || "var(--c-brand)" }} />
          <span className="ucv-pill-name">{p.n}</span>
          {p.t && <span className="ucv-pill-time">{p.t}</span>}
        </div>
      ))}
    </div>
  );
}

function BodyMap({ marks, view = "front" }) {
  /* marks: [{x, y, kind: 'flag'|'ok'}] — coords in 0..100 box */
  return (
    <div className="ucv-body">
      <svg viewBox="0 0 60 100" width="44" height="74" style={{ display: "block" }}>
        {/* head */}
        <circle cx="30" cy="10" r="6" fill="none" stroke="var(--c-line)" strokeWidth="1.2" />
        {/* body */}
        <path d="M22 17 L22 28 L14 30 L14 56 L20 56 L22 78 L20 96 L26 96 L28 78 L28 60 L32 60 L32 78 L34 96 L40 96 L38 78 L40 56 L46 56 L46 30 L38 28 L38 17 Z"
          fill="none" stroke="var(--c-line)" strokeWidth="1.2" strokeLinejoin="round" />
        {marks.map((m, i) => (
          <circle key={i} cx={m.x * 0.6} cy={m.y} r={m.r || 2.2}
            fill={m.kind === "flag" ? "#dc2626" : "var(--c-brand)"} />
        ))}
      </svg>
    </div>
  );
}

function ToothRow({ flagged = [] }) {
  /* flagged is array of {row, col, kind} */
  return (
    <div className="ucv-teeth">
      {[0, 1].map(row => (
        <div key={row} className="ucv-teeth-row">
          {Array.from({ length: 16 }).map((_, i) => {
            const f = flagged.find(x => x.row === row && x.col === i);
            return (
              <div key={i} className={"ucv-tooth" + (f ? " ucv-tooth--" + (f.kind || "flag") : "")} />
            );
          })}
        </div>
      ))}
    </div>
  );
}

function EyeMeter({ left, right, label }) {
  return (
    <div className="ucv-eye">
      <div>
        <div className="ucv-eye-val">{left}</div>
        <div className="ucv-eye-side">L</div>
      </div>
      <svg width="36" height="22" viewBox="0 0 36 22">
        <path d="M2 11 Q18 1 34 11 Q18 21 2 11 Z" fill="none" stroke="var(--c-brand-deep)" strokeWidth="1.2" />
        <circle cx="18" cy="11" r="4" fill="var(--c-brand-deep)" />
      </svg>
      <div>
        <div className="ucv-eye-val">{right}</div>
        <div className="ucv-eye-side">R</div>
      </div>
    </div>
  );
}

function HeatCal({ weeks = 6, days = 7, data, max = 4 }) {
  /* data: 2D array [week][day] */
  return (
    <div className="ucv-heat" style={{ gridTemplateColumns: `repeat(${weeks}, 1fr)` }}>
      {Array.from({ length: weeks }).map((_, w) => (
        <div key={w} className="ucv-heat-col">
          {Array.from({ length: days }).map((_, d) => {
            const v = (data && data[w] && data[w][d]) || 0;
            const op = v / max;
            return <span key={d} className="ucv-heat-cell" style={{ opacity: Math.max(0.08, op), background: v > 0 ? "var(--c-brand)" : "var(--c-line)" }} />;
          })}
        </div>
      ))}
    </div>
  );
}

function DocGlyph({ kind, title, items }) {
  /* miniature document with kind eyebrow + a few extracted rows */
  return (
    <div className="ucv-doc">
      <div className="ucv-doc-eyebrow">{kind}</div>
      <div className="ucv-doc-title">{title}</div>
      <div className="ucv-doc-rows">
        {items.map((it, i) => (
          <div key={i} className="ucv-doc-row">
            <span>{it[0]}</span><b>{it[1]}</b>
          </div>
        ))}
      </div>
    </div>
  );
}

function IconGlyph({ icon, label, value, color = "var(--c-brand)" }) {
  return (
    <div className="ucv-icon-row">
      <div className="ucv-icon-mark" style={{ color: color, background: `color-mix(in oklab, ${color} 12%, var(--c-bg-2))` }}>
        {icon}
      </div>
      <div>
        <div className="ucv-icon-label">{label}</div>
        {value && <div className="ucv-icon-val">{value}</div>}
      </div>
    </div>
  );
}

function GrowthCurve({ pts, baseline, label }) {
  /* pts: child weights at each month; baseline: WHO 50th %ile */
  const w = 200, h = 50;
  const all = [...pts, ...baseline];
  const max = Math.max(...all), min = Math.min(...all), range = (max - min) || 1;
  const norm = pts.map(p => (p - min) / range);
  const baseN = baseline.map(p => (p - min) / range);
  const path = norm.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (pts.length - 1)) * w} ${h - v * h}`).join(" ");
  const basePath = baseN.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (baseN.length - 1)) * w} ${h - v * h}`).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h + 2}`} preserveAspectRatio="none" style={{ width: "100%", height: h + 4 }}>
      <path d={`${basePath} L ${w} ${h} L 0 ${h} Z`} fill="color-mix(in oklab, var(--c-mute) 14%, transparent)" />
      <path d={basePath} stroke="var(--c-mute)" strokeWidth="1" strokeDasharray="3 3" fill="none" />
      <path d={path} stroke="var(--c-brand)" strokeWidth="1.8" fill="none" strokeLinecap="round" />
      <circle cx={w} cy={h - norm[norm.length - 1] * h} r="2.6" fill="var(--c-brand-deep)" />
    </svg>
  );
}

function StagePager({ stages, current }) {
  return (
    <div className="ucv-stages">
      {stages.map((s, i) => (
        <div key={i} className={"ucv-stage" + (i === current ? " is-current" : "") + (i < current ? " is-done" : "")}>
          <div className="ucv-stage-num">{i + 1}</div>
          <div className="ucv-stage-label">{s}</div>
        </div>
      ))}
    </div>
  );
}

function CalDots({ rows }) {
  /* rows: [{l: label, d: dots: '✓✓✓·'}] */
  return (
    <div className="ucv-caldots">
      {rows.map((r, i) => (
        <div key={i} className="ucv-caldots-row">
          <span className="ucv-caldots-label">{r.l}</span>
          <span className="ucv-caldots-dots">
            {r.d.split("").map((c, j) => (
              <span key={j} className={"ucv-caldot" + (c === "✓" ? " is-done" : c === "!" ? " is-flag" : "")} />
            ))}
          </span>
        </div>
      ))}
    </div>
  );
}

/* ===============================================================
   USE CASES — Adults (25–50)
=============================================================== */

const ADULTS = [
  { id: "cycle", title: "Cycle tracking", eyebrow: "PRIVATE",
    Viz: () => (
      <div className="ucv-flex-mid">
        <RingProgress value={14} total={28} center="14" sub="day 14 / 28" />
        <BarRow bars={[
          { l: "flow", v: 3, t: "med" },
          { l: "pain", v: 2, t: "low" },
          { l: "mood", v: 4, t: "ok" },
        ]} max={5} />
      </div>
    ),
  },
  { id: "hb", title: "Hemoglobin", flag: { t: "↓ 11.4", k: "warn" }, eyebrow: "5 YR · CBC",
    Viz: () => <><Spark points={[13.2, 13.0, 12.6, 12.1, 11.8, 11.4]} color="var(--c-accent)" />
      <div className="ucv-axis"><span>2021</span><span>g/dL</span><span>2026</span></div></>,
  },
  { id: "b12d3", title: "B12 & D3", eyebrow: "DEFICIENCY",
    Viz: () => <MultiSpark lines={[
      { label: "B12 (pg/mL)", points: [180, 220, 260, 310, 340], color: "var(--c-brand)" },
      { label: "D3 (ng/mL)",  points: [12, 16, 22, 28, 34], color: "var(--c-accent)" },
    ]} />,
  },
  { id: "thyroid", title: "Thyroid panel", eyebrow: "TSH · T3 · T4",
    Viz: () => <MultiSpark lines={[
      { label: "TSH", points: [4.2, 5.8, 6.4, 4.0, 3.1, 2.8], color: "var(--c-brand-deep)" },
      { label: "T3",  points: [1.0, 0.9, 0.95, 1.1, 1.15, 1.2], color: "var(--c-brand)" },
      { label: "T4",  points: [5.0, 4.6, 4.8, 5.3, 5.5, 5.7], color: "var(--c-accent)" },
    ]} />,
  },
  { id: "pcod", title: "PCOD / PCOS", eyebrow: "HORMONES",
    Viz: () => <BarRow bars={[
      { l: "LH / FSH", v: 2.4, t: "↑" },
      { l: "AMH",      v: 6.1, t: "↑" },
      { l: "Testos.",  v: 0.8, t: "·" },
      { l: "Insulin",  v: 22,  t: "↑" },
    ]} max={25} />,
  },
  { id: "oncology", title: "Oncology", eyebrow: "CHEMO + CA-125",
    Viz: () => (
      <div className="ucv-flex-col">
        <Spark points={[420, 380, 290, 210, 140, 90]} color="var(--c-brand-deep)" height={32} />
        <div className="ucv-cyc">
          {Array.from({ length: 6 }).map((_, i) => <span key={i} className={"ucv-cyc-dot" + (i < 4 ? " is-done" : "")} />)}
          <span className="ucv-cyc-label">cycle 4/6</span>
        </div>
      </div>
    ),
  },
  { id: "lipid", title: "Cholesterol", flag: { t: "↑ +30%", k: "warn" }, eyebrow: "5 YR · LDL",
    Viz: () => <><Spark points={[120, 132, 145, 152, 168, 178]} color="var(--c-accent)" />
      <div className="ucv-axis"><span>2021</span><span>mg/dL</span><span>2026</span></div></>,
  },
  { id: "diabetes", title: "Diabetes risk", eyebrow: "HBA1C",
    Viz: () => (
      <div className="ucv-flex-col">
        <Spark points={[5.2, 5.4, 5.7, 5.9, 6.1, 6.3]} color="var(--c-accent)" height={32} />
        <BarRow bars={[
          { l: "fasting", v: 108, t: "108" },
          { l: "PPBS",    v: 168, t: "168" },
        ]} max={200} color="var(--c-brand)" />
      </div>
    ),
  },
  { id: "ivf", title: "IVF protocol", eyebrow: "CYCLE 2",
    Viz: () => <StagePager stages={["Stim", "Trigger", "Retrieval", "Transfer", "Test"]} current={3} />,
  },
  { id: "prenatal", title: "Prenatal", eyebrow: "WEEK 24",
    Viz: () => (
      <div className="ucv-flex-col">
        <RingProgress value={24} total={40} center="24" sub="week 24 / 40" />
        <ChipCloud dense chips={[
          { t: "BP 110/72", k: "ok" },
          { t: "iron ✓", k: "ok" },
          { t: "anomaly ✓", k: "ok" },
        ]} />
      </div>
    ),
  },
  { id: "mental", title: "Mental-health meds", eyebrow: "CONTINUITY",
    Viz: () => <DotRow items={[
      { label: "Escitalopram 10mg", status: "done", value: "1y" },
      { label: "→ 20mg",            status: "done", value: "6mo" },
      { label: "+ Clonazepam SOS",  status: "due",  value: "now" },
    ]} />,
  },
  { id: "eye", title: "Eye prescription", eyebrow: "YEAR ON YEAR",
    Viz: () => (
      <div className="ucv-flex-col">
        <EyeMeter left="-2.25" right="-2.00" />
        <Spark points={[-1.5, -1.75, -2.0, -2.25]} color="var(--c-brand-deep)" height={26} />
      </div>
    ),
  },
  { id: "bone", title: "Bone health", eyebrow: "DEXA · T-SCORE",
    Viz: () => (
      <div className="ucv-flex-col">
        <Spark points={[-0.4, -0.6, -0.9, -1.2, -1.4]} color="var(--c-accent)" height={28} />
        <BarRow bars={[
          { l: "calcium", v: 8.4, t: "8.4" },
          { l: "vit D",   v: 22,  t: "22" },
        ]} max={50} />
      </div>
    ),
  },
  { id: "allergy", title: "Allergies", eyebrow: "CONFIRMED",
    Viz: () => <ChipCloud chips={[
      { t: "Penicillin", k: "warn" },
      { t: "Sulfa",      k: "warn" },
      { t: "Peanuts",    k: "warn" },
      { t: "Dust mites", k: "warn" },
    ]} />,
  },
  { id: "sports", title: "Sports injury", eyebrow: "MRI · PHYSIO",
    Viz: () => (
      <div className="ucv-body-row">
        <BodyMap marks={[
          { x: 50, y: 60, kind: "flag" },
          { x: 50, y: 80, kind: "flag" },
        ]} />
        <DotRow items={[
          { label: "ACL partial", status: "flagged", value: "MRI" },
          { label: "Physio 8/12", status: "done" },
        ]} />
      </div>
    ),
  },
  { id: "ayurveda", title: "Ayurveda + GP", eyebrow: "INTEGRATIVE",
    Viz: () => (
      <div className="ucv-flex-col">
        <CalDots rows={[
          { l: "GP",      d: "✓·✓·" },
          { l: "Vaidya",  d: "·✓·✓✓" },
          { l: "Homeo",   d: "·✓···" },
        ]} />
        <ChipCloud dense chips={[
          { t: "Kashayam", k: "brand" },
          { t: "Allopathy", k: "brand" },
        ]} />
      </div>
    ),
  },
];

/* ===============================================================
   USE CASES — Children (0–18)
=============================================================== */

const CHILDREN = [
  { id: "vaccines", title: "Vaccine schedule", flag: { t: "1 due", k: "warn" }, eyebrow: "BIRTH → 18",
    Viz: () => <DotRow items={[
      { label: "MMR", status: "done" },
      { label: "DTwP booster", status: "done" },
      { label: "Tdap booster", status: "due", value: "Sep 14" },
    ]} />,
  },
  { id: "growth", title: "Growth chart", eyebrow: "WHO 50TH %ILE",
    Viz: () => (
      <div className="ucv-flex-col">
        <GrowthCurve
          pts={[7.2, 8.4, 9.6, 11.0, 12.4, 13.8]}
          baseline={[7.0, 8.5, 10.1, 11.6, 13.0, 14.2]}
        />
        <div className="ucv-axis"><span>1y</span><span>kg</span><span>6y</span></div>
      </div>
    ),
  },
  { id: "antibiotics", title: "Antibiotic history", eyebrow: "WHAT WORKED",
    Viz: () => <DotRow items={[
      { label: "Amoxicillin",  status: "done",    value: "5d ✓" },
      { label: "Azithromycin", status: "done",    value: "3d ✓" },
      { label: "Cefixime",     status: "flagged", value: "rash" },
    ]} />,
  },
  { id: "school", title: "School certificate", eyebrow: "READY · PDF",
    Viz: () => <DocGlyph
      kind="ANNUAL · CLASS 3"
      title="Arjun · fitness ✓"
      items={[["Vision", "6/6"], ["Weight", "24 kg"], ["BMI", "16.1"]]}
    />,
  },
  { id: "visit", title: "Pediatric visits", eyebrow: "VERBATIM",
    Viz: () => (
      <div className="ucv-visit">
        <div className="ucv-visit-eyebrow">12 AUG · DR. SHAH</div>
        <div className="ucv-visit-q">“Viral. Stay home 48h. Recheck if fever after Wed.”</div>
      </div>
    ),
  },
  { id: "kid-allergy", title: "Child allergies", eyebrow: "SCHOOL/CAMP",
    Viz: () => <ChipCloud chips={[
      { t: "Peanuts", k: "warn" },
      { t: "Eggs",    k: "warn" },
      { t: "Dust",    k: "warn" },
    ]} />,
  },
  { id: "myopia", title: "Myopia progression", eyebrow: "YEAR ON YEAR",
    Viz: () => (
      <div className="ucv-flex-col">
        <EyeMeter left="-1.50" right="-1.25" />
        <Spark points={[-0.25, -0.75, -1.0, -1.25, -1.50]} color="var(--c-accent)" height={26} />
      </div>
    ),
  },
  { id: "dental", title: "Dental development", eyebrow: "MILK → PERMANENT",
    Viz: () => <ToothRow flagged={[
      { row: 0, col: 3, kind: "lost" },
      { row: 0, col: 12, kind: "lost" },
      { row: 1, col: 8, kind: "flag" },
    ]} />,
  },
  { id: "milestones", title: "Milestones", eyebrow: "SPEECH · MOTOR",
    Viz: () => <DotRow items={[
      { label: "Walked",           status: "done", value: "14 mo" },
      { label: "2-word phrases",   status: "done", value: "20 mo" },
      { label: "Hops on 1 foot",   status: "due",  value: "review" },
    ]} />,
  },
  { id: "recurring", title: "Recurring illness", flag: { t: "winter", k: "brand" }, eyebrow: "PATTERN",
    Viz: () => <HeatCal weeks={6} days={7} max={3} data={[
      [0,1,2,3,1,0,0], [0,0,0,0,0,0,0], [0,0,0,0,1,2,3], [2,1,0,0,0,0,0], [0,0,0,0,1,2,3], [2,1,0,0,0,0,0]
    ]} />,
  },
  { id: "ent", title: "ENT history", eyebrow: "EARS · TONSILS",
    Viz: () => <DotRow items={[
      { label: "Otitis × 4", status: "flagged", value: "yr 3-5" },
      { label: "Tonsillitis × 2", status: "flagged", value: "yr 5" },
      { label: "Hearing", status: "done", value: "normal" },
    ]} />,
  },
  { id: "nutrition", title: "Nutrition", eyebrow: "IRON · PROTEIN",
    Viz: () => (
      <div className="ucv-flex-col">
        <BarRow bars={[
          { l: "iron",    v: 8, t: "↓ low" },
          { l: "protein", v: 28, t: "ok" },
          { l: "B12",     v: 320, t: "ok" },
        ]} max={400} />
      </div>
    ),
  },
];

/* ===============================================================
   USE CASES — Elder care (60+)
=============================================================== */

const ELDERS = [
  { id: "meds", title: "Multi-medication", flag: { t: "9 daily", k: "brand" }, eyebrow: "3 SPECIALISTS",
    Viz: () => <PillGrid pills={[
      { n: "Telmisartan", t: "AM",    c: "var(--c-brand)" },
      { n: "Metformin",   t: "AM/PM", c: "var(--c-brand-deep)" },
      { n: "Atorvastatin",t: "PM",    c: "var(--c-accent)" },
      { n: "Aspirin",     t: "AM",    c: "var(--c-brand)" },
      { n: "Eltroxin",    t: "AM",    c: "var(--c-brand-deep)" },
      { n: "Vit D",       t: "wk",    c: "var(--c-accent)" },
    ]} />,
  },
  { id: "cardiac", title: "Cardiac", flag: { t: "BP 142/88", k: "warn" }, eyebrow: "ECG · ECHO · BP",
    Viz: () => (
      <div className="ucv-flex-col">
        <Spark points={[128, 132, 138, 136, 140, 142]} color="var(--c-accent)" height={28} />
        <BarRow bars={[
          { l: "HR",  v: 76, t: "76" },
          { l: "EF",  v: 58, t: "58%" },
        ]} max={100} />
      </div>
    ),
  },
  { id: "elder-diabetes", title: "Diabetes (HbA1c)", eyebrow: "DECADE TREND",
    Viz: () => <><Spark points={[7.2, 7.6, 8.1, 7.8, 7.4, 7.0, 6.8]} color="var(--c-brand-deep)" />
      <div className="ucv-axis"><span>2018</span><span>%</span><span>2026</span></div></>,
  },
  { id: "kidney", title: "Kidney function", flag: { t: "eGFR ↓", k: "warn" }, eyebrow: "CREATININE",
    Viz: () => <Spark points={[78, 74, 70, 68, 64, 60, 58]} color="var(--c-accent)" />,
  },
  { id: "specialists", title: "4 specialists", eyebrow: "ONE TIMELINE",
    Viz: () => (
      <div className="ucv-doc-mosaic">
        {[
          { l: "GP",      c: "#2563eb" },
          { l: "Cardio",  c: "#dc2626" },
          { l: "Nephro",  c: "#7c3aed" },
          { l: "Endo",    c: "#0891b2" },
        ].map((d, i) => (
          <div key={i} className="ucv-doc-tile" style={{ borderLeft: "3px solid " + d.c }}>
            <span style={{ background: d.c }} />
            {d.l}
          </div>
        ))}
      </div>
    ),
  },
  { id: "discharge", title: "Discharge summary", eyebrow: "INDEXED",
    Viz: () => <DocGlyph
      kind="APOLLO · 22 AUG"
      title="Acute GE"
      items={[["Dx", "Gastroenteritis"], ["F/U", "5d Dr. Sahu"], ["Meds", "ORS + ondans."]]}
    />,
  },
  { id: "screening", title: "Cancer screening", eyebrow: "SCHEDULE",
    Viz: () => <DotRow items={[
      { label: "Mammogram",    status: "done", value: "2025" },
      { label: "Colonoscopy",  status: "done", value: "2023" },
      { label: "PSA",          status: "due",  value: "Oct" },
    ]} />,
  },
  { id: "cataract", title: "Cataract surgery", eyebrow: "IOL POWER",
    Viz: () => (
      <div className="ucv-flex-col">
        <EyeMeter left="IOL+21" right="next" />
        <DotRow items={[
          { label: "OD · phacoemul.", status: "done", value: "Mar" },
          { label: "OS · scheduled",  status: "due",  value: "Nov" },
        ]} />
      </div>
    ),
  },
  { id: "ortho", title: "Orthopedic", eyebrow: "DEXA · X-RAY",
    Viz: () => (
      <div className="ucv-body-row">
        <BodyMap marks={[
          { x: 38, y: 68, kind: "flag", r: 2.6 },
          { x: 62, y: 68, kind: "flag", r: 2.6 },
        ]} />
        <DotRow items={[
          { label: "Knee X-ray",  status: "flagged", value: "OA Gr 2" },
          { label: "DEXA T-score", status: "flagged", value: "-2.1" },
        ]} />
      </div>
    ),
  },
  { id: "neuro", title: "Neurology", eyebrow: "MRI · MMSE",
    Viz: () => (
      <div className="ucv-flex-col">
        <IconGlyph
          color="#7c3aed"
          icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 4c-2 0-3 1-3 3 0 1-1 1-1 2 0 2 1 3 3 3v2c-1 0-2 1-2 3 0 2 2 3 4 3 1 0 2-1 2-2v-9c0-3-1-5-3-5z"/><path d="M15 4c2 0 3 1 3 3 0 1 1 1 1 2 0 2-1 3-3 3v2c1 0 2 1 2 3 0 2-2 3-4 3-1 0-2-1-2-2v-9c0-3 1-5 3-5z"/></svg>}
          label="MMSE 26 / 30"
          value="mild decline"
        />
        <Spark points={[30, 29, 28, 27, 26]} color="#7c3aed" height={24} />
      </div>
    ),
  },
  { id: "caregiver", title: "Caregiver access", eyebrow: "CONTROLLED",
    Viz: () => <DotRow items={[
      { label: "Priya · owner",   status: "done", value: "all" },
      { label: "Anand · view+add",status: "done", value: "share" },
      { label: "Lata · view only",status: "done", value: "limited" },
    ]} />,
  },
  { id: "emergency", title: "Emergency · 1 tap", eyebrow: "ER-READY",
    Viz: () => (
      <div className="ucv-er">
        <div className="ucv-er-head">
          <span>AMMA · 62</span><span className="ucv-er-bg">B+</span>
        </div>
        <div className="ucv-er-rows">
          <div><b>Allergies</b><span>Penicillin, Sulfa</span></div>
          <div><b>Conditions</b><span>HTN, T2 DM</span></div>
        </div>
      </div>
    ),
  },
  { id: "ayur-allo", title: "Ayurveda + allopathy", eyebrow: "SIDE BY SIDE",
    Viz: () => <CalDots rows={[
      { l: "GP",     d: "✓·✓·✓" },
      { l: "Vaidya", d: "·✓·✓·✓" },
      { l: "Panchk.",d: "···✓·" },
    ]} />,
  },
  { id: "elder-nutrition", title: "Nutrition", eyebrow: "B12 · CA · D3",
    Viz: () => <BarRow bars={[
      { l: "B12", v: 280, t: "↑" },
      { l: "Ca",  v: 9.1, t: "ok" },
      { l: "D3",  v: 18,  t: "↓" },
    ]} max={400} />,
  },
  { id: "sleep", title: "Sleep apnea", eyebrow: "CPAP",
    Viz: () => <DocGlyph
      kind="POLYSOMNOGRAPHY"
      title="AHI 28 · severe"
      items={[["CPAP", "9 cmH₂O"], ["Mask", "nasal"], ["Use", "6.4 h/n"]]}
    />,
  },
];

/* ===============================================================
   USE CASES — Pets
=============================================================== */

const PETS = [
  { id: "pet-vaccines", title: "Vaccines", flag: { t: "on time", k: "ok" }, eyebrow: "DHPP · RABIES",
    Viz: () => <DotRow items={[
      { label: "DHPP",         status: "done", value: "yearly" },
      { label: "Rabies",       status: "done", value: "3-yr" },
      { label: "Kennel cough", status: "due",  value: "Oct" },
    ]} />,
  },
  { id: "deworm", title: "Deworming", eyebrow: "QUARTERLY",
    Viz: () => (
      <div className="ucv-quarters">
        {["Q1", "Q2", "Q3", "Q4"].map((q, i) => {
          const done = i < 3;
          return (
            <div key={i} className={"ucv-quarter" + (done ? " is-done" : "")}>
              <div>{q}</div>
              <div>{done ? "✓" : "due"}</div>
            </div>
          );
        })}
      </div>
    ),
  },
  { id: "wellness", title: "Annual wellness", eyebrow: "BLOODWORK · DENTAL",
    Viz: () => <DotRow items={[
      { label: "CBC",    status: "done", value: "ok" },
      { label: "Dental", status: "done", value: "grade 1" },
      { label: "Weight", status: "done", value: "12.4kg" },
    ]} />,
  },
  { id: "pet-weight", title: "Weight tracking", flag: { t: "12.4 kg", k: "brand" }, eyebrow: "18 MO",
    Viz: () => <Spark points={[10.2, 11.0, 11.6, 11.9, 12.3, 12.4]} color="var(--c-brand)" />,
  },
  { id: "chronic", title: "Chronic conditions", eyebrow: "DAILY MEDS",
    Viz: () => <PillGrid pills={[
      { n: "L-thyroxine", t: "AM", c: "var(--c-brand)" },
      { n: "Vetmedin",    t: "BID", c: "var(--c-accent)" },
      { n: "Omega 3",     t: "AM",  c: "var(--c-brand-deep)" },
    ]} />,
  },
  { id: "pet-dental", title: "Dental cleaning", eyebrow: "EXTRACTIONS",
    Viz: () => <ToothRow flagged={[
      { row: 0, col: 2, kind: "lost" },
      { row: 0, col: 14, kind: "lost" },
      { row: 1, col: 7, kind: "flag" },
    ]} />,
  },
  { id: "pet-allergy", title: "Allergies", eyebrow: "ELIMINATION",
    Viz: () => <ChipCloud chips={[
      { t: "Chicken", k: "warn" },
      { t: "Beef",    k: "warn" },
      { t: "Pollen",  k: "warn" },
      { t: "Hydrolyzed ✓", k: "ok" },
    ]} />,
  },
  { id: "surgery", title: "Surgery records", eyebrow: "NEUTER · ORTHO",
    Viz: () => <Timeline steps={[
      { label: "Neuter", done: true },
      { label: "Cruciate repair", done: true },
      { label: "Post-op rehab", current: true },
    ]} />,
  },
  { id: "pet-oncology", title: "Oncology", eyebrow: "TUMOUR SIZE",
    Viz: () => (
      <div className="ucv-flex-col">
        <Spark points={[18, 14, 11, 9, 8, 8]} color="var(--c-brand-deep)" height={32} />
        <div className="ucv-cyc">
          {Array.from({ length: 6 }).map((_, i) => <span key={i} className={"ucv-cyc-dot" + (i < 5 ? " is-done" : "")} />)}
          <span className="ucv-cyc-label">5 / 6 sessions</span>
        </div>
      </div>
    ),
  },
  { id: "breed", title: "Breed screening", eyebrow: "HIP · ELBOW",
    Viz: () => <BarRow bars={[
      { l: "Hip L",   v: 1, t: "A" },
      { l: "Hip R",   v: 2, t: "B" },
      { l: "Elbow L", v: 0, t: "0" },
      { l: "Elbow R", v: 0, t: "0" },
    ]} max={4} />,
  },
  { id: "senior-blood", title: "Senior bloodwork", eyebrow: "BI-ANNUAL",
    Viz: () => <DotRow items={[
      { label: "Kidney (BUN)",   status: "flagged", value: "↑" },
      { label: "Liver (ALT)",    status: "done",    value: "ok" },
      { label: "Thyroid (T4)",   status: "flagged", value: "↓" },
    ]} />,
  },
  { id: "pet-emergency", title: "Emergency / boarding", eyebrow: "ONE LINK",
    Viz: () => (
      <div className="ucv-er">
        <div className="ucv-er-head">
          <span>BRUNO · 4y</span><span className="ucv-er-bg">DEA 1+</span>
        </div>
        <div className="ucv-er-rows">
          <div><b>Microchip</b><span>9001 2245 11</span></div>
          <div><b>Vet</b><span>Dr. Iyer · CR Park</span></div>
        </div>
      </div>
    ),
  },
];

window.UCV = { UCFrame, ADULTS, CHILDREN, ELDERS, PETS };

/* ---------- CSS for all .ucv-* primitives (injected once) ---------- */
(function injectUCVStyles() {
  if (typeof document === "undefined" || document.getElementById("__ucv_styles")) return;
  const s = document.createElement("style");
  s.id = "__ucv_styles";
  s.textContent = `
    .ucv-card {
      background: var(--c-card);
      border: 1px solid var(--c-line);
      border-radius: 14px;
      padding: 12px 12px 12px;
      display: flex; flex-direction: column; gap: 10px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
      min-height: 178px;
    }
    .ucv-card:hover {
      transform: translateY(-2px);
      border-color: color-mix(in oklab, var(--c-brand) 24%, var(--c-line));
      box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 14px 28px rgba(11,21,48,.06);
    }
    .ucv-card-head { display: flex; flex-direction: column; gap: 4px; }
    .ucv-eyebrow {
      font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
      color: var(--c-mute); text-transform: uppercase;
    }
    .ucv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .ucv-title {
      font-family: var(--serif); font-weight: 600;
      font-size: 14px; color: var(--c-ink); letter-spacing: -0.01em;
      line-height: 1.15;
    }
    .ucv-flag {
      font-family: var(--mono); font-size: 9.5px;
      padding: 2px 6px; border-radius: 99px; flex-shrink: 0; letter-spacing: .02em;
    }
    .ucv-flag--ok    { background: color-mix(in oklab, var(--c-brand) 14%, transparent);      color: var(--c-brand-deep); }
    .ucv-flag--warn  { background: color-mix(in oklab, var(--c-accent) 14%, transparent);     color: var(--c-accent); }
    .ucv-flag--brand { background: color-mix(in oklab, var(--c-brand-deep) 14%, transparent); color: var(--c-brand-deep); }

    .ucv-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
    .ucv-flex-col { display: flex; flex-direction: column; gap: 6px; }
    .ucv-flex-mid { display: flex; align-items: center; gap: 10px; }
    .ucv-axis {
      display: flex; justify-content: space-between;
      font-family: var(--mono); font-size: 9.5px; color: var(--c-mute);
    }

    /* legend */
    .ucv-legend {
      display: flex; flex-wrap: wrap; gap: 8px;
      font-family: var(--mono); font-size: 9.5px; color: var(--c-ink-2);
      margin-top: 4px;
    }
    .ucv-legend-item { display: inline-flex; align-items: center; gap: 4px; }
    .ucv-legend-dot { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }

    /* ring */
    .ucv-ring-row { display: flex; align-items: center; gap: 10px; }
    .ucv-ring-sub { font-size: 11.5px; color: var(--c-ink-2); }

    /* list rows */
    .ucv-list { display: flex; flex-direction: column; gap: 5px; }
    .ucv-list-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
    .ucv-status {
      width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center;
      font-size: 10px; font-weight: 700; flex-shrink: 0;
    }
    .ucv-status--done    { background: color-mix(in oklab, var(--c-brand) 18%, transparent);  color: var(--c-brand-deep); }
    .ucv-status--due     { background: color-mix(in oklab, var(--c-accent) 18%, transparent); color: var(--c-accent); }
    .ucv-status--flagged { background: color-mix(in oklab, #dc2626 18%, transparent);          color: #dc2626; }
    .ucv-list-label { flex: 1; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ucv-list-val { font-family: var(--mono); font-size: 10.5px; color: var(--c-mute); flex-shrink: 0; }

    /* bars */
    .ucv-bars { display: flex; flex-direction: column; gap: 4px; }
    .ucv-bar-row { display: grid; grid-template-columns: 52px 1fr 30px; gap: 6px; align-items: center; font-size: 11px; }
    .ucv-bar-label { color: var(--c-ink-2); font-family: var(--mono); font-size: 10px; }
    .ucv-bar-track { height: 6px; background: color-mix(in oklab, var(--c-brand) 8%, var(--c-bg-2)); border-radius: 99px; overflow: hidden; }
    .ucv-bar-fill  { height: 100%; border-radius: 99px; transition: width .4s; }
    .ucv-bar-val   { font-family: var(--mono); font-size: 10px; color: var(--c-ink-2); text-align: right; }

    /* chips */
    .ucv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .ucv-chips.is-dense .ucv-chip { padding: 2px 7px; font-size: 10px; }
    .ucv-chip {
      font-family: var(--mono); font-size: 11px;
      padding: 3px 8px; border-radius: 99px;
      background: color-mix(in oklab, var(--c-brand) 10%, transparent);
      color: var(--c-brand-deep);
      letter-spacing: .01em;
    }
    .ucv-chip--warn  { background: color-mix(in oklab, #dc2626 12%, transparent); color: #b1281e; }
    .ucv-chip--brand { background: color-mix(in oklab, var(--c-brand-deep) 14%, transparent); color: var(--c-brand-deep); }
    .ucv-chip--ok    { background: color-mix(in oklab, var(--c-brand) 16%, transparent); color: var(--c-brand-deep); }

    /* timeline */
    .ucv-tl { position: relative; padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
    .ucv-tl-line { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1.5px; background: var(--c-line); }
    .ucv-tl-step { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--c-ink); }
    .ucv-tl-dot {
      width: 9px; height: 9px; border-radius: 99px;
      background: var(--c-bg-2); border: 1.5px solid var(--c-line);
      position: relative; left: -8px; flex-shrink: 0;
    }
    .ucv-tl-dot.is-done    { background: var(--c-brand-deep); border-color: var(--c-brand-deep); }
    .ucv-tl-dot.is-current { background: var(--c-brand); border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-brand) 30%, transparent); }
    .ucv-tl-label { color: var(--c-ink); font-size: 12px; }

    /* pills */
    .ucv-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .ucv-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 6px; border-radius: 6px;
      background: color-mix(in oklab, var(--c-brand) 6%, var(--c-bg-2));
      font-size: 10.5px;
    }
    .ucv-pill-glyph {
      width: 14px; height: 7px; border-radius: 99px;
      flex-shrink: 0;
    }
    .ucv-pill-name { color: var(--c-ink); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ucv-pill-time { font-family: var(--mono); font-size: 9.5px; color: var(--c-mute); }

    /* body map */
    .ucv-body { display: grid; place-items: center; }
    .ucv-body-row { display: flex; align-items: center; gap: 10px; }

    /* teeth */
    .ucv-teeth { display: flex; flex-direction: column; gap: 3px; }
    .ucv-teeth-row {
      display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;
    }
    .ucv-tooth {
      height: 10px; border-radius: 40% 40% 30% 30% / 60% 60% 40% 40%;
      background: var(--c-bg-2);
      border: 1px solid var(--c-line);
    }
    .ucv-tooth--flag { background: #dc2626; border-color: #b1281e; }
    .ucv-tooth--lost { background: var(--c-card); border: 1px dashed var(--c-mute); }

    /* eye */
    .ucv-eye { display: flex; align-items: center; gap: 10px; justify-content: center; }
    .ucv-eye-val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--c-ink); text-align: center; }
    .ucv-eye-side { font-family: var(--mono); font-size: 9.5px; color: var(--c-mute); text-align: center; letter-spacing: .14em; }

    /* heat grid */
    .ucv-heat { display: grid; gap: 2px; }
    .ucv-heat-col { display: flex; flex-direction: column; gap: 2px; }
    .ucv-heat-cell { display: block; height: 7px; border-radius: 1.5px; }

    /* doc glyph */
    .ucv-doc {
      background: color-mix(in oklab, var(--c-bg-2) 60%, transparent);
      border: 1px solid var(--c-line); border-radius: 8px;
      padding: 8px 10px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ucv-doc-eyebrow { font-family: var(--mono); font-size: 9.5px; color: var(--c-brand-deep); letter-spacing: .12em; text-transform: uppercase; }
    .ucv-doc-title { font-family: var(--serif); font-weight: 600; font-size: 12.5px; color: var(--c-ink); }
    .ucv-doc-rows { display: flex; flex-direction: column; gap: 2px; }
    .ucv-doc-row {
      display: flex; justify-content: space-between; font-family: var(--mono);
      font-size: 10.5px; color: var(--c-ink-2);
    }
    .ucv-doc-row b { color: var(--c-ink); }

    /* icon glyph */
    .ucv-icon-row { display: flex; align-items: center; gap: 10px; }
    .ucv-icon-mark {
      width: 36px; height: 36px; border-radius: 8px;
      display: grid; place-items: center; flex-shrink: 0;
    }
    .ucv-icon-label { font-size: 12px; color: var(--c-ink); font-weight: 500; }
    .ucv-icon-val { font-family: var(--mono); font-size: 10px; color: var(--c-mute); }

    /* cycle dots */
    .ucv-cyc { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .ucv-cyc-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--c-bg-2); border: 1px solid var(--c-line); }
    .ucv-cyc-dot.is-done { background: var(--c-brand-deep); border-color: var(--c-brand-deep); }
    .ucv-cyc-label { font-family: var(--mono); font-size: 9.5px; color: var(--c-mute); margin-left: 4px; }

    /* stages pager */
    .ucv-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
    .ucv-stage {
      padding: 6px 2px; text-align: center;
      background: var(--c-bg-2); border-radius: 5px;
      font-family: var(--mono); font-size: 9.5px; color: var(--c-mute);
    }
    .ucv-stage.is-done { background: color-mix(in oklab, var(--c-brand) 14%, transparent); color: var(--c-brand-deep); }
    .ucv-stage.is-current { background: var(--c-brand); color: white; box-shadow: 0 2px 6px color-mix(in oklab, var(--c-brand) 30%, transparent); }
    .ucv-stage-num { font-weight: 700; font-size: 11px; }
    .ucv-stage-label { font-size: 8.5px; margin-top: 2px; }

    /* cal dots rows */
    .ucv-caldots { display: flex; flex-direction: column; gap: 4px; }
    .ucv-caldots-row { display: flex; align-items: center; gap: 8px; }
    .ucv-caldots-label { font-family: var(--mono); font-size: 10px; color: var(--c-mute); width: 50px; letter-spacing: .04em; text-transform: uppercase; }
    .ucv-caldots-dots { display: flex; gap: 3px; }
    .ucv-caldot { width: 9px; height: 9px; border-radius: 2px; background: var(--c-bg-2); border: 1px solid var(--c-line); }
    .ucv-caldot.is-done { background: var(--c-brand); border-color: var(--c-brand); }
    .ucv-caldot.is-flag { background: var(--c-accent); border-color: var(--c-accent); }

    /* doctor mosaic */
    .ucv-doc-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .ucv-doc-tile {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 7px; background: var(--c-bg-2); border-radius: 5px;
      font-family: var(--mono); font-size: 10.5px; color: var(--c-ink);
    }
    .ucv-doc-tile > span:first-child { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }

    /* visit quote */
    .ucv-visit { border-left: 3px solid var(--c-brand); padding-left: 10px; }
    .ucv-visit-eyebrow { font-family: var(--mono); font-size: 9.5px; color: var(--c-brand-deep); letter-spacing: .12em; }
    .ucv-visit-q { font-family: var(--serif); font-size: 12.5px; line-height: 1.35; color: var(--c-ink); margin-top: 4px; }

    /* ER card */
    .ucv-er {
      background: linear-gradient(135deg, var(--c-ink), var(--c-slate));
      color: var(--c-bg); border-radius: 8px; padding: 10px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .ucv-er-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; opacity: 0.85; }
    .ucv-er-bg { background: #dc2626; color: white; padding: 1px 7px; border-radius: 99px; font-weight: 700; }
    .ucv-er-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 10.5px; }
    .ucv-er-rows b { font-family: var(--mono); font-size: 9.5px; opacity: 0.6; letter-spacing: .1em; display: block; }

    /* quarters (deworm) */
    .ucv-quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .ucv-quarter {
      padding: 8px 4px; text-align: center;
      background: var(--c-bg-2); border-radius: 6px;
      font-family: var(--mono); font-size: 10px; color: var(--c-mute);
      border: 1px dashed var(--c-line);
    }
    .ucv-quarter.is-done {
      background: color-mix(in oklab, var(--c-brand) 14%, transparent);
      border-color: color-mix(in oklab, var(--c-brand) 40%, var(--c-line));
      color: var(--c-brand-deep);
    }
    .ucv-quarter > div:first-child { font-weight: 700; font-size: 11px; }
  `;
  document.head.appendChild(s);
})();