/*!
 * Kyma — biomarker graphs.
 *
 * Pairs with patients/static/patients/js/kyma-biomarker-graphs.js.
 * Layout + typography shells for the two renderers, plus the chart-level
 * design tokens that both the JS and the CSS reference.
 *
 *   .k-bm-trend           — wide & short row spark (no interactivity)
 *   .k-bm-history         — full detail chart with chrome + stats footer
 */

/* ═══════════════════════════════════════════════════════════
   0 · CHART-LEVEL TOKENS
   Referenced by both this file and kyma-biomarker-graphs.js.
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg-graph-surface:        var(--white);
  --bg-graph-divider:        var(--stone-200);
  --bg-graph-axis-text:      var(--stone-500);

  --bg-graph-zone-optimal:   var(--emerald-400);
  --bg-graph-zone-warn:      var(--amber-300);
  --bg-graph-zone-out:       var(--terra-300);

  --bg-graph-optimal-fill:   rgba(27,154,74,0.08);
  --bg-graph-optimal-edge:   rgba(27,154,74,0.35);
  --bg-graph-optimal-label:  var(--emerald-600);

  --bg-graph-trend-optimal:  var(--emerald-400);
  --bg-graph-trend-warn:     var(--amber-400);
  --bg-graph-trend-out:      var(--terra-400);

  --bg-graph-projection:     var(--stone-300);
  --bg-graph-projection-dot: var(--stone-400);

  --bg-graph-stat-border:    var(--stone-200);

  /* Soft tint shown behind the latest-zone slot in the trend graph. The
     alpha is baked in here so the JS only references token names. */
  --bg-graph-band-tint-optimal: rgba(27,154,74,0.10);
  --bg-graph-band-tint-warn:    rgba(184,146,26,0.14);
  --bg-graph-band-tint-out:     rgba(212,90,50,0.14);

  /* Hover tooltip in the history graph. */
  --bg-graph-tt-bg:     var(--white);
  --bg-graph-tt-border: var(--stone-200);
  --bg-graph-tt-shadow: 0 8px 24px rgba(27,25,23,0.10), 0 2px 6px rgba(27,25,23,0.05);
}

[data-theme="dark"] {
  --bg-graph-surface:        var(--navy-800);
  --bg-graph-divider:        var(--navy-600);
  --bg-graph-axis-text:      var(--navy-300);

  --bg-graph-optimal-fill:   rgba(45,178,98,0.10);
  --bg-graph-optimal-edge:   rgba(45,178,98,0.40);
  --bg-graph-optimal-label:  var(--emerald-300);

  --bg-graph-stat-border:    var(--navy-600);

  --bg-graph-band-tint-optimal: rgba(45,178,98,0.14);
  --bg-graph-band-tint-warn:    rgba(245,204,84,0.18);
  --bg-graph-band-tint-out:     rgba(232,117,80,0.18);

  --bg-graph-tt-bg:     var(--navy-700);
  --bg-graph-tt-border: var(--navy-600);
  --bg-graph-tt-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════════════
   1 · TREND (brief) — .k-bm-trend
   Inline-flex shell so it slots cleanly into row layouts.
   ═══════════════════════════════════════════════════════════ */
.k-bm-trend {
  display: block;
  width: 100%;
  max-width: 184px;
  height: 48px;
}
.k-bm-trend-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════
   2 · HISTORY (full) — .k-bm-history
   Card chrome + chart body + 2-up stats footer.
   ═══════════════════════════════════════════════════════════ */
.k-bm-history {
  background: var(--bg-graph-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2xl);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-sm);
}
.k-bm-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.k-bm-history-title {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
.k-bm-history-subtitle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.k-bm-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--w-semibold);
  border: 1px solid transparent;
  flex-shrink: 0;
}
.k-bm-history-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.k-bm-history-badge-optimal {
  background: var(--status-optimal-bg);
  color: var(--status-optimal-text);
  border-color: var(--status-optimal-border);
}
.k-bm-history-badge-optimal .k-bm-history-badge-dot { background: var(--emerald-500); }
.k-bm-history-badge-warn {
  background: var(--status-inrange-bg);
  color: var(--status-inrange-text);
  border-color: var(--status-inrange-border);
}
.k-bm-history-badge-warn .k-bm-history-badge-dot { background: var(--amber-500); }
.k-bm-history-badge-out {
  background: var(--status-out-bg);
  color: var(--status-out-text);
  border-color: var(--status-out-border);
}
.k-bm-history-badge-out .k-bm-history-badge-dot { background: var(--terra-500); }

.k-bm-history-chart {
  position: relative;
  width: 100%;
  overflow: visible;
}
.k-bm-history-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* SVG text classes — typography pinned to design tokens, sized one step
   above body-s so labels stay legible when the chart is rendered into a
   narrower card. (renderHistory also renders at 1:1 viewBox-to-CSS-pixel
   scale, so these sizes show up at their declared px on every screen.) */
.k-bm-history-chart .k-bm-svg-axis {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: var(--w-medium);
  fill: var(--bg-graph-axis-text);
  font-variant-numeric: tabular-nums;
}
.k-bm-history-chart .k-bm-svg-band-label {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: var(--w-regular);
  fill: var(--bg-graph-optimal-label);
  letter-spacing: 0.01em;
}
.k-bm-history-chart .k-bm-svg-callout {
  font-family: var(--font-mono);
  font-size: var(--text-body-m);
  font-weight: var(--w-medium);
  fill: var(--white);
  letter-spacing: 0.02em;
}

/* Per-point hover groups — invisible halo + ring fade in on hover so the
   user gets clear "you can hover this point" affordance.                 */
.k-bm-svg-pt {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.k-bm-svg-pt:focus,
.k-bm-svg-pt:focus-visible,
.k-bm-svg-pt * { outline: none; }
.k-bm-svg-pt-halo,
.k-bm-svg-pt-ring { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.k-bm-svg-pt-dot  {                transition: opacity var(--dur-fast) var(--ease-out); }
.k-bm-svg-pt:hover  .k-bm-svg-pt-dot,
.k-bm-svg-pt.is-hot .k-bm-svg-pt-dot  { opacity: 0; }
.k-bm-svg-pt:hover  .k-bm-svg-pt-halo,
.k-bm-svg-pt.is-hot .k-bm-svg-pt-halo { opacity: 0.35; }
.k-bm-svg-pt:hover  .k-bm-svg-pt-ring,
.k-bm-svg-pt.is-hot .k-bm-svg-pt-ring { opacity: 1; }

/* One tooltip per point, anchored above the data dot. Position is set
   inline (left%, top%) by the JS based on the SVG coords. */
.k-bm-svg-tt {
  position: absolute;
  z-index: 4;
  background: var(--bg-graph-tt-bg);
  border: 1px solid var(--bg-graph-tt-border);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  box-shadow: var(--bg-graph-tt-shadow);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  min-width: 180px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.k-bm-svg-tt.is-visible { opacity: 1; }
.k-bm-svg-tt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: var(--w-semibold);
  color: var(--text-primary);
}
.k-bm-svg-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.k-bm-svg-tt-meta {
  padding-left: 16px;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-weight: var(--w-regular);
}

.k-bm-history-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
}

/* Stats footer */
.k-bm-history-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.k-bm-history-stat {
  padding: 14px 16px;
  border: 1px solid var(--bg-graph-stat-border);
  border-radius: var(--r-lg);
}
.k-bm-history-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.k-bm-history-stat-value {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.k-bm-history-stat-value .u {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: var(--w-regular);
  margin-left: 6px;
}

/* Bare variant (no card chrome) for embedding in custom layouts. */
.k-bm-history--bare {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.k-bm-history--bare .k-bm-history-head,
.k-bm-history--bare .k-bm-history-stats { display: none; }

/* Tighter padding on small viewports — chart still scales by viewBox. */
@media (max-width: 768px) {
  .k-bm-history { padding: 18px 16px 14px; }
  .k-bm-history-title { font-size: 20px; }
  .k-bm-history-stats { grid-template-columns: 1fr; }
}