// LeaveTrackerLite — app shell (sidebar, header, summary cards, drawer)

const NAV = [
  { key: "dashboard", label: "Dashboard",      icon: "ph-squares-four" },
  { key: "cases",     label: "Leave Cases",    icon: "ph-folders" },
  { key: "attention", label: "Needs Attention",icon: "ph-warning-circle", badge: window.CASES.filter(c => c.needsAttention).length },
  { key: "employees", label: "Employees",      icon: "ph-users-three" },
  { key: "io",        label: "Import / Export",icon: "ph-arrows-down-up" },
  { key: "settings",  label: "Settings",       icon: "ph-gear-six" },
];

function Sidebar({ active, onNav }) {
  const [hovered, setHovered] = useState(null);
  return (
    <aside style={{
      width: 236, flex: "none", background: "var(--surface)", borderRight: "1px solid var(--line)",
      display: "flex", flexDirection: "column", position: "sticky", top: 0, height: "100vh",
    }}>
      {/* Brand */}
      <div style={{ padding: "22px 20px 18px", display: "flex", alignItems: "center", gap: 11 }}>
        <span className="i" style={{ width: 34, height: 34, borderRadius: 9, background: "var(--accent)", color: "#fff", flex: "none", boxShadow: "0 2px 6px var(--accent-ring)" }}>
          <i className="ph-bold ph-calendar-check" style={{ fontSize: 19 }} />
        </span>
        <span style={{ lineHeight: 1.15 }}>
          <span style={{ display: "block", fontWeight: 700, fontSize: 16, letterSpacing: "-.01em", color: "var(--ink)" }}>LeaveTracker<span style={{ color: "var(--accent-strong)" }}>Lite</span></span>
        </span>
      </div>

      {/* Org label — static in V1 (single org; no switcher, must not imply multi-company) */}
      <div style={{ padding: "0 14px 8px" }}>
        <div style={{
          width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "9px 11px",
          background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10, textAlign: "left",
        }}>
          <span className="i" style={{ width: 26, height: 26, borderRadius: 7, background: "oklch(0.93 0.03 188)", color: "var(--accent-strong)", flex: "none", fontWeight: 700, fontSize: 12 }}>NG</span>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ display: "block", fontSize: 13, fontWeight: 600, color: "var(--ink)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>Northgate Family</span>
            <span style={{ display: "block", fontSize: 11.5, color: "var(--ink-faint)" }}>Medical Group</span>
          </span>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ padding: "10px 14px", display: "flex", flexDirection: "column", gap: 2 }}>
        {NAV.map(n => {
          const on = n.key === active;
          const hot = hovered === n.key && !on;
          return (
            <button key={n.key} onClick={() => onNav(n.key)}
              onMouseEnter={() => setHovered(n.key)} onMouseLeave={() => setHovered(h => h === n.key ? null : h)}
              style={{
              display: "flex", alignItems: "center", gap: 11, padding: "9px 11px", borderRadius: 9,
              border: "none", background: on ? "var(--accent-soft-2)" : hot ? "var(--surface-2)" : "transparent",
              color: on ? "var(--accent-deep)" : "var(--ink-2)", fontWeight: on ? 600 : 500, fontSize: 14.5,
              transition: "background .12s, color .12s",
            }}>
              <i className={(on ? "ph-fill " : "ph ") + n.icon} style={{ fontSize: 19, color: on ? "var(--accent)" : "var(--ink-3)" }} />
              <span style={{ flex: 1, textAlign: "left" }}>{n.label}</span>
              {n.badge && <span className="i tnum" style={{ minWidth: 20, height: 20, padding: "0 6px", borderRadius: 999, background: on ? "var(--accent)" : "var(--amber-soft)", color: on ? "#fff" : "var(--amber-deep)", fontSize: 11.5, fontWeight: 700 }}>{n.badge}</span>}
            </button>
          );
        })}
      </nav>

      <div style={{ marginTop: "auto", padding: 14 }}>
        <div style={{ padding: "11px 13px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10, display: "flex", gap: 9 }}>
          <i className="ph ph-shield-check" style={{ fontSize: 17, color: "var(--ink-3)", marginTop: 1 }} />
          <span style={{ fontSize: 11.5, lineHeight: 1.4, color: "var(--ink-3)" }}>Workflow tracking tool — <span style={{ color: "var(--ink-2)", fontWeight: 600 }}>not legal advice.</span></span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 4px 2px" }}>
          <Avatar initials="HM" size={30} />
          <span style={{ lineHeight: 1.2, flex: 1, minWidth: 0 }}>
            <span style={{ display: "block", fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>Helen Mercer</span>
            <span style={{ display: "block", fontSize: 11.5, color: "var(--ink-faint)" }}>HR Manager</span>
          </span>
          <i className="ph ph-dots-three" style={{ fontSize: 18, color: "var(--ink-faint)" }} />
        </div>
      </div>
    </aside>
  );
}

function Header({ title, subtitle, showDate, query, setQuery }) {
  return (
    <header style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 24, marginBottom: 22 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="i" style={{ gap: 10, justifyContent: "flex-start", marginBottom: 5 }}>
          <h1 style={{ margin: 0, fontSize: 23, fontWeight: 700, letterSpacing: "-.02em", color: "var(--ink)", whiteSpace: "nowrap" }}>{title}</h1>
          {showDate && <span style={{ fontSize: 13, color: "var(--ink-faint)", fontWeight: 500, marginTop: 4, whiteSpace: "nowrap" }}>·&nbsp;&nbsp;{window.TODAY.label}</span>}
        </div>
        <p style={{ margin: 0, fontSize: 14.5, color: "var(--ink-3)" }}>{subtitle}</p>
      </div>
      <div className="i no-print" style={{ gap: 10, flex: "none" }}>
        <div className="i" style={{ gap: 8, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 10, padding: "0 12px", height: 38, width: 248, boxShadow: "var(--shadow-card)" }}>
          <i className="ph ph-magnifying-glass" style={{ fontSize: 16, color: "var(--ink-faint)" }} />
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search people or departments"
            style={{ border: "none", outline: "none", background: "transparent", fontFamily: "inherit", fontSize: 14, color: "var(--ink)", width: "100%" }} />
          {query && <button onClick={() => setQuery("")} className="i" style={{ border: "none", background: "transparent", color: "var(--ink-faint)", padding: 0 }}><i className="ph ph-x-circle" style={{ fontSize: 15 }} /></button>}
        </div>
        <button className="i" style={{ gap: 8, height: 38, padding: "0 16px", borderRadius: 10, border: "none", background: "var(--accent)", color: "#fff", fontWeight: 600, fontSize: 14, whiteSpace: "nowrap", boxShadow: "0 2px 6px var(--accent-ring)" }}
          onMouseEnter={e => e.currentTarget.style.background = "var(--accent-strong)"}
          onMouseLeave={e => e.currentTarget.style.background = "var(--accent)"}>
          <i className="ph-bold ph-plus" style={{ fontSize: 15 }} /> New leave case
        </button>
      </div>
    </header>
  );
}

const TONE = {
  accent: { fg: "var(--accent-strong)", soft: "var(--accent-soft)", icon: "var(--accent)" },
  blue:   { fg: "var(--blue)",  soft: "var(--blue-soft)",  icon: "var(--blue)" },
  amber:  { fg: "var(--amber-deep)", soft: "var(--amber-soft)", icon: "var(--amber)" },
  rose:   { fg: "var(--rose)",  soft: "var(--rose-soft)",  icon: "var(--rose)" },
};

function SummaryCard({ card, active, onClick }) {
  const t = TONE[card.tone] || TONE.accent;
  return (
    <button onClick={() => onClick(card.filter)} style={{
      flex: 1, textAlign: "left", background: "var(--surface)", borderRadius: 14, padding: "16px 17px",
      border: "1px solid " + (active ? "transparent" : "var(--line)"),
      outline: active ? "2px solid var(--accent)" : "none", outlineOffset: -1,
      boxShadow: active ? "0 4px 14px -4px var(--accent-ring)" : "var(--shadow-card)",
      transition: "transform .12s, box-shadow .12s, outline-color .12s", position: "relative",
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-pop)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = active ? "0 4px 14px -4px var(--accent-ring)" : "var(--shadow-card)"; }}>
      <span className="i" style={{ width: 34, height: 34, borderRadius: 9, background: t.soft, marginBottom: 14 }}>
        <i className={"ph-fill " + card.icon} style={{ fontSize: 18, color: t.icon }} />
      </span>
      <div className="i tnum" style={{ gap: 7, justifyContent: "flex-start", lineHeight: 1 }}>
        <span style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-.02em", color: "var(--ink)" }}>{card.value}</span>
      </div>
      <div style={{ marginTop: 7, fontSize: 13.5, fontWeight: 600, color: "var(--ink-2)" }}>{card.label}</div>
      {card.sub && <div style={{ fontSize: 12, color: "var(--ink-faint)", marginTop: 1 }}>{card.sub}</div>}
    </button>
  );
}

function SummaryRow({ activeFilter, onPick }) {
  return (
    <div style={{ display: "flex", gap: 14, marginBottom: 22 }}>
      {window.SUMMARY.map(card => (
        <SummaryCard key={card.key} card={card}
          active={activeFilter === card.filter && card.filter !== "all" ? true : (card.filter === "all" && activeFilter === "all")}
          onClick={onPick} />
      ))}
    </div>
  );
}

/* ───────────────────────── Detail Drawer ───────────────────────── */
function Drawer({ c, onClose, vizMode }) {
  const [entries, setEntries] = useState(c ? c.activity || [] : []);
  const [logOpen, setLogOpen] = useState(false);
  const [form, setForm] = useState({ date: "Jun 8", hours: 8, paidAs: "Unpaid" });
  const [toast, setToast] = useState(null);
  const toastTimer = useRef(null);
  function ping(msg) {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2400);
  }
  useEffect(() => {
    const onKey = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  if (!c) return null;
  function saveEntry() {
    const h = parseFloat(form.hours);
    if (!form.date.trim() || !h || h <= 0) return;
    setEntries([{ date: form.date.trim(), hours: h, paidAs: form.paidAs }, ...entries]);
    setLogOpen(false);
    ping("Usage entry added ✓");
  }
  return (
    <div className="no-print" style={{ position: "fixed", inset: 0, zIndex: 100 }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "oklch(0.3 0.02 250 / 0.28)", animation: "ltl-fade .18s ease" }} />
      <div style={{
        position: "absolute", top: 0, right: 0, height: "100%", width: 452, background: "var(--surface)",
        boxShadow: "var(--shadow-pop)", display: "flex", flexDirection: "column", animation: "ltl-slide .26s cubic-bezier(.2,.8,.2,1)",
      }}>
        {/* head */}
        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--line)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
            <span style={{ fontSize: 12.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-faint)" }}>Leave case</span>
            <div className="i" style={{ gap: 12 }}>
              <button className="i" style={{ gap: 4, border: "none", background: "transparent", color: "var(--accent-strong)", fontSize: 13, fontWeight: 600, padding: 0 }}>
                View full case <i className="ph ph-arrow-right" style={{ fontSize: 13 }} />
              </button>
              <button onClick={onClose} className="i" style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink-3)" }}><i className="ph ph-x" style={{ fontSize: 16 }} /></button>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <Avatar initials={c.initials} size={50} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-.01em", color: "var(--ink)", whiteSpace: "nowrap" }}>{c.name}</div>
              <div style={{ fontSize: 13.5, color: "var(--ink-3)" }}>{c.dept} · {c.location}</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14 }}>
            <StatusChip status={c.status} />
            <TypeTag type={c.type} fmla={c.fmla} />
          </div>
        </div>

        {/* body */}
        <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px", display: "flex", flexDirection: "column", gap: 20 }}>
          {c.needsAttention && (
            <div style={{ borderRadius: 12, border: "1px solid var(--amber-soft)", background: "var(--amber-soft)", padding: "13px 15px" }}>
              <div className="i" style={{ gap: 7, justifyContent: "flex-start", marginBottom: 8, color: "var(--amber-deep)", fontWeight: 700, fontSize: 13, whiteSpace: "nowrap" }}>
                <i className="ph-fill ph-warning" style={{ fontSize: 15 }} /> Needs attention
              </div>
              <ul style={{ margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 5 }}>
                {c.attention.map((a, i) => <li key={i} style={{ fontSize: 13.5, color: "var(--amber-deep)", lineHeight: 1.4 }}>{a}</li>)}
              </ul>
            </div>
          )}

          <Field label="Timeline">
            <div className="i" style={{ gap: 0, justifyContent: "flex-start" }}>
              <Stat k="Start" v={c.start} />
              <span className="i" style={{ width: 46, color: "var(--ink-faint)" }}><i className="ph ph-arrow-right" /></span>
              <Stat k="Expected return" v={c.ongoing ? "Ongoing" : c.ret} accent={c.retPast ? "rose" : null} />
            </div>
          </Field>

          <Field label="Hours balance">
            {c.appr == null
              ? <div className="i" style={{ justifyContent: "space-between", background: "var(--surface-2)", border: "1px dashed var(--line)", borderRadius: 10, padding: "12px 14px" }}>
                  <span style={{ fontSize: 14, color: "var(--ink-3)" }}>No approved hours set</span>
                  <button className="i" style={{ gap: 4, border: "none", background: "transparent", color: "var(--accent-strong)", fontSize: 13, fontWeight: 600, padding: 0 }}>
                    <i className="ph-bold ph-plus" style={{ fontSize: 12 }} /> Add
                  </button>
                </div>
              : <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <div className="i" style={{ gap: 8, justifyContent: "flex-start" }}>
                    <span className="tnum" style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-.02em", color: isCrit(c) ? "var(--amber-deep)" : "var(--ink)" }}>{c.remaining}h</span>
                    <span style={{ fontSize: 14, color: "var(--ink-3)", fontWeight: 500 }}>available{c.fmla && c.regen ? " today" : ""}</span>
                    {c.lowBalance && <Chip color="var(--amber-deep)" bg="var(--amber-soft)" weight={600} style={{ fontSize: 11, padding: "2px 7px" }}>Low</Chip>}
                  </div>
                  <Balance c={c} mode={vizMode === "numbers" ? "ring" : vizMode} />
                  <div className="i" style={{ gap: 0, justifyContent: "flex-start", borderTop: "1px solid var(--line-soft)", paddingTop: 12 }}>
                    <Stat k="Approved" v={c.appr + "h"} />
                    <Stat k="Used" v={c.used + "h"} accent={c.used > c.appr ? "amber" : null} />
                  </div>
                  {c.regen && (
                    <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.45, background: "var(--accent-soft)", border: "1px solid var(--accent-soft-2)", borderRadius: 9, padding: "9px 12px" }}>
                      <i className="ph ph-clock-counter-clockwise" style={{ fontSize: 13, marginRight: 6, color: "var(--accent-strong)" }} />
                      Rolling 12-month balance — <span style={{ fontWeight: 600, color: "var(--accent-deep)" }}>+{c.regen.hours}h available {c.regen.date}</span> as past usage ages out.
                    </div>
                  )}
                  {c.weeks && (
                    <div className="i" style={{ justifyContent: "space-between", borderTop: "1px solid var(--line-soft)", paddingTop: 12 }}>
                      <span style={{ fontSize: 11.5, color: "var(--ink-faint)", fontWeight: 600 }}>Usage, last 12 weeks</span>
                      <Sparkline weeks={c.weeks} />
                    </div>
                  )}
                </div>}
          </Field>

          <Field label="Documentation">
            {c.docStatus === "complete" ? (
              <DocChip status="complete" label={c.docLabel} />
            ) : (
              <div className="i" style={{ justifyContent: "space-between", background: c.docStatus === "missing" ? "var(--amber-soft)" : "var(--surface-2)", border: "1px solid " + (c.docStatus === "missing" ? "var(--amber-soft)" : "var(--line)"), borderRadius: 10, padding: "11px 14px" }}>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: c.docStatus === "missing" ? "var(--amber-deep)" : "var(--ink-2)" }}>{c.docItem}</span>
                <DocChip status={c.docStatus} label={c.docLabel} />
              </div>
            )}
          </Field>

          <Field label="Recent activity">
            {entries.length === 0 ? (
              <div style={{ fontSize: 13.5, color: "var(--ink-faint)" }}>No usage entries yet.</div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column" }}>
                {entries.slice(0, 3).map((a, i) => (
                  <div key={i} className="i" style={{ justifyContent: "space-between", padding: "8px 0", borderBottom: i < Math.min(entries.length, 3) - 1 ? "1px solid var(--line-soft)" : "none" }}>
                    <span className="tnum" style={{ fontSize: 13.5, color: "var(--ink)", fontWeight: 600, width: 64 }}>{a.date}</span>
                    <span className="tnum" style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{a.hours}h</span>
                    <span style={{ fontSize: 12.5, color: "var(--ink-faint)", width: 96, textAlign: "right" }}>{a.paidAs}</span>
                  </div>
                ))}
              </div>
            )}
          </Field>

          <div style={{ fontSize: 12.5, color: "var(--ink-faint)" }}>Last updated {c.updated}, 2026</div>
        </div>

        {/* log usage form */}
        {logOpen && (
          <div style={{ padding: "14px 24px", borderTop: "1px solid var(--line)", background: "var(--surface-2)" }}>
            <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--ink-faint)", marginBottom: 10 }}>Log usage</div>
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr 1fr", gap: 8, marginBottom: 8 }}>
              <LabeledInput label="Date" value={form.date} onChange={v => setForm({ ...form, date: v })} />
              <LabeledInput label="Hours" value={form.hours} onChange={v => setForm({ ...form, hours: v })} type="number" />
              <LabeledSelect label="Paid as (optional)" value={form.paidAs} onChange={v => setForm({ ...form, paidAs: v })} options={["Sick", "Annual", "Personal", "Comp time", "Unpaid", "Workers' comp"]} />
            </div>
            <div className="i" style={{ gap: 8, justifyContent: "flex-end" }}>
              <button onClick={() => setLogOpen(false)} className="i" style={{ height: 32, padding: "0 12px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink-2)", fontWeight: 600, fontSize: 13 }}>Cancel</button>
              <button onClick={saveEntry} className="i" style={{ height: 32, padding: "0 14px", borderRadius: 8, border: "none", background: "var(--accent)", color: "#fff", fontWeight: 600, fontSize: 13 }}>Save entry</button>
            </div>
          </div>
        )}

        {/* footer */}
        <div style={{ padding: "14px 24px", borderTop: "1px solid var(--line)", display: "flex", gap: 9 }}>
          <button onClick={() => setLogOpen(o => !o)} className="i" style={{ flex: 1, gap: 7, height: 40, borderRadius: 10, border: "none", background: "var(--accent)", color: "#fff", fontWeight: 600, fontSize: 13.5 }}>
            <i className="ph-bold ph-plus" style={{ fontSize: 14 }} /> Log usage
          </button>
          <button onClick={() => ping("Case changes saved ✓")} className="i" style={{ gap: 7, height: 40, padding: "0 13px", borderRadius: 10, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink-2)", fontWeight: 600, fontSize: 13.5 }}>
            <i className="ph ph-pencil-simple" style={{ fontSize: 14 }} /> Update case
          </button>
          <button onClick={() => ping("Follow-up added — due Jun 15 ✓")} className="i" style={{ gap: 7, height: 40, padding: "0 13px", borderRadius: 10, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink-2)", fontWeight: 600, fontSize: 13.5 }}>
            <i className="ph ph-flag-pennant" style={{ fontSize: 14 }} /> Add follow-up
          </button>
        </div>

        {toast && (
          <div style={{
            position: "absolute", bottom: 70, left: "50%", transform: "translateX(-50%)", zIndex: 10,
            background: "oklch(0.27 0.012 250)", color: "#fff", fontSize: 13, fontWeight: 600,
            padding: "8px 14px", borderRadius: 9, boxShadow: "var(--shadow-pop)", whiteSpace: "nowrap",
            animation: "ltl-rise .2s cubic-bezier(.2,.8,.2,1)",
          }}>{toast}</div>
        )}
      </div>
    </div>
  );
}
function Field({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--ink-faint)", marginBottom: 10 }}>{label}</div>
      {children}
    </div>
  );
}
const drawerInputStyle = { width: "100%", boxSizing: "border-box", height: 32, padding: "0 9px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--surface)", fontFamily: "inherit", fontSize: 13, color: "var(--ink)", outline: "none" };
function LabeledInput({ label, value, onChange, type = "text" }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-faint)" }}>{label}</span>
      <input type={type} value={value} onChange={e => onChange(e.target.value)} style={drawerInputStyle} />
    </label>
  );
}
function LabeledSelect({ label, value, onChange, options }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-faint)" }}>{label}</span>
      <select value={value} onChange={e => onChange(e.target.value)} style={drawerInputStyle}>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}
function Stat({ k, v, accent }) {
  const col = accent === "rose" ? "var(--rose)" : accent === "amber" ? "var(--amber-deep)" : "var(--ink)";
  return (
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 11.5, color: "var(--ink-faint)", fontWeight: 600, marginBottom: 2 }}>{k}</div>
      <div className="tnum" style={{ fontSize: 16, fontWeight: 600, color: col }}>{v}</div>
    </div>
  );
}

Object.assign(window, { Sidebar, Header, SummaryRow, Drawer });