/* Homepage Results demo (results-demo.js). Series colours are the dashboard's
   fixed platform slots from tokens.css; selection is a static border and tint,
   so state never rests on colour alone. Layout is intrinsic: the intro sits
   beside the panel when both fit, above it otherwise. */
.results-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 28px clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.rd-intro { flex: 1 1 17rem; max-width: 34rem; }
.rd-intro h2 { margin-bottom: 18px; }
.rd-intro p:not(.eyebrow) { margin-bottom: 16px; }
.rd-panel {
  flex: 999 1 min(100%, 38rem);
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: clamp(14px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 40px -28px rgb(23 51 41 / 0.45);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}
.rd-panel p { margin: 0; }
.rd-panel [data-slot="1"] { --slot: var(--viz-1); }
.rd-panel [data-slot="2"] { --slot: var(--viz-2); }
.rd-panel [data-slot="4"] { --slot: var(--viz-4); }

.rd-panel [hidden] { display: none; }
:where(.rd-panel) button {
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rd-panel button:focus-visible,
.rd-scrub:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rd-panel button[aria-disabled="true"] { cursor: default; }

.rd-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.rd-platforms, .rd-views { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}
.rd-pill[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rd-pill[aria-pressed="false"] .rd-swatch { background: transparent; box-shadow: inset 0 0 0 2px var(--slot); }
.rd-pill:not([aria-pressed="true"]):hover { border-color: var(--muted); color: var(--ink); }
.rd-play { padding: 0 18px; border-radius: 5px; border-color: var(--ink); font-weight: 700; }
.rd-play:hover { background: var(--cream); }
.rd-tour { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-weight: 700; }
.rd-range { color: var(--muted); font-size: 14px; }

.rd-swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--slot); }

.rd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); gap: 8px; }
.rd-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 8px;
  text-align: start;
}
.rd-card:disabled { cursor: default; color: var(--ink); opacity: 1; }
.rd-card:not(:disabled):hover { border-color: var(--muted); }
.rd-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.rd-card-label { color: var(--muted); font-size: 14px; font-weight: 700; }
.rd-card-value { font-size: clamp(18px, 0.9rem + 1vw, 26px); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-card-value[data-by-platform] { font-size: 15px; white-space: normal; }

.rd-chart { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rd-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rd-chart-head h3 { margin: 0; font-size: 19px; }
.rd-badge {
  padding: 3px 10px;
  border: 1px dashed var(--bronze);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rd-views { margin-inline-start: auto; }
.rd-view { padding: 0 14px; border-radius: 5px; font-weight: 700; color: var(--muted); }
.rd-view[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rd-view[aria-disabled="true"] { border-style: dashed; color: var(--muted); }
.rd-note { color: var(--muted); font-size: 14px; }

.rd-readout { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.rd-day { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 700; }
.rd-total { color: var(--muted); font-weight: 400; }
.rd-total strong { color: var(--ink); }
.rd-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.rd-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rd-legend li[data-unreported] strong { color: var(--muted); font-weight: 400; font-style: italic; }

.rd-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.rd-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: clamp(11rem, 36vw, 17rem);
  margin-block: -0.6em;
  color: var(--muted);
  font-size: 12px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.rd-frame { min-width: 0; }
.rd-scrub {
  position: relative;
  height: clamp(11rem, 36vw, 17rem);
  border-bottom: 1px solid var(--muted);
  touch-action: pan-y;
  cursor: crosshair;
}
.rd-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rd-grid { stroke: var(--line); stroke-width: 1; }
.rd-line { fill: none; stroke: var(--slot); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rd-bar { fill: var(--slot); stroke: var(--panel); stroke-width: 0.15; }
.rd-point {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: 0 0 -6px -6px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--slot);
  pointer-events: none;
}
.rd-crosshair { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ink); opacity: 0.5; pointer-events: none; }
.rd-days { position: relative; height: 1.6em; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.rd-days li { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rd-days li:first-child { transform: none; left: 0 !important; }
.rd-days li:last-child { transform: none; left: auto !important; right: 0; }

.rd-data { min-width: 0; border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.rd-data summary { min-height: 44px; align-content: center; font-weight: 700; cursor: pointer; }
.rd-data summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rd-data-scroll { max-width: 100%; overflow-x: auto; }
.rd-data table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rd-data caption { text-align: start; color: var(--muted); padding-block: 8px; }
.rd-data th, .rd-data td { text-align: end; padding: 8px; border-bottom: 1px solid var(--line); }
.rd-data th:first-child { text-align: start; }

@media (prefers-reduced-motion: no-preference) {
  .rd-svg[data-animate] .rd-line { animation: rd-draw 0.6s ease-out both; }
  .rd-svg[data-animate] .rd-bar { transform-box: fill-box; transform-origin: bottom; animation: rd-grow 0.45s ease-out both; }
  .rd-point, .rd-crosshair { transition: left 0.12s ease-out, bottom 0.2s ease-out; }
  :where(.rd-panel) button { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}
@keyframes rd-draw { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes rd-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (forced-colors: active) {
  .rd-swatch, .rd-point, .rd-line, .rd-bar { forced-color-adjust: none; }
  .rd-card[aria-pressed="true"], .rd-pill[aria-pressed="true"], .rd-view[aria-pressed="true"] { outline: 2px solid Highlight; }
}