/* ════════════════════════════════════════════════════════════════
   HOLON DASHBOARD KIT v1 — OFFICIAL STANDARD for all Holon tool dashboards
   Extracted from Holon Revisions (cont.54/59); rolled out to 20 tools (cont.60-64).
   Any NEW tool with a dashboard MUST use this kit. Style only — each tool
   keeps its OWN data/ids.

   ── THE LOOK (signature metrics, match exactly) ──
     card:      border:1px solid #e7ecf3; border-radius:14px; padding:18px;
                box-shadow:0 1px 2px rgba(15,23,42,.04);
     hover:     transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.10);
     accent:    4px gradient strip on top (::before) — color per card
     value:     font-size:30px; font-weight:800; letter-spacing:-.03em;
     label:     11px uppercase; letter-spacing:.06em; color:#94a3b8; font-weight:600
     hero:      navy gradient 135deg #0d1f3c→#1e3a5f→#2a5298, radius:14px, avatar+greeting
     colors:    sc-blue #2563eb→#60a5fa | sc-green #16a34a→#4ade80 |
                sc-purple #7c3aed→#c084fc | sc-amber #d97706→#fbbf24 | sc-red #dc2626→#f87171

   ── TWO APPLICATION PATTERNS (pick per tool) ──
     A) PLAIN cards (no existing structure): replace markup with .statcard
        skeleton below + wire countUp() for integer stats.
     B) STRUCTURED cards (already have accents/icons/clicks): DO NOT rewrite
        markup — just upgrade the existing CSS class to the metrics above.
        Preserves clicks, JS-injected values, % suffixes.

   ── RULES (learned in rollout, do not violate) ──
     1. PRESERVE SEMANTIC COLORS. If a tool uses green=good/red=bad
        (compliance, at-risk, critical issues), keep that mapping — only
        restyle the card shell, never flatten meaning into decoration.
     2. RESPECT DISTINCT IDENTITY. Tools with a deliberate non-corporate look
        (e.g. gamified Quest w/ Fredoka font) get LIGHT touch only
        (radius+shadow+hover), NOT the navy kit.
     3. countUp() only for pure integers set via textContent. Skip for values
        with suffixes (%, " nodes"), .toLocaleString(), floats, or text.
     4. Verify after edit: node syntax check on <script> blocks + div balance.

   USAGE:
     1. Paste the CSS block into the tool's stylesheet.
     2. Pattern A: drop the HTML skeleton, set ids. Pattern B: upgrade existing class.
     3. Include countUp() in the script; call it for integer stats.
   ════════════════════════════════════════════════════════════════ */

/* ---------- CSS ---------- */
.hk-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0d1f3c,#1e3a5f,#2a5298);border-radius:14px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 8px 24px rgba(13,31,60,.25)}
.hk-hero .hk-blob{position:absolute;top:-60px;right:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(85,249,52,.22),transparent 70%);pointer-events:none}
.hk-hero .hk-blob::after{content:"";position:absolute;bottom:-160px;left:-120px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.25),transparent 70%)}
.hk-avatar{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0}
.hk-hero-title{font-size:19px;font-weight:800;color:#fff;margin-bottom:2px}
.hk-hero-sub{font-size:13px;color:rgba(255,255,255,.8)}
.hk-btn{position:relative;z-index:1;flex-shrink:0;height:38px;padding:0 18px;border-radius:9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.hk-btn:hover{background:rgba(255,255,255,.28)}
.hk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.statcard{position:relative;background:#fff;border:1px solid #e7ecf3;border-radius:14px;padding:18px 18px 16px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.statcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.statcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.statcard .sc-icon{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.statcard .sc-val{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#0f172a;margin-top:2px}
.statcard .sc-label{font-size:11px;color:#94a3b8;margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sc-blue::before{background:linear-gradient(90deg,#2563eb,#60a5fa)} .sc-blue .sc-icon{background:linear-gradient(135deg,#2563eb,#60a5fa)} .sc-blue .sc-val{color:#1e3a8a}
.sc-green::before{background:linear-gradient(90deg,#16a34a,#4ade80)} .sc-green .sc-icon{background:linear-gradient(135deg,#16a34a,#4ade80)} .sc-green .sc-val{color:#166534}
.sc-purple::before{background:linear-gradient(90deg,#7c3aed,#c084fc)} .sc-purple .sc-icon{background:linear-gradient(135deg,#7c3aed,#c084fc)} .sc-purple .sc-val{color:#5b21b6}
.sc-amber::before{background:linear-gradient(90deg,#d97706,#fbbf24)} .sc-amber .sc-icon{background:linear-gradient(135deg,#d97706,#fbbf24)} .sc-amber .sc-val{color:#92400e}

/* ---------- HTML skeleton (fill ids + labels per tool) ----------
<div class="hk-hero">
  <div class="hk-blob"></div>
  <div style="display:flex;align-items:center;gap:14px;position:relative;z-index:1">
    <div class="hk-avatar" id="hk-avatar">--</div>
    <div>
      <div class="hk-hero-title">Good to see you, <span id="hk-name">there</span> &#128075;</div>
      <div class="hk-hero-sub"><span style="opacity:.7">Current course:</span> <span id="hk-course">&mdash;</span></div>
    </div>
  </div>
  <button class="hk-btn" id="hk-cta">Primary action &#8594;</button>
</div>
<div class="hk-stats" style="margin-top:14px">
  <div class="statcard sc-blue"><div class="sc-icon">&#9998;</div><div class="sc-val" id="hk-stat1">&mdash;</div><div class="sc-label">Label 1</div></div>
  <div class="statcard sc-green"><div class="sc-icon">&#128196;</div><div class="sc-val" id="hk-stat2">&mdash;</div><div class="sc-label">Label 2</div></div>
  <div class="statcard sc-purple"><div class="sc-icon">&#128100;</div><div class="sc-val" id="hk-stat3" style="font-size:18px">&mdash;</div><div class="sc-label">Label 3</div></div>
  <div class="statcard sc-amber"><div class="sc-icon">&#128337;</div><div class="sc-val" id="hk-stat4" style="font-size:18px">&mdash;</div><div class="sc-label">Label 4</div></div>
</div>
---------- */

/* ---------- JS helper (paste into tool script) ----------
function countUp(el, target) {
  if (!el) return;
  target = parseInt(target) || 0;
  if (target <= 0) { el.textContent = '0'; return; }
  const dur = 600, t0 = performance.now();
  function step(t) {
    const p = Math.min(1, (t - t0) / dur);
    const eased = 1 - Math.pow(1 - p, 3);
    el.textContent = Math.round(eased * target);
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}
// avatar initials: full name -> initials
function hkInitials(full){return (full||'').split(' ').filter(Boolean).slice(0,2).map(x=>x[0].toUpperCase()).join('')||'U';}
---------- */