/* Domain colors shared with the interactive profile field. */
html.obs-research body.pn-archive-listing {
  --domain-all: #f1d590;
  --domain-ai: #e7c0ff;
  --domain-ux: #41f0c0;
  --domain-marketing: #ffae43;
  --domain-note: #f1d590;
  --domain-tool: #9eeaff;
  --domain-implementation: #ff718d;
  --domain-work: #c8ff3d;
}

html.obs-research body.pn-archive-listing .filter-btn[data-cat="ALL"] { --domain-tone: var(--domain-all); --domain-wash: rgba(241, 213, 144, .10); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="AI"] { --domain-tone: var(--domain-ai); --domain-wash: rgba(231, 192, 255, .10); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="UX"] { --domain-tone: var(--domain-ux); --domain-wash: rgba(65, 240, 192, .09); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="MARKETING"] { --domain-tone: var(--domain-marketing); --domain-wash: rgba(255, 174, 67, .10); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="NOTE"] { --domain-tone: var(--domain-note); --domain-wash: rgba(241, 213, 144, .10); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="TOOL"] { --domain-tone: var(--domain-tool); --domain-wash: rgba(158, 234, 255, .09); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="IMPL"] { --domain-tone: var(--domain-implementation); --domain-wash: rgba(255, 113, 141, .10); }
html.obs-research body.pn-archive-listing .filter-btn[data-cat="WORK"] { --domain-tone: var(--domain-work); --domain-wash: rgba(200, 255, 61, .09); }

html.obs-research body.pn-archive-listing .filter-btn[data-cat] {
  color: color-mix(in srgb, var(--domain-tone) 72%, var(--obs-muted)) !important;
  border-color: color-mix(in srgb, var(--domain-tone) 28%, transparent) !important;
}

html.obs-research body.pn-archive-listing .filter-btn[data-cat]:hover,
html.obs-research body.pn-archive-listing .filter-btn[data-cat].active {
  color: var(--domain-tone) !important;
  border-color: var(--domain-tone) !important;
  background: var(--domain-wash) !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--domain-tone) 65%, transparent);
}

html.obs-research body.pn-archive-listing .filter-btn[data-cat] .cnt {
  color: inherit !important;
}

/* The all-domain view is deliberately monochrome; color appears after filtering. */
html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .filter-btn[data-cat] {
  color: var(--obs-ink) !important;
  border-color: var(--obs-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .filter-btn[data-cat] .obs-code,
html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .filter-btn[data-cat] .cnt {
  color: inherit !important;
}

html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .filter-btn[data-cat]:hover,
html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .filter-btn[data-cat].active {
  color: var(--obs-ink) !important;
  border-color: var(--obs-ink) !important;
  background: color-mix(in srgb, var(--obs-ink) 8%, transparent) !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--obs-ink) 68%, transparent);
}

html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .article-item[data-cat] .article-title a {
  color: var(--obs-ink) !important;
}

html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .article-item[data-cat] .cat-badge {
  color: var(--obs-muted) !important;
}

html.obs-research body.pn-archive-listing[data-active-domain="ALL"] .article-item[data-cat] .article-title a:hover {
  color: white !important;
  text-decoration-color: color-mix(in srgb, var(--obs-ink) 58%, transparent) !important;
}

/* Once one domain is selected, keep every other control neutral. */
html.obs-research body.pn-archive-listing[data-active-domain]:not([data-active-domain="ALL"]) .filter-btn[data-cat]:not(.active) {
  color: var(--obs-ink) !important;
  border-color: var(--obs-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.obs-research body.pn-archive-listing[data-active-domain]:not([data-active-domain="ALL"]) .filter-btn[data-cat]:not(.active) .obs-code,
html.obs-research body.pn-archive-listing[data-active-domain]:not([data-active-domain="ALL"]) .filter-btn[data-cat]:not(.active) .cnt {
  color: var(--obs-muted) !important;
}

html.obs-research body.pn-archive-listing .article-item[data-cat="AI"] { --domain-tone: var(--domain-ai); }
html.obs-research body.pn-archive-listing .article-item[data-cat="UX"] { --domain-tone: var(--domain-ux); }
html.obs-research body.pn-archive-listing .article-item[data-cat="MARKETING"] { --domain-tone: var(--domain-marketing); }
html.obs-research body.pn-archive-listing .article-item[data-cat="NOTE"] { --domain-tone: var(--domain-note); }
html.obs-research body.pn-archive-listing .article-item[data-cat="TOOL"] { --domain-tone: var(--domain-tool); }
html.obs-research body.pn-archive-listing .article-item[data-cat="IMPL"] { --domain-tone: var(--domain-implementation); }
html.obs-research body.pn-archive-listing .article-item[data-cat="WORK"] { --domain-tone: var(--domain-work); }

html.obs-research body.pn-archive-listing .article-item[data-cat] .article-title a,
html.obs-research body.pn-archive-listing[data-domain] .article-title a {
  color: var(--domain-tone) !important;
}

html.obs-research body.pn-archive-listing .article-item[data-cat] .cat-badge,
html.obs-research body.pn-archive-listing[data-domain] .cat-badge {
  color: color-mix(in srgb, var(--domain-tone) 74%, var(--obs-muted)) !important;
}

html.obs-research body.pn-archive-listing .article-item[data-cat] .article-title a:hover,
html.obs-research body.pn-archive-listing[data-domain] .article-title a:hover {
  color: color-mix(in srgb, var(--domain-tone) 72%, white) !important;
  text-decoration-color: color-mix(in srgb, var(--domain-tone) 58%, transparent) !important;
}

html.obs-research body.pn-archive-listing:not([data-domain]) .pn-page-title-band .obs-name,
html.obs-research body.pn-archive-listing:not([data-domain]) .page-title h1 {
  color: var(--domain-all) !important;
}

html.obs-research body.pn-archive-listing[data-domain="AI"] { --domain-tone: var(--domain-ai); }
html.obs-research body.pn-archive-listing[data-domain="UX"] { --domain-tone: var(--domain-ux); }
html.obs-research body.pn-archive-listing[data-domain="MARKETING"] { --domain-tone: var(--domain-marketing); }
html.obs-research body.pn-archive-listing[data-domain="NOTE"] { --domain-tone: var(--domain-note); }
html.obs-research body.pn-archive-listing[data-domain="IMPL"] { --domain-tone: var(--domain-implementation); }
html.obs-research body.pn-archive-listing[data-domain="WORK"] { --domain-tone: var(--domain-work); }

html.obs-research body.pn-archive-listing[data-domain] .page-title h1,
html.obs-research body.pn-archive-listing[data-domain] .page-title .obs-name {
  color: var(--domain-tone) !important;
}

html.obs-research body.pn-archive-listing[data-domain] .page-title {
  border-bottom-color: color-mix(in srgb, var(--domain-tone) 34%, transparent) !important;
}

/* The module directory belongs to the information-foundation tone. */
html.obs-research body.pn-tool-tone {
  --domain-tone: #9eeaff;
}

html.obs-research body.pn-tool-tone .pn-page-title-band h1,
html.obs-research body.pn-tool-tone .pn-page-title-band .obs-name,
html.obs-research body.pn-tool-tone .cat-title a {
  color: var(--domain-tone) !important;
}

html.obs-research body.pn-tool-tone .pn-page-title-band,
html.obs-research body.pn-tool-tone .security-note {
  border-color: color-mix(in srgb, var(--domain-tone) 42%, transparent) !important;
}

html.obs-research body.pn-tool-tone .cat-badge,
html.obs-research body.pn-tool-tone .pn-page-title-band__label {
  color: color-mix(in srgb, var(--domain-tone) 72%, var(--obs-muted)) !important;
  border-color: color-mix(in srgb, var(--domain-tone) 30%, transparent) !important;
}

html.obs-research body.pn-tool-tone .cat-title a:hover {
  color: color-mix(in srgb, var(--domain-tone) 70%, white) !important;
}

/* The tools directory is neutral until a module is explored. */
html.obs-research body.pn-tool-directory .pn-page-title-band h1,
html.obs-research body.pn-tool-directory .pn-page-title-band .obs-name,
html.obs-research body.pn-tool-directory .pn-page-title-band .obs-code {
  color: var(--directory-title-tone, #f4f1e9) !important;
  transition: color 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.obs-research body.pn-archive-listing .filter-btn[data-cat] {
    transition: none !important;
  }

  html.obs-research body.pn-tool-directory .pn-page-title-band h1,
  html.obs-research body.pn-tool-directory .pn-page-title-band .obs-name,
  html.obs-research body.pn-tool-directory .pn-page-title-band .obs-code {
    transition: none !important;
  }
}