/* ── COA compound-hub metrics section (tiles + charts) ─────────────────────
   Consumed by templates/customer/coa_compound_hub.html when the route passes
   a `metrics` context var. Dark-mode native (Assay: ink #08090A canvas,
   amber #F0B544 accent, verified-green #5BD08A, danger #E4644C).

   Chart MARK palette is the dataviz-validated dark-band step of each Assay
   hue (validate_palette.js, surface #101418, categorical — ALL CHECKS PASS):
     series  #C98500   (amber stepped into the OKLCH 0.48–0.67 dark band)
     good    #2FA866   (verified-green stepped)
     bad     #DE5540   (danger stepped)
   Full-brightness brand tokens are reserved for TEXT weight (tile values,
   semantic tails) and the emphasized timeseries endpoint. */

.tlm {
  /* chart chrome */
  --tlm-surface:      #101418;                          /* card fill ≈ --tlgh-surface-lit base */
  --tlm-ink-bright:   var(--tlgh-text-bright, #e6e6e6);
  --tlm-ink:          var(--tlgh-text, #c9d1d9);
  --tlm-ink-muted:    var(--tlgh-text-muted, #8b949e);
  --tlm-grid-line:    rgba(255, 255, 255, 0.06);        /* hairline, one step off surface */
  --tlm-baseline:     rgba(255, 255, 255, 0.14);
  /* marks (validated dark-band steps) */
  --tlm-series:        #C98500;
  --tlm-series-hot:    #E09E14;   /* hover lift — lightened step of the same hue */
  --tlm-series-bright: #F0B544;   /* emphasized endpoint only */
  --tlm-good:          #2FA866;
  --tlm-bad:           #DE5540;
  --tlm-bad-hot:       #E9705C;
  /* text-weight semantics */
  --tlm-good-text:     #5BD08A;
  --tlm-bad-text:      #E4644C;
  /* faces */
  --tlm-font-display: 'Space Grotesk', 'Satoshi', system-ui, sans-serif;
  --tlm-font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
  --tlm-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  margin: 1.25rem 0 1.75rem;
}
.tlm * { box-sizing: border-box; }

/* ── Section head ── */
.tlm-head { margin-bottom: 0.9rem; }
.tlm-eyebrow {
  font: 600 11px/1 var(--tlm-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlgh-accent, #F0B544);
  margin-bottom: 6px;
}
.tlm-title {
  font-family: var(--tlm-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--tlm-ink-bright);
  margin: 0;
}

/* ── Stat tiles (summary before detail) ── */
.tlm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.tlm-tile {
  background-image: var(--tlgh-surface-lit, linear-gradient(180deg, #181c21 0%, #101418 70%));
  border: 1px solid var(--tlgh-hairline, rgba(255, 255, 255, 0.06));
  border-radius: var(--tlgh-radius-card, 12px);
  padding: 14px 16px 12px;
  min-width: 0;
}
.tlm-tile-value {
  font-family: var(--tlm-font-display);
  font-weight: 700;
  /* proportional figures at display size (never tabular-nums here) */
  font-variant-numeric: normal;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tlm-ink-bright);
}
.tlm-tile-value.is-good { color: var(--tlm-good-text); }
.tlm-tile-value.is-bad  { color: var(--tlm-bad-text); }
.tlm-tile-label {
  margin-top: 6px;
  font: 600 11px/1.35 var(--tlm-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tlm-ink-muted);
}

/* ── Secondary quality chips ── */
.tlm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 14px;
}
.tlm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--tlgh-hairline, rgba(255, 255, 255, 0.06));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.tlm-chip-k { font: 500 11.5px/1.2 var(--tlm-font-body); color: var(--tlm-ink-muted); }
.tlm-chip-v {
  font: 600 12px/1.2 var(--tlm-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tlm-ink-bright);
}
.tlm-chip-v.is-good { color: var(--tlm-good-text); }
.tlm-chip-v.is-bad  { color: var(--tlm-bad-text); }

/* ── Chart card grid ── */
.tlm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 14px;
}
.tlm-grid > * { min-width: 0; }
.tlm-card {
  margin: 0;
  background-image: var(--tlgh-surface-lit, linear-gradient(180deg, #181c21 0%, #101418 70%));
  border: 1px solid var(--tlgh-hairline, rgba(255, 255, 255, 0.06));
  border-radius: var(--tlgh-radius-card, 12px);
  box-shadow: var(--tlgh-elev-1, 0 1px 2px rgba(6, 6, 7, 0.4));
  padding: 16px 16px 14px;
  overflow: hidden;                /* charts never leak past the card */
}
.tlm-card-head { margin-bottom: 10px; }
.tlm-card-title {
  font-family: var(--tlm-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--tlm-ink-bright);
  margin: 0 0 3px;
}
.tlm-card-note {
  font: 400 12.5px/1.45 var(--tlm-font-body);
  color: var(--tlm-ink-muted);
  margin: 0;
}
.tlm-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.tlm-key-bad    { background: var(--tlm-bad); }
.tlm-key-series { background: var(--tlm-series); }
.tlm-more-note {
  font: 400 11.5px/1.4 var(--tlm-font-body);
  color: var(--tlm-ink-muted);
  margin: 8px 0 0;
}

/* ── Horizontal bars (per-lab, per-vendor) — server-rendered HTML ── */
.tlm-hbars { display: flex; flex-direction: column; gap: 3px; }
.tlm-hbar {
  display: grid;
  grid-template-columns: minmax(76px, 148px) minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  padding: 2px 4px;
  border-radius: 6px;
}
.tlm-hbars.has-med .tlm-hbar {
  grid-template-columns: minmax(76px, 148px) minmax(0, 1fr) max-content 64px;
}
.tlm-hbar-name {
  font: 500 12.5px/1.35 var(--tlm-font-body);
  color: var(--tlm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlm-hbar-track {
  position: relative;
  height: 16px;                              /* thin mark, well under the 24px cap */
  min-width: 0;
  box-shadow: inset 1px 0 0 var(--tlm-baseline);  /* the shared baseline */
}
.tlm-hbar-fill {
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  min-width: 2px;
  background: var(--tlm-series);
  border-radius: 0 4px 4px 0;                /* rounded data-end, square baseline */
  transition: background-color 0.16s ease;
}
.tlm-hbar:hover .tlm-hbar-fill,
.tlm-hbar:focus-visible .tlm-hbar-fill { background: var(--tlm-series-hot); }
.tlm-hbar-val {
  font: 500 11.5px/1 var(--tlm-font-mono);
  font-variant-numeric: tabular-nums;        /* a column of numbers → tabular */
  color: var(--tlm-ink-bright);
  text-align: right;
}
.tlm-hbar-med {
  font: 400 10.5px/1 var(--tlm-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tlm-ink-muted);
  text-align: right;
  white-space: nowrap;
}

/* ── SVG plots (histogram, timeseries) — drawn by coa_hub_metrics.js ── */
.tlm-plot { min-height: 230px; }
.tlm-svg { display: block; width: 100%; height: auto; }
.tlm-svg .tlm-grid-line { stroke: var(--tlm-grid-line); stroke-width: 1; shape-rendering: crispEdges; }
.tlm-svg .tlm-baseline  { stroke: var(--tlm-baseline);  stroke-width: 1; shape-rendering: crispEdges; }
.tlm-svg .tlm-axis-text {
  font: 400 10.5px var(--tlm-font-mono);
  font-variant-numeric: tabular-nums;
  fill: var(--tlm-ink-muted);
}
.tlm-svg .tlm-bar        { fill: var(--tlm-series); transition: fill 0.16s ease; }
.tlm-svg .tlm-bar.is-low { fill: var(--tlm-bad); }
.tlm-svg .tlm-bar.is-hot        { fill: var(--tlm-series-hot); }
.tlm-svg .tlm-bar.is-low.is-hot { fill: var(--tlm-bad-hot); }
.tlm-svg .tlm-area { fill: var(--tlm-series); fill-opacity: 0.1; }
.tlm-svg .tlm-line {
  fill: none;
  stroke: var(--tlm-series);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tlm-svg .tlm-endpoint {
  fill: var(--tlm-series-bright);
  stroke: var(--tlm-surface);                /* 2px surface ring */
  stroke-width: 2;
}
.tlm-svg .tlm-endlabel {
  font: 600 11.5px var(--tlm-font-mono);
  font-variant-numeric: tabular-nums;
  fill: var(--tlm-ink-bright);
}
.tlm-svg .tlm-crosshair {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.tlm-svg .tlm-hoverdot {
  fill: var(--tlm-series-hot);
  stroke: var(--tlm-surface);
  stroke-width: 2;
}
.tlm-svg .tlm-hit, .tlm-svg .tlm-overlay { fill: transparent; cursor: crosshair; }
.tlm-svg .tlm-hit { cursor: default; }

/* ── Shared tooltip (value leads, label follows; line keys, not boxes) ── */
.tlm-tooltip {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  max-width: 280px;
  padding: 7px 10px 8px;
  background: #181c21;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px -8px rgba(6, 6, 7, 0.7);
}
.tlm-tip-value {
  font: 600 13px/1.3 var(--tlm-font-display);
  color: #e6e6e6;
  white-space: nowrap;
}
.tlm-tip-key {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 3px;
  background: var(--tlm-series, #C98500);
}
.tlm-tip-label, .tlm-tip-extra {
  font: 500 11px/1.4 var(--tlm-font-body);
  color: #8b949e;
}

/* ── Accessibility ── */
.tlm-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tlm-hbar:focus-visible,
.tlm-svg .tlm-hit:focus-visible,
.tlm-svg .tlm-overlay:focus-visible {
  outline: 2px solid rgba(240, 181, 68, 0.6);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tlm-hbar-fill, .tlm-svg .tlm-bar { transition: none !important; }
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .tlm-hbars.has-med .tlm-hbar { grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) max-content; }
  .tlm-hbar-med { display: none; }          /* value stays in tooltip + table twin */
  .tlm-hbar { grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) max-content; }
}