/* Shared post-run results view + chart styles (spec §4.3/§4.4:
   one renderer, every environment). Pages define the color vars. */

/* ---- live practice sparkline (every environment's header) ----
   Injected into a `.hud-spark-host` element; empty when there's no data yet,
   so :empty collapses it. Var fallbacks keep it correct even if a page's
   theme omits one. Blue line so it never collides with target colors. */
.hud-spark-host:empty { display: none; }
/* Sits just to the LEFT of the HUD text (which is right-anchored), so it stays
   in the top header strip and never grows down into the play area. #hud is a
   positioned ancestor in every environment, so right:100% anchors to it. */
.hud-spark-host:not(:empty) {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 12px;
  padding: 5px 7px 3px;
  background: rgba(16, 18, 22, .9);
  border: 1px solid var(--faint, #2a2e36);
  border-radius: 7px;
  text-align: right;
  pointer-events: none;
  white-space: nowrap;
}
.hud-spark-host .spark-svg { display: block; width: 208px; height: 50px; }
.hud-spark-host .spark-cap { font-size: 11px; color: var(--dim, #565c66); margin-top: 2px; }
.hud-spark-host .spark-area { fill: rgba(122, 162, 247, .14); stroke: none; }
.hud-spark-host .spark-base { stroke: var(--faint, #2a2e36); stroke-width: 1; }
.hud-spark-host .spark-line {
  fill: none;
  stroke: var(--caret, #7aa2f7);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}


#results {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh 24px 24px;
}

#res-hero { text-align: center; }
#res-hero .res-title {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
#res-hero .res-bps {
  font-size: 72px;           /* hero figure; same face as everything else */
  color: var(--fg);
  line-height: 1.15;
}
#res-hero .res-bps span { font-size: 22px; color: var(--dim); }
#res-hero .res-sub { color: var(--dim); font-size: 16px; margin-top: .3rem; }
#res-hero .res-sub b { color: var(--fg); font-weight: normal; }
#res-hero .res-note { color: var(--dim); font-size: 13px; margin-top: .6rem; }
#res-hero .res-note.warn { color: var(--err); }

#res-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
  max-width: 860px;
}
.tile {
  border: 1px solid var(--faint);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 118px;
}
.tile .t-label { color: var(--dim); font-size: 11px; letter-spacing: .05em; }
.tile .t-value { color: var(--fg); font-size: 24px; margin-top: 2px; }
.tile .t-sub { color: var(--dim); font-size: 11px; margin-top: 2px; }

#res-charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 1.8rem;
  width: 100%;
  max-width: 1000px;
}
#res-charts figure { flex: 1 1 380px; max-width: 500px; }
#res-charts figcaption {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
#res-charts .err-key { color: var(--err); float: right; }
#res-charts svg { width: 100%; height: auto; display: block; }
/* Chart mark classes are global: the results view, the leaderboard detail
   rows, and the gallery sparklines/progress strips all draw with them. */
svg .grid { stroke: var(--faint); stroke-width: 1; }
svg .axis-label { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
svg .data-line { stroke: var(--caret); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
svg .data-wash { fill: var(--caret); opacity: .1; }
svg .data-dot { fill: var(--caret); stroke: var(--bg); stroke-width: 2; }
svg .data-bar { fill: var(--caret); }
svg .err-tick { fill: var(--err); }
svg .marker-line { stroke: var(--dim); stroke-width: 1; }

#res-footer { color: var(--dim); font-size: 13px; margin-top: 2rem; }
#res-footer b { color: var(--fg); font-weight: normal; }


/* Consent banner (spec §6) — fixed bottom strip, shown on the public deploy only. */
#consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: #12141a; color: #cfd3dc; border-top: 1px solid #2a2f3a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5;
}
#consent-banner span { max-width: 74ch; }
#consent-banner b { color: #ffd479; font-weight: normal; }
#consent-banner button {
  flex: none; cursor: pointer; padding: 0.4rem 1.1rem;
  background: #2a6df4; color: #fff; border: 0; border-radius: 6px; font: inherit;
}