/* Every functional route receives its catalog profile at build time. Layers
   describe real controls/readouts, never recolor canvas pixels or test signals. */
body[data-experience] {
  --activity-main: var(--accent, var(--primary));
  --activity-other: var(--cyan);
  --activity-light: color-mix(in srgb, var(--activity-main) 26%, var(--bg-raised));
  --activity-dim: color-mix(in srgb, var(--activity-main) 9%, var(--bg-raised));
}
body[data-experience="skill"] { --activity-other: var(--pink); }
body[data-experience="quizzes"] { --activity-other: var(--pink); }
body[data-experience="hardware"] { --activity-other: var(--cyan); }
body[data-experience="games"] { --activity-other: var(--cyan); }
body[data-experience="tools"] { --activity-other: var(--cyan); }
body[data-experience="leaderboard"] { --activity-main: var(--amber); --activity-other: var(--pink); }

/* Working surfaces: remove the frame around already independent instruments. */
body[data-activity-skin="shared"] :is(.lab-tool-shell, .arcade-shell, .random-workspace) {
  border: 0; box-shadow: none; background: none;
}
body[data-activity-skin="shared"] :is(.lab-tool-shell, .arcade-shell) { padding: 0; }
body[data-activity-skin="shared"] :is(.lab-tool-shell, .arcade-shell, .random-workspace)::before { display: none; }
body[data-activity-skin="shared"] :is(.kb-controls, .mt-controls, .lab-controls, .arcade-toolbar) {
  justify-content: flex-start; gap: var(--space-2);
}
body[data-activity-skin="shared"] :is(.lab-duration-group, .kb-view-tabs, [class*="-mode-tabs"], .lb-time-filters, .lb-diff-tabs) {
  border: 0; background: color-mix(in srgb, var(--activity-main) 8%, var(--bg)); box-shadow: none;
}
body[data-activity-skin="shared"] :is(.lab-chip, .lab-duration-chip, .kb-view-tab, .lb-time-tab, .lb-diff-tab):is(.active, .is-active, [aria-pressed="true"]),
body[data-activity-skin="shared"] :is([class*="-mode-tab"]):not([class*="-mode-tabs"]):is(.active, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
  border-color: transparent; background: var(--activity-main); color: var(--primary-ink);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--activity-main) 16%, transparent);
}

/* A connected spectrum of live values, with no additional outer window.
   Individual readouts use the same clear color edges as the CPS instrument. */
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stats, .kb-stats, .mt-counts, .parameters-statbar) {
  border: 0; background: none; box-shadow: none; gap: var(--space-2);
}
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stat, .kb-stat, .mt-count, .parameters-stat) {
  --readout: var(--cyan);
  border: 1px solid var(--readout); border-radius: var(--radius-md); box-shadow: none;
  background: linear-gradient(118deg, color-mix(in srgb, var(--readout) 20%, var(--bg-raised)), var(--bg-raised));
}
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stat, .kb-stat, .mt-count, .parameters-stat):nth-child(4n+2) { --readout: var(--amber); }
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stat, .kb-stat, .mt-count, .parameters-stat):nth-child(4n+3) { --readout: var(--pink); }
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stat, .kb-stat, .mt-count, .parameters-stat):nth-child(4n+4) { --readout: var(--lime); }
body[data-activity-skin="shared"] .lab-stat::before { display: none; }
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-stat-value, .kb-stat-value, .mt-count-val, .parameters-stat strong) {
  color: var(--readout, var(--text)); font-variant-numeric: tabular-nums;
}
body[data-activity-skin="shared"] :is(.lab-stat-label, .kb-stat-label, .mt-count-label) { color: var(--readout, var(--text)); }

/* HCI/skill: ready work areas carry one clear accent. Active signal states,
   reaction wait/go fills, and calibration canvases keep their own colors. */
body:is([data-experience="skill"], [data-experience="hardware"]) {
  --hci-ink: var(--bg);
  --hci-pad: color-mix(in srgb, var(--bg) 68%, var(--bg-raised));
  --hci-pad-tone: var(--neon-pink);
}
body[data-experience="hardware"] { --hci-pad-tone: var(--neon-cyan); }
/* The published instruments put saturated color on the edge and value,
   while the reading face remains ink-dark. No second frame around the row. */
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stat, .kb-stat, .mt-count, .stats-grid > .stat-card) {
  --readout: var(--neon-cyan); --readout-next: var(--neon-amber);
  border: 2px solid transparent; border-radius: var(--radius-md); box-shadow: none;
  background: linear-gradient(var(--hci-ink), var(--hci-ink)) padding-box,
    linear-gradient(to right, var(--readout-edge-start, var(--readout)), var(--readout-next)) border-box;
}
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stat, .kb-stat, .mt-count, .stat-card):nth-child(4n+2) { --readout: var(--neon-amber); --readout-next: var(--neon-pink); }
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stat, .kb-stat, .mt-count, .stat-card):nth-child(4n+3) { --readout: var(--neon-pink); --readout-next: var(--neon-lime); }
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stat, .kb-stat, .mt-count, .stat-card):nth-child(4n+4) { --readout: var(--neon-lime); --readout-next: var(--neon-cyan); }
body[data-experience="skill"] .stats-grid:has(~ #click-area) > .stat-card {
  --readout: var(--neon-amber); --readout-next: var(--neon-cyan);
  border: 2px solid transparent; box-shadow: none;
  background: linear-gradient(var(--hci-ink), var(--hci-ink)) padding-box,
    linear-gradient(to right, var(--readout-edge-start, var(--readout)), var(--readout-next)) border-box;
}
body[data-experience="skill"] .stats-grid:has(~ #click-area) > .stat-card:nth-child(2) { --readout: var(--neon-cyan); --readout-next: var(--neon-cyan); }
body[data-experience="skill"] .stats-grid:has(~ #click-area) > .stat-card:nth-child(3) { --readout: var(--neon-lime); --readout-edge-start: var(--neon-cyan); --readout-next: var(--neon-lime); }
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stat-value, .kb-stat-value, .mt-count-val, .stat-value, .stat-label) { color: var(--readout, var(--text)); }
body[data-experience="skill"] #click-area:not(.active-state) { background: var(--hci-pad); border-color: color-mix(in srgb, var(--neon-cyan) 75%, var(--border)); }
body[data-experience="skill"] #click-area:not(.active-state)::before { background: none; }
body[data-experience="skill"] #click-area:not(.active-state) #start-msg { color: var(--pink); }
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-key:not(.is-held):not(.is-active):not(.is-seen), .kb-key:not(.down):not(.seen)) { background: var(--hci-pad); }
body:is([data-experience="skill"], [data-experience="hardware"]) .lab-tool-shell .lab-keyboard { border: 0; background: none; }
body:is([data-experience="skill"], [data-experience="hardware"]) .lab-tool-shell :is(.lab-input, .lab-select, .lab-field > input, .lab-field > select, .lab-field > textarea, .lab-wpm-input, .lab-wpm-passage) { background: var(--hci-pad); }
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-history-list > li, .lab-readout) { background: var(--hci-pad); }
body[data-page="dead-pixel-test"] .dp-hero.glass-panel { background: var(--hci-pad); border-color: var(--neon-cyan); padding: 0; }

body[data-activity-skin="shared"] .lab-stage:not(:where(.is-danger, .is-running, .is-recording, .is-result, .is-finished, .is-active, .is-warning, .is-success, .is-paused)) {
  border-color: var(--hci-pad-tone, var(--accent));
  background: var(--hci-pad, var(--bg-raised));
}
body[data-activity-skin="shared"] .lab-stage:not(:where(.is-danger, .is-running, .is-recording, .is-result, .is-finished, .is-active, .is-warning, .is-success, .is-paused)) .lab-stage-title { color: var(--hci-pad-tone, var(--accent)); }
body[data-activity-skin="shared"] .lab-stage::after { display: none; }
body[data-activity-skin="shared"] :is(.lab-gamepad-panel, .lab-panel:not(:has(canvas)):not(.lab-wpm-panel)) {
  border: 0; background: var(--hci-pad, var(--bg-raised)); box-shadow: none;
}
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-wpm-panel, .lab-panel:has(> canvas), .kb-panel) {
  padding: 0; border: 0; background: none; box-shadow: none;
}
body[data-activity-skin="shared"] :is(.lab-status, .lab-note, .il-trust) { border: 0; box-shadow: none; }
body[data-activity-skin="shared"] :is(.lab-status.is-good, .lab-status--success) { background: color-mix(in srgb, var(--success) 16%, var(--bg)); color: var(--success); }
body[data-activity-skin="shared"] :is(.kb-key.down, .lab-key.is-held, .lab-key.is-active, .lab-key[aria-pressed="true"]) {
  background: var(--cyan); color: var(--primary-ink); border-color: var(--cyan); box-shadow: none;
}
body[data-activity-skin="shared"] :is(.kb-key.seen:not(.down), .lab-key.is-seen:not(.is-held):not(.is-active)) {
  border-color: var(--success); background: color-mix(in srgb, var(--success) 18%, var(--bg-raised)); color: var(--success);
}
body[data-activity-skin="shared"] .lab-wpm-char.is-current { background: var(--amber); color: var(--primary-ink); }
body[data-activity-skin="shared"] .lab-wpm-char.is-correct { color: var(--success); }
body[data-activity-skin="shared"] .lab-wpm-char.is-incorrect { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, var(--bg)); }
body[data-activity-skin="shared"] #spacebar-area.glass-panel.sb-idle,
body[data-activity-skin="shared"] #reaction-area.glass-panel:not(.rt-waiting):not(.rt-ready):not(.rt-toosoon):not(.rt-result) {
  background: var(--hci-pad, var(--bg-raised));
  border-color: var(--neon-pink);
}
body[data-activity-skin="shared"] #spacebar-area.sb-idle :is(.sb-title, .sb-icon),
body[data-activity-skin="shared"] #reaction-area:not(.rt-waiting):not(.rt-ready):not(.rt-toosoon):not(.rt-result) :is(.rt-title, .rt-icon) { color: var(--neon-pink); }
body[data-activity-skin="shared"] .lab-tool-shell :is(.lab-history-list > li, .lab-readout) { border: 0; background: var(--hci-pad, var(--activity-dim)); }
body[data-activity-skin="shared"] .lab-tool-shell :is(.lab-input, .lab-select, .lab-field > input, .lab-field > textarea)::placeholder { color: var(--text-muted); opacity: 1; }

/* Random/creation tools: settings and the output are two halves of a tool,
   not nested dialog cards. */
body[data-experience="tools"] .random-controls { background: linear-gradient(120deg, color-mix(in srgb, var(--lime) 15%, var(--bg-raised)), var(--bg-raised)); }
body[data-experience="tools"] .random-result { border: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 16%, var(--bg-raised)), color-mix(in srgb, var(--lime) 7%, var(--bg-raised))); }
body[data-experience="tools"] .random-result-footer { padding-block-start: var(--space-4); border-block-start: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent); }
body[data-experience="tools"] :is(.random-team, .random-history li) { border: 0; background: color-mix(in srgb, var(--cyan) 12%, var(--bg)); }
body[data-experience="tools"] .random-team:nth-child(even) { background: color-mix(in srgb, var(--pink) 13%, var(--bg)); }

/* Games and boards preserve their artwork. Give surrounding choices, score
   history and ranks the same intentional color roles as the instruments. */
body[data-activity-skin="shared"] :is(.arcade-rank, .history-section, .lb-your-rank-bar) {
  border: 2px solid color-mix(in srgb, var(--accent, var(--primary)) 70%, var(--border));
  background: var(--surface-1); box-shadow: none;
}
body:is([data-experience="skill"], [data-experience="hardware"]) :is(.lab-stage, #reaction-area, #spacebar-area) { border-width: 2px; }
body[data-activity-skin="shared"] .lb-hub-card { border: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, var(--bg-raised)), var(--bg-raised)); }
body[data-activity-skin="shared"] .lb-hub-card::before { display: none; }
body[data-activity-skin="shared"] .lb-hub-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
body[data-activity-skin="shared"] .history-item { border: 0; background: color-mix(in srgb, var(--cyan) 12%, var(--bg-raised)); }
body[data-activity-skin="shared"] .history-item:nth-child(even) { background: color-mix(in srgb, var(--pink) 12%, var(--bg-raised)); }
body[data-activity-skin="shared"] .il-card { border: 0; box-shadow: none; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 22%, var(--bg-raised)), var(--bg-raised)); }
body[data-activity-skin="shared"] .il-card-icon { background: var(--accent); color: var(--primary-ink); }

/* Reading surfaces are shared across every family in components.css. Keep
   the playfield's styling out of the guide; the outer section stays unframed. */
body[data-experience] .seo-section { background: none; }
body[data-experience] :is(.guide-cards, .random-article) {
  inline-size: 100%; max-inline-size: 100%; margin-inline: auto;
}
body[data-experience] .seo-section .guide-cards:first-child { margin-block-start: 0; }
body[data-experience] .guide-cards__grid:only-child { margin-block-start: 0; }
body[data-experience] .random-article { overflow: visible; border-radius: 0; }

/* Light is localized to actions; ordinary text stays sharp. No blur layer. */
body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.glow-btn, .lab-btn--primary, .lab-btn[data-variant="primary"], .random-submit) {
  background: linear-gradient(115deg, var(--activity-main), color-mix(in srgb, var(--activity-main) 65%, var(--activity-other)));
  color: var(--primary-ink); border-color: transparent;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--activity-main) 18%, transparent);
}
body[data-activity-skin="shared"] :is(input, textarea) { caret-color: var(--activity-main); }
body[data-experience] ::selection { color: var(--text); background: color-mix(in srgb, var(--activity-main) 36%, var(--bg)); }
body[data-experience] :is(.lab-history-list, .parameters-search-results, .random-teams) { scrollbar-color: var(--activity-main) var(--bg); scrollbar-width: thin; }

/* The heading introduces the activity; it must not consume the first screen. */
body[data-activity-skin="shared"] > main > .container { padding-block-start: var(--space-2); }
.activity-announcement:empty { display: none; }
body[data-experience] .activity-announcement .cps-announce { margin-block: var(--space-4); }
body[data-experience] .activity-faq { padding-block: var(--space-5) var(--space-7); }
@media (max-width: 600px) {
  body[data-activity-skin="shared"] .page-head { padding-block: var(--space-4); }
  body[data-activity-skin="shared"] .page-head__lede { font-size: var(--step-0); }
  body[data-activity-skin="shared"] .play-cover--compact .play-cover__inner { padding-block: var(--space-3) var(--space-2) !important; }
}

/* Fast feedback for controls, never for measured targets or the playfield. */
@media (prefers-reduced-motion: no-preference) {
  body[data-activity-skin="shared"] :is(.lab-btn, .kb-ctrl-btn, .mt-ctrl-btn, .kb-view-tab, .arcade-toolbar button, .cs2-options button, .random-submit, .parameters-reset, .song-play-btn2) {
    transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  body[data-activity-skin="shared"] :is(.lab-btn, .kb-ctrl-btn, .mt-ctrl-btn, .kb-view-tab, .arcade-toolbar button, .cs2-options button, .random-submit, .parameters-reset, .song-play-btn2):active:not(:disabled) { transform: scale(.97); }
}
@media (hover: hover) and (pointer: fine) {
  body[data-activity-skin="shared"]:not([data-experience="quizzes"]) :is(.lab-btn--primary, .random-submit, .glow-btn):hover:not(:disabled) { box-shadow: 0 6px 24px color-mix(in srgb, var(--activity-main) 28%, transparent); }
  body[data-activity-skin="shared"] .cs2-options button:hover:not(:disabled) { border-color: var(--amber); }
}
@media (hover: none) {
  body[data-activity-skin="shared"] .lab-btn:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-activity-skin="shared"] :is(.lab-btn, .kb-ctrl-btn, .mt-ctrl-btn, .kb-view-tab, .arcade-toolbar button, .cs2-options button, .random-submit, .parameters-reset, .song-play-btn2) { transition: none; }
  body[data-activity-skin="shared"] :is(.lab-btn, .kb-ctrl-btn, .mt-ctrl-btn, .kb-view-tab, .arcade-toolbar button, .cs2-options button, .random-submit, .parameters-reset, .song-play-btn2):is(:hover, :active) { transform: none; }
}