/*
  RARE profile chart - core visual styles.

  Scoped to #stage (the chart's mount point) rather than to `body`, so the
  chart looks the same whether it's hosted on the chart-test harness page or
  inside the dashboard - it never depends on the host page's own styling.
  Any page that mounts the chart via rare-chart.js needs a container with
  id="stage" and should load this stylesheet.
*/
:root {
  --measured: #008ead;
  --predicted: #99d2de;
  --unmeasured: #d8dbde;
  --rail: #eceef0;
  --chart-ink: #1f2933;
  --chart-ink-soft: #6b7280;
  --rule: #e5e7eb;
}

#stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 4px 0 28px;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--chart-ink);
}
#stage svg { max-width: 1320px; width: 100%; height: auto; }

.leaf:hover { cursor: pointer; }
.leaf text { transition: opacity .2s ease; }
.leaf .row-hl { fill: transparent; transition: fill .12s; }
.leaf:hover .row-hl { fill: rgba(31,41,51,.075); }

/* Set by a host page (e.g. the dashboard) via chart's exposed .leaf elements
   to cross-highlight a signal that's hovered/pinned from outside the chart. */
.leaf.rare-linked { filter: drop-shadow(0 0 3px rgba(7,149,178,.34)); }
.leaf.rare-linked .row-hl { display: block; fill: rgba(7,149,178,.15); }
.leaf.rare-pinned { filter: drop-shadow(0 0 4px rgba(7,149,178,.46)); }
.leaf.rare-pinned .row-hl { display: block; fill: rgba(7,149,178,.18); stroke: none; }

.ring-hit { cursor: pointer; transition: filter .12s; }
.ring-hit:hover { filter: brightness(.94); }

/* The only easing in the interaction: the middle whites out and the
   connection layer comes up together. Tooltips and per-line highlighting
   stay instant - a delay there just reads as the chart being slow. */
.conn { transition: opacity .2s ease; }
#veil { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .conn, #veil, .leaf text { transition: none; }
}

/* ---------- tooltips ---------- */
#tip {
  position: fixed; pointer-events: none; opacity: 0;
  z-index: 20;
  font-family: 'DM Sans', 'Roboto', sans-serif;
}
#tip-pin {
  position: fixed; pointer-events: none; opacity: 0;
  z-index: 19;
  font-family: 'DM Sans', 'Roboto', sans-serif;
}
/* the pinned card is the only tooltip that accepts a cursor - the hover card
   must stay transparent to the pointer or it would chase itself */
#tip-pin .card { pointer-events: auto; }

.card {
  position: relative; border-radius: 16px; padding: 15px 19px;
  box-shadow: 0 10px 30px rgba(15,23,32,.18); min-width: 210px;
}
.card.pinned { box-shadow: 0 0 0 2px #1f2933, 0 10px 30px rgba(15,23,32,.22); }
.card.pinned .name { padding-right: 26px; }
.card-dismiss {
  position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: currentColor; background: color-mix(in srgb, currentColor 13%, transparent);
  opacity: .8; cursor: pointer; transition: opacity .15s ease, background .15s ease;
}
.card-dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 24%, transparent); }
.card-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.card-dismiss svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.card .name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.card .btm { display: flex; align-items: flex-end; gap: 18px; margin-top: 11px; }
.card .score { font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap; }
.card .score i { font-size: 13px; font-style: normal; font-weight: 500; margin-left: 1px; }
.card .path { font-size: 12px; line-height: 1.35; opacity: .82; }
.card .flag { font-size: 12.5px; font-weight: 500; margin-top: 9px; opacity: .85; }

.card.node { min-width: 268px; padding-bottom: 6px; }
.card.node .meta { font-size: 12px; margin-top: 3px; opacity: .8; }
.card.node .panel {
  background: rgba(255,255,255,.94); border-radius: 10px;
  padding: 12px 14px; margin: 14px 0; color: var(--chart-ink);
}
.card.node .covbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-bottom: 11px; }
.card.node .covrow {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 3px 0; color: var(--chart-ink-soft);
}
.card.node .covrow b { color: var(--chart-ink); font-weight: 500; }
.card.node .key { display: flex; align-items: center; gap: 7px; }
.card.node .dot { width: 9px; height: 9px; border-radius: 2px; }