/* Counterfact module — visual identity scoped under .cf, inside the host shell.
   THE RULE: counterfactuals render dashed + ghost-gray; actuals solid cobalt. */
.cf{
  --cobalt:#2244E0; --cobalt-soft:#E4E9FC;
  --cf-ghost:#8A93A6;
  --cf-green:#0B8A5C; --cf-green-soft:#E2F4EC;
  --cf-amber:#B87409; --cf-amber-soft:#FBF1DE;
  --cf-red:#CF3B2A; --cf-red-soft:#FBE7E4;
}

/* graph-paper backdrop — the signature motif, kept subtle inside the host page */
.cf.cf-paper{
  background-image:linear-gradient(rgba(221,228,233,.33) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(221,228,233,.33) 1px,transparent 1px);
  background-size:28px 28px;
}

.cf .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:860px){.cf .cf-grid{grid-template-columns:1fr}}

.cf .cf-eyebrow{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.cf h2.cf-h2{font-size:19px;font-weight:700;letter-spacing:-0.01em;margin:0 0 8px}
.cf .cf-p{font-size:13.5px;line-height:1.6;color:var(--soft);margin:0 0 18px}
.cf .cf-fine{font-size:12.5px;color:var(--soft);line-height:1.6}

.cf .cf-metric-label{font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--soft);margin-bottom:3px}
.cf .cf-metric{font-size:27px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.cf .cf-mono{font-family:var(--mono)}

/* verdict cards */
.cf .cf-verdict{border-radius:8px;padding:14px 16px;margin-top:14px;border:1px solid}
.cf .cf-verdict>b{display:block;font-weight:700;font-size:14px}
.cf .cf-verdict>div{font-size:13px;color:var(--ink);margin-top:4px;line-height:1.55}
.cf .cf-verdict.good{background:var(--cf-green-soft);border-color:rgba(11,138,92,.25)}
.cf .cf-verdict.good>b{color:var(--cf-green)}
.cf .cf-verdict.warn{background:var(--cf-amber-soft);border-color:rgba(184,116,9,.25)}
.cf .cf-verdict.warn>b{color:var(--cf-amber)}
.cf .cf-verdict.bad{background:var(--cf-red-soft);border-color:rgba(207,59,42,.25)}
.cf .cf-verdict.bad>b{color:var(--cf-red)}
.cf .cf-verdict.info{background:var(--cobalt-soft);border-color:rgba(34,68,224,.25)}
.cf .cf-verdict.info>b{color:var(--cobalt)}

/* full-width primary action */
.cf .cf-btn{display:block;width:100%;margin-top:18px;padding:13px;font:700 14px var(--sans);
  color:#fff;background:var(--cobalt);border:none;border-radius:8px;cursor:pointer;
  text-align:center;text-decoration:none;letter-spacing:.01em}
.cf .cf-btn:hover{background:#1a38c4}
.cf .cf-btn[disabled],.cf .cf-btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.cf .cf-btn-ghost{display:inline-block;padding:8px 13px;font:600 12.5px var(--sans);color:var(--cobalt);
  background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;text-decoration:none}
.cf .cf-btn-ghost:hover{border-color:var(--cobalt)}
.cf .cf-btn:focus-visible,.cf .cf-btn-ghost:focus-visible{outline:3px solid rgba(34,68,224,.4);outline-offset:2px}

/* sliders */
.cf .cf-slider{margin-bottom:18px}
.cf .cf-slider .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cf .cf-slider .row label{display:inline;font:600 13px var(--sans);color:var(--ink);
  letter-spacing:0;text-transform:none;margin:0}
.cf .cf-slider .val{font:600 13px var(--mono);color:var(--cobalt);font-variant-numeric:tabular-nums}
.cf .cf-slider .sub{font-size:11.5px;color:var(--soft);margin-top:1px}
.cf input[type=range]{width:100%;height:22px;margin-top:6px;padding:0;border:none;background:transparent;
  accent-color:var(--cobalt);cursor:pointer}
.cf input[type=range]:focus{outline:none}
.cf input[type=range]:focus-visible{outline:3px solid rgba(34,68,224,.4);outline-offset:2px}

/* selectable chips (wrap a visually-hidden radio) */
.cf .cf-chips{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.cf .cf-chip{position:relative;display:inline-flex;padding:7px 12px;font:600 12.5px var(--sans);
  border:1.5px solid var(--line);border-radius:999px;cursor:pointer;color:var(--soft);background:#fff;margin:0;
  letter-spacing:0;text-transform:none}
.cf .cf-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.cf .cf-chip:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt)}
.cf .cf-chip:has(input:focus-visible){outline:3px solid rgba(34,68,224,.4);outline-offset:2px}

/* tiny pills */
.cf .cf-badge{font:400 11px var(--mono);color:var(--cf-amber);background:var(--cf-amber-soft);
  border:1px solid rgba(184,116,9,.35);border-radius:999px;padding:5px 12px;white-space:nowrap}
.cf .cf-geochip{display:inline-block;font:400 11px var(--mono);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;color:var(--soft);background:#fff;margin:2px 3px 2px 0}
.cf .cf-pill-red{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cf-red);border:1px solid var(--cf-red);border-radius:999px;padding:1px 8px}

/* experiment lifecycle status pills */
.cf .cf-pill{display:inline-block;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;border-radius:999px;padding:2px 9px;white-space:nowrap}
.cf .cf-pill.gray{color:var(--cf-ghost);border-color:var(--cf-ghost);background:#fff}
.cf .cf-pill.cobalt{color:var(--cobalt);border-color:rgba(34,68,224,.45);background:var(--cobalt-soft)}
.cf .cf-pill.amber{color:var(--cf-amber);border-color:rgba(184,116,9,.45);background:var(--cf-amber-soft)}
.cf .cf-pill.green{color:var(--cf-green);border-color:rgba(11,138,92,.45);background:var(--cf-green-soft)}
.cf .cf-pill.red{color:var(--cf-red);border-color:rgba(207,59,42,.45);background:var(--cf-red-soft)}

/* waste-finder exposure bars */
.cf .cf-bar-track{height:7px;background:var(--wash);border-radius:4px;margin-top:4px;overflow:hidden}
.cf .cf-bar-fill{height:100%;border-radius:4px;background:var(--cf-ghost);opacity:.5}
.cf .cf-bar-fill.worst{background:var(--cf-red);opacity:.9}

/* loading skeletons */
.cf .cf-skel{height:14px;border-radius:6px;background:var(--wash);animation:pulse 1.2s ease-in-out infinite}

/* amber / cobalt annotation lists */
.cf ul.cf-notes{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.6}
.cf ul.cf-notes.amber li{color:var(--cf-amber)}
.cf ul.cf-notes.cobalt li{color:var(--cobalt)}

@media (prefers-reduced-motion: reduce){
  .cf *,.cf *::before,.cf *::after{animation:none!important;transition:none!important}
}