Confidence Band Bar

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 563,
  slug: 'confidence-band-bar',
  name: 'Confidence Band Bar',
  category: 'governance-risk',
  subcategory: 'thresholds',
  pillar: 'go',
  description: 'A point estimate with its uncertainty band — the bar that says "this is the value, ± this much".',
  spec: `## Intent
Thresholds without confidence intervals are theatre. This atom shows the estimate AND the band; if the band straddles the threshold, autonomy must defer.

## Acceptance Criteria
- [ ] Point mark on a horizontal track
- [ ] Band extending lo→hi around the point
- [ ] Threshold tick on the same track
- [ ] Verdict colour based on whether band crosses threshold

## Constraints
- Pure CSS
- Theme-aware via tokens`,
  tags: ['chart', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const estimate = 62;
const band = { lo: 48, hi: 74 };
const threshold = 70;
const crosses = band.lo < threshold && band.hi >= threshold;
const tone = crosses ? 'attention' : (band.hi < threshold ? 'danger' : 'success');
const verdict = crosses ? 'Band crosses' : tone === 'success' ? 'Above' : 'Below';
const ink = tone === 'success' ? 'text-black' : 'text-white';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-baseline justify-between mb-2">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">Estimate &plusmn; band</p>
    <span class:list={[`bg-${tone}`, ink, 'px-2 py-0.5 border-2 border-black font-black text-[10px] uppercase tracking-widest']}>{verdict}</span>
  </div>

  <div class="relative h-10 border-y-4 border-black">
    <div
      class="absolute top-0 bottom-0 bg-ink opacity-20"
      style={`left:${band.lo}%; width:${band.hi - band.lo}%`}
      aria-hidden="true"
    ></div>
    <div
      class="absolute top-0 bottom-0 w-1 bg-ink"
      style={`left:calc(${estimate}% - 2px)`}
      aria-hidden="true"
    ></div>
    <div
      class="absolute -top-1 -bottom-1 w-0.5 bg-danger"
      style={`left:calc(${threshold}% - 1px)`}
      aria-hidden="true"
    ></div>
  </div>

  <div class="grid grid-cols-3 mt-2 font-mono text-[10px] uppercase tracking-widest">
    <span class="opacity-60">lo {band.lo}</span>
    <span class="text-center"><span class="font-black tabular-nums">{estimate}</span></span>
    <span class="text-end opacity-60">hi {band.hi}</span>
  </div>
  <p class="mt-2 text-[11px] leading-snug">
    Threshold <b>{threshold}</b> &middot; {crosses ? 'band straddles — defer.' : tone === 'success' ? 'safely above.' : 'safely below.'}
  </p>
</div>