/* ==========================================================================
   cmx-widgets.css — styles for the confusion-matrix widgets.

   CANONICAL COPY. This file is the source of truth for widget styling.
   The companion article inlines these same rules in its <head> (its build
   pipeline only cache-busts the site stylesheet, so a separate widget .css
   there would never get a version bump). If you edit this file, paste the
   result into that page's <style> block too, or the two will drift.

   All classes are namespaced cmx- so the widgets can drop into any page.
   ========================================================================== */

/* ---------- shared tokens ---------- */
#cmx-calc, #cmx-pg {
  --cmx-teal:#157f72; --cmx-teal-dk:#0e6b60; --cmx-ink:#1f2a2a;
  --cmx-pos:#2f7fbf; --cmx-neg:#9aa3a8; --cmx-line:#cdd6d6; --cmx-bg:#ffffff;
  --cmx-hl:#c9efe0; --cmx-muted:#6b7676; --cmx-binpos:#eaf3fa; --cmx-binneg:#f2f4f5;
  max-width:100%; margin:0 auto; color:var(--cmx-ink);
  font-family:'Lato',system-ui,-apple-system,sans-serif; line-height:1.5;
  background:var(--cmx-bg); border:1px solid var(--cmx-line); border-radius:12px;
  padding:20px 22px; box-sizing:border-box;
}
#cmx-calc *, #cmx-pg *{box-sizing:border-box;}
#cmx-calc h3, #cmx-pg h3{margin:0 0 4px;font-size:1.15rem;color:var(--cmx-teal-dk);}
#cmx-calc .cmx-sub, #cmx-pg .cmx-sub{margin:0 0 16px;color:var(--cmx-muted);font-size:.9rem;}
/* ---------- widget 1: calculator ---------- */
#cmx-calc .cmx-top{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;}
#cmx-calc .cmx-matrix{border-collapse:collapse;margin:6px 0;width:auto;}
#cmx-calc .cmx-matrix th,#cmx-calc .cmx-matrix td{border:1px solid var(--cmx-line);padding:6px;text-align:center;}
#cmx-calc .cmx-matrix .cmx-corner{border:none;background:transparent;}
#cmx-calc .cmx-matrix .cmx-axis{background:#f3f7f6;font-size:.72rem;color:var(--cmx-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
#cmx-calc .cmx-cell label{display:block;font-size:.68rem;font-weight:700;color:var(--cmx-muted);margin-bottom:2px;}
#cmx-calc .cmx-cell.cmx-good label{color:var(--cmx-teal);}
#cmx-calc .cmx-cell.cmx-bad label{color:#c0532b;}
#cmx-calc input[type=number]{width:74px;padding:6px;font-size:1rem;text-align:center;border:1px solid var(--cmx-line);border-radius:6px;font-family:inherit;}
#cmx-calc .cmx-presets{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;}
#cmx-calc .cmx-presets button{cursor:pointer;font:inherit;font-size:.82rem;padding:6px 11px;border:1px solid var(--cmx-teal);background:#fff;color:var(--cmx-teal-dk);border-radius:999px;transition:.12s;}
#cmx-calc .cmx-presets button:hover{background:var(--cmx-teal);color:#fff;}
#cmx-calc .cmx-preset-note{font-size:.8rem;color:var(--cmx-muted);min-height:1.2em;margin-top:4px;}
#cmx-calc .cmx-groups{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#cmx-calc .cmx-group{border:1px solid var(--cmx-line);border-radius:9px;overflow:hidden;}
#cmx-calc .cmx-group h4{margin:0;padding:7px 11px;background:var(--cmx-teal);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.02em;}
#cmx-calc .cmx-group .cmx-desc{padding:6px 11px 0;font-size:.74rem;color:var(--cmx-muted);}
#cmx-calc table.cmx-metrics{width:100%;border-collapse:collapse;margin:0;}
#cmx-calc table.cmx-metrics td{padding:5px 11px;border-top:1px solid #eef2f2;vertical-align:top;}
#cmx-calc table.cmx-metrics tr:first-child td{border-top:none;}
#cmx-calc .cmx-mname{font-size:.85rem;font-weight:600;}
#cmx-calc .cmx-mform{display:block;font-size:.72rem;color:var(--cmx-muted);font-family:ui-monospace,Menlo,monospace;}
#cmx-calc .cmx-mval{text-align:right;font-size:.98rem;font-weight:700;color:var(--cmx-teal-dk);white-space:nowrap;font-variant-numeric:tabular-nums;width:5.8em;}
#cmx-calc .cmx-mval.cmx-na{color:var(--cmx-muted);font-weight:400;}
#cmx-calc .cmx-mnum{display:block;}
.cmx-mbar{display:block;height:6px;margin-top:5px;background:#e8eeee;border-radius:99px;overflow:hidden;}
.cmx-mbar[hidden]{display:none;}
.cmx-mbar-fill{display:block;height:100%;width:0;border-radius:inherit;transition:width .2s ease,background-color .2s ease;}
#cmx-calc .cmx-flag{margin-top:14px;padding:9px 12px;border-radius:8px;background:var(--cmx-hl);font-size:.85rem;display:none;}
#cmx-calc .cmx-flag.cmx-show{display:block;}
/* ---------- widget 2: playground ---------- */
#cmx-pg .cmx-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;margin-bottom:10px;}
#cmx-pg .cmx-legend span{display:inline-flex;align-items:center;gap:6px;}
#cmx-pg .cmx-dot{width:14px;height:14px;border-radius:50%;display:inline-block;}
#cmx-pg .cmx-dot.pos{background:var(--cmx-pos);}
#cmx-pg .cmx-dot.neg{background:var(--cmx-neg);}
#cmx-pg .cmx-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
#cmx-pg .cmx-controls button{cursor:pointer;font:inherit;font-size:.83rem;padding:6px 12px;border:1px solid var(--cmx-teal);background:#fff;color:var(--cmx-teal-dk);border-radius:999px;transition:.12s;}
#cmx-pg .cmx-controls button:hover{background:var(--cmx-teal);color:#fff;}
#cmx-pg .cmx-arena{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#cmx-pg .cmx-bin{border:2px dashed var(--cmx-line);border-radius:10px;padding:8px;min-height:190px;transition:border-color .18s, box-shadow .18s;}
#cmx-pg .cmx-bin[data-pred=pos]{background:var(--cmx-binpos);}
#cmx-pg .cmx-bin[data-pred=neg]{background:var(--cmx-binneg);}
#cmx-pg .cmx-bin.cmx-over{border-color:var(--cmx-teal);box-shadow:inset 0 0 0 1px var(--cmx-teal);}
#cmx-pg .cmx-bin-h{font-size:.8rem;font-weight:700;color:var(--cmx-muted);text-align:center;margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
#cmx-pg .cmx-balls{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;}
#cmx-pg .cmx-ball{-webkit-user-select:none;user-select:none;touch-action:none;width:18px;height:18px;border-radius:50%;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.18);transform-origin:center;transition:box-shadow .18s ease;}
#cmx-pg .cmx-ball.pos{background:var(--cmx-pos);}
#cmx-pg .cmx-ball.neg{background:var(--cmx-neg);}
#cmx-pg .cmx-ball.cmx-drag{cursor:grabbing;z-index:9999;box-shadow:0 8px 18px rgba(0,0,0,.32);transform:scale(1.28);}
#cmx-pg .cmx-ball-ph{width:18px;height:18px;border-radius:50%;border:2px dashed var(--cmx-line);box-sizing:border-box;pointer-events:none;}
#cmx-pg .cmx-read{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px;}
#cmx-pg .cmx-stat{background:#f5f8f7;border:1px solid var(--cmx-line);border-radius:8px;padding:8px 6px;text-align:center;}
#cmx-pg .cmx-stat .cmx-mnum{display:block;font-size:1.05rem;color:var(--cmx-teal-dk);font-variant-numeric:tabular-nums;}
#cmx-pg .cmx-stat .cmx-mbar{margin:6px 4px 5px;}
#cmx-pg .cmx-stat-lbl{display:block;font-size:.7rem;color:var(--cmx-muted);text-transform:uppercase;letter-spacing:.03em;}
#cmx-pg .cmx-counts{margin-top:10px;font-size:.82rem;color:var(--cmx-muted);text-align:center;}
#cmx-pg .cmx-counts b{color:var(--cmx-ink);}
@media(prefers-reduced-motion:reduce){
  .cmx-mbar-fill{transition:none;}
  #cmx-pg .cmx-ball.cmx-drag{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.18);}
  #cmx-pg .cmx-bin{transition:none;}
}
@media(max-width:620px){
  #cmx-calc .cmx-groups{grid-template-columns:1fr;}
  #cmx-pg .cmx-arena{grid-template-columns:1fr;}
  #cmx-pg .cmx-read{grid-template-columns:repeat(3,1fr);}
}
