/* ============================================================
   HealthCompass — Chart System styles (Design Elevation, D2)
   ------------------------------------------------------------
   Pairs with js/hc-charts.js. 100% driven by css/tokens.css —
   no raw brand hex here. Dark mode is handled inline via
   body.dark blocks alongside each rule (built dark-native from
   day one, per the contrast-audit lesson).
   ============================================================ */

.hcc {
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem 1rem;
  background: #fff;
  border: 1.5px solid var(--hc-surface-300);
  border-radius: 14px;
}
body.dark .hcc {
  background: var(--hc-ink-550) !important;
  border-color: var(--hc-slate-800) !important;
}

/* ── head: title + mandatory evidence badge ── */
.hcc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.hcc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hc-ink-800);
  line-height: 1.3;
}
body.dark .hcc-title { color: var(--hc-surface-250) !important; }

/* ── evidence badges: tint style, hand-tuned light + dark ── */
.hcc-ev {
  flex-shrink: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 50px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hcc-ev-strong        { color: #0d7d70; background: #d9f5f0; border-color: #9fe3d8; }
.hcc-ev-moderate      { color: #1e5fa8; background: #dbeafe; border-color: #a9cbf0; }
.hcc-ev-observational { color: #7a5a12; background: #fbf0d8; border-color: #e8d9a8; }
.hcc-ev-emerging      { color: #8a4b1a; background: #fceee3; border-color: #f0cfae; }
.hcc-ev-preliminary   { color: var(--hc-slate-600); background: var(--hc-surface-200); border-color: var(--hc-surface-400); }
.hcc-ev-contested     { color: var(--hc-danger); background: #fdecec; border-color: #f3b0b0; }

body.dark .hcc-ev-strong        { color: #7fe3d4 !important; background: #0e3d37 !important; border-color: #1a5c52 !important; }
body.dark .hcc-ev-moderate      { color: #8fb8e8 !important; background: #12293f !important; border-color: #264a6e !important; }
body.dark .hcc-ev-observational { color: #e0c98a !important; background: #33290e !important; border-color: #574618 !important; }
body.dark .hcc-ev-emerging      { color: #e8ab7d !important; background: #3a2412 !important; border-color: #5e3d22 !important; }
body.dark .hcc-ev-preliminary   { color: #c8d2de !important; background: #2a323e !important; border-color: #3d4757 !important; }
body.dark .hcc-ev-contested     { color: #f0a8a8 !important; background: #3d1a1a !important; border-color: #6e2a2a !important; }

/* ── body / svg ── */
.hcc-body { width: 100%; }

/* ── RISK BAR (HTML rows, not SVG — see hc-charts.js architecture note) ── */
.hcc-rows { display: flex; flex-direction: column; gap: .95rem; }

.hcc-r { display: flex; flex-direction: column; gap: .34rem; }

/* the track: two halves meeting at a real zero */
.hcc-track { display: flex; align-items: center; height: 20px; }
.hcc-half { flex: 1; display: flex; height: 100%; }
.hcc-half-l { justify-content: flex-end; }
.hcc-half-r { justify-content: flex-start; }

.hcc-zero {
  width: 2px;
  height: 26px;
  background: var(--hc-slate-400);
  flex-shrink: 0;
  border-radius: 1px;
}
body.dark .hcc-zero { background: var(--hc-slate-600); }

.hcc-bar { height: 100%; border-radius: 3px; min-width: 2px; }
.hcc-bar-benefit { background: var(--hc-teal); border-radius: 3px 0 0 3px; }
.hcc-bar-risk    { background: var(--hc-coral); border-radius: 0 3px 3px 0; }
body.dark .hcc-bar-benefit { background: var(--hc-teal-light); }
body.dark .hcc-bar-risk    { background: #ff9066; }

/* label block below the bar — wraps naturally, never collides */
.hcc-r-lbl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .45rem;
  padding-left: .1rem;
}
.hcc-val {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.hcc-val-benefit { color: var(--hc-teal-deep); }
.hcc-val-risk    { color: var(--hc-coral); }
body.dark .hcc-val-benefit { color: var(--hc-teal-light) !important; }
body.dark .hcc-val-risk    { color: #ff9066 !important; }

.hcc-what {
  font-size: .82rem;
  font-weight: 600;
  color: var(--hc-ink-800);
  line-height: 1.4;
}
body.dark .hcc-what { color: var(--hc-surface-250) !important; }

.hcc-r-note {
  flex-basis: 100%;
  font-size: .7rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--hc-slate-500);
}
body.dark .hcc-r-note { color: var(--hc-slate-300) !important; }

.hcc-baseline-lbl {
  margin-top: .1rem;
  text-align: center;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hc-slate-500);
}
body.dark .hcc-baseline-lbl { color: var(--hc-slate-300) !important; }


/* key */
.hcc-key {
  display: flex;
  gap: 1.1rem;
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--hc-surface-300);
}
body.dark .hcc-key { border-color: var(--hc-slate-800) !important; }
.hcc-key-i {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--hc-slate-600);
}
body.dark .hcc-key-i { color: var(--hc-slate-300) !important; }
.hcc-sw { width: .7rem; height: .7rem; border-radius: 2px; flex-shrink: 0; }
.hcc-sw-benefit { background: var(--hc-teal); }
.hcc-sw-risk    { background: var(--hc-coral); }
body.dark .hcc-sw-benefit { background: var(--hc-teal-light); }
body.dark .hcc-sw-risk    { background: #ff9066; }

/* ── CONFIDENCE RANGE (HTML — labels never stretch) ── */
.hcc-cr { display: flex; flex-direction: column; gap: 1rem; }
.hcc-cr-r { display: flex; flex-direction: column; gap: .4rem; }

.hcc-cr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.hcc-cr-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--hc-ink-800);
}
body.dark .hcc-cr-name { color: var(--hc-surface-250) !important; }

.hcc-cr-vals {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--hc-teal-deep);
}
body.dark .hcc-cr-vals { color: var(--hc-teal-light) !important; }
.hcc-cr-ci {
  font-weight: 500;
  color: var(--hc-slate-500);
}
body.dark .hcc-cr-ci { color: var(--hc-slate-300) !important; }

.hcc-cr-track {
  position: relative;
  height: 22px;
  background: var(--hc-surface-100);
  border-radius: 4px;
}
body.dark .hcc-cr-track { background: var(--hc-ink-600) !important; }

.hcc-cr-int {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  background: var(--hc-teal);
  border-radius: 4px;
  opacity: .55;
}
.hcc-cr-int.is-null { background: var(--hc-slate-450); }
body.dark .hcc-cr-int { background: var(--hc-teal-light) !important; opacity: .5; }
body.dark .hcc-cr-int.is-null { background: var(--hc-slate-400) !important; }

.hcc-cr-dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--hc-teal-deep);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(10, 37, 64, .25);
}
.hcc-cr-dot.is-null { background: var(--hc-slate-500); }
body.dark .hcc-cr-dot {
  background: var(--hc-teal-light) !important;
  border-color: var(--hc-ink-550) !important;
}
body.dark .hcc-cr-dot.is-null { background: var(--hc-slate-300) !important; }

.hcc-cr-nullline {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--hc-coral);
  border-radius: 1px;
  opacity: .8;
}

.hcc-cr-axis {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .1rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .62rem;
  font-weight: 600;
  color: var(--hc-slate-500);
}
body.dark .hcc-cr-axis { color: var(--hc-slate-300) !important; }
.hcc-cr-nulllbl { color: var(--hc-coral); font-weight: 700; }
body.dark .hcc-cr-nulllbl { color: #ff9066 !important; }

.hcc-unit {
  margin: .6rem 0 0;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--hc-slate-500);
}
body.dark .hcc-unit { color: var(--hc-slate-300) !important; }

/* ── DOSE CURVE (SVG curve + HTML text) ── */
.hcc-dc-wrap { display: flex; align-items: stretch; gap: .5rem; }

.hcc-dc-ylbl {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hc-slate-500);
  flex-shrink: 0;
}
body.dark .hcc-dc-ylbl { color: var(--hc-slate-300) !important; }

.hcc-dc-plot { position: relative; flex: 1; }
.hcc-dc-svg { width: 100%; height: 150px; display: block; }

.hcc-dc-anno {
  position: absolute;
  top: 2px;
  transform: translateX(4px);
  font-size: .64rem;
  font-weight: 700;
  color: var(--hc-coral);
  white-space: nowrap;
}
body.dark .hcc-dc-anno { color: #ff9066 !important; }

.hcc-dc-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: .3rem;
  padding: 0 .2rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .62rem;
  font-weight: 600;
  color: var(--hc-slate-500);
}
body.dark .hcc-dc-xaxis { color: var(--hc-slate-300) !important; }
.hcc-dc-xplat { color: var(--hc-coral); font-weight: 700; }
body.dark .hcc-dc-xplat { color: #ff9066 !important; }

.hcc-dc-xlbl {
  margin: .25rem 0 0;
  text-align: center;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hc-slate-500);
}
body.dark .hcc-dc-xlbl { color: var(--hc-slate-300) !important; }

.hcc-grid {
  stroke: var(--hc-surface-300);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
body.dark .hcc-grid { stroke: var(--hc-slate-800) !important; }

.hcc-axis {
  stroke: var(--hc-slate-400);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
body.dark .hcc-axis { stroke: var(--hc-slate-600) !important; }

.hcc-dc-line {
  fill: none;
  stroke: var(--hc-teal);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
body.dark .hcc-dc-line { stroke: var(--hc-teal-light) !important; }

.hcc-dc-area { fill: var(--hc-teal); opacity: .10; }
body.dark .hcc-dc-area { fill: var(--hc-teal-light) !important; opacity: .14; }

.hcc-dc-pt { fill: var(--hc-teal-deep); }
body.dark .hcc-dc-pt { fill: var(--hc-teal-light) !important; }

.hcc-dc-plat {
  stroke: var(--hc-coral);
  stroke-width: 1.2;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

/* ── notes / sources ── */
.hcc-note {
  margin: .7rem 0 0;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--hc-text-body);
}
body.dark .hcc-note { color: var(--hc-surface-400) !important; }

.hcc-src {
  margin: .45rem 0 0;
  font-size: .68rem;
  font-style: italic;
  color: var(--hc-slate-500);
}
body.dark .hcc-src { color: var(--hc-slate-300) !important; }

/* Screen-reader text alternative — the numbers must not be
   sighted-only. Visually hidden, fully available to AT. */
.hcc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── mobile: horizontal bars degrade well; tighten the chrome ── */
@media (max-width: 480px) {
  .hcc { padding: .9rem .85rem .8rem; }
  .hcc-head { gap: .5rem; }
  .hcc-title { font-size: .92rem; }
  .hcc-key { gap: .8rem; }
}