/* Browser-local palette choices; the default palette has no attribute. */
:root[data-preview-palette] {
  --footer-bg: var(--header-bg);
  --chrome-text: #f6f7fa;
  --chrome-muted: #e3e7ed;
  --chrome-subtle: #d6dde5;
  --chrome-border: color-mix(in srgb, var(--header-bg), white 60%);
  --color-text-placeholder: var(--muted);
  --palette-line: var(--line);
  --palette-soft: var(--soft-accent);
  --palette-muted: var(--muted);
  --palette-input: var(--paper);
  --palette-focus: var(--accent);
  --palette-selection: var(--hover-surface);
  --palette-hover-surface: var(--hover-surface);
  --palette-hover-border: var(--hover-border);
  --palette-hover-ink: var(--hover-ink);
  --palette-accent-hover: color-mix(in srgb, var(--accent), black 16%);
  --palette-on-accent: #ffffff;
  --palette-chrome-icon: color-mix(in srgb, var(--header-bg), white 75%);
  --palette-chrome-hover: color-mix(in srgb, var(--header-bg), white 15%);
}
:root[data-preview-palette][data-theme="dark"] {
  --palette-on-accent: var(--paper);
  --palette-accent-hover: color-mix(in srgb, var(--accent), white 18%);
  --palette-selection: var(--hover-surface);
}

/* Separate information panels from the page in every palette and concept. */
:root {
  --content-card-bg: color-mix(in srgb, var(--accent) 28%, var(--surface));
  --content-card-border: color-mix(in srgb, var(--accent) 46%, var(--surface));
  --content-card-hover: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --content-card-hover-border: color-mix(in srgb, var(--accent) 60%, var(--surface));
  --content-card-link: color-mix(in srgb, var(--ink) 86%, var(--accent));
}
:root[data-theme="dark"] {
  --content-card-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --content-card-border: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --content-card-hover: color-mix(in srgb, var(--accent) 17%, var(--surface));
  --content-card-hover-border: color-mix(in srgb, var(--accent) 52%, var(--surface));
}
:root[data-theme] main :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, .review-card, .theme-search-item, .category-directory__panel,
  .seo-link-card, .seo-featured, .seo-pair-card, .seo-sidebar-box,
  .seo-summary, .contact-stat, .contact-editor, .contact-channel, .contact-principle, .legal-doc-card,
  .editorial-source, .editorial-post-nav__card, .seo-faq details,
  .review-structure__card, .review-structure__faq details,
  .review-structure__sources li, .review-structure__updates li,
  .review-structure__cta,
  .review-structure__facts > div, .review-structure__direct,
  .review-structure__side, .review-structure__promo,
  .review-page .pricing-card, .review-page .usage-card,
  .review-page .conclusion-box, .review-page .faq-item,
  .review-page .pc-card, .review-page .theme-feature-item
) {
  --muted: color-mix(in srgb, var(--ink) 92%, var(--surface));
  --palette-muted: var(--muted);
  --theme-muted: var(--muted);
  background: var(--content-card-bg);
  border-color: var(--content-card-border);
}
:root[data-theme] main :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, .review-card, .theme-search-item, .category-directory__panel,
  .seo-link-card, .seo-featured, .seo-pair-card, .seo-sidebar-box,
  .seo-summary, .contact-stat, .contact-editor, .contact-channel, .contact-principle, .legal-doc-card,
  .editorial-source, .editorial-post-nav__card,
  .review-structure__card, .review-structure__side,
  .review-structure__promo, .review-structure__updates li
) :is(
  .focus-link, .read-more-button, .btn-action, .blog-card-more,
  .blog-card-date, .collection-open, .section-more, .card-meta__type,
  .theme-eyebrow, .category-directory__more, .legal-doc-card__current,
  .seo-author__role, .contact-editor__role, .review-structure__eyebrow,
  .editorial-post-nav__direction, .seo-toc a, .sidebar-categories a,
  .review-structure__sources a, .review-structure__side a,
  .review-structure__card a
) {
  color: var(--content-card-link);
}
:root:not([data-preview-style]) main :is(.hero-focus, .seo-summary, .review-structure__cta, .review-page .conclusion-box) {
  background: var(--content-card-bg);
  border-color: var(--content-card-border);
}
:root:not([data-preview-style]) main .review-structure__card h3 {
  color: var(--ink);
}
/* Inputs must remain identifiable against the surrounding panel in either mode. */
:root:not([data-preview-style]) main :is(
  .seo-filters input, .seo-filters select,
  .hero-section .search-form, .search-page .search-page-form
) {
  border-color: color-mix(in srgb, var(--ink) 60%, var(--surface));
}
:root:not([data-preview-style]) main :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, .review-card, .theme-search-item,
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href], .editorial-source,
  .editorial-post-nav__card, .seo-faq details, .review-structure__faq details,
  .review-page .faq-item,
  .review-page .usage-card.is-linked
):is(:hover, :focus-within) {
  background: var(--content-card-hover);
  border-color: var(--content-card-hover-border);
}

/* Keep the card response within its own boundary; the fill carries the hover state. */
:root:not([data-preview-style]) main :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, a.review-card[href], .theme-search-item,
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href],
  a.editorial-source[href], a.editorial-author--linked[href],
  a.editorial-post-nav__card[href], a.search-result[href],
  a.search-discovery-link[href], .seo-faq details,
  .review-structure__faq details, .review-page .faq-item,
  .review-page .usage-card.is-linked
) {
  transition: background-color .18s ease, border-color .18s ease;
}
:root:not([data-preview-style]) main :is(
  .category-directory__heading[href], .category-directory__review[href],
  .search-types a[href], .search-topic-list a[href],
  .search-suggestions a[href], .seo-chip[href],
  .sidebar-categories a[href], a.category-shortcut[href],
  .article-share a.share-button[href]
):is(:hover, :focus-visible) {
  color: var(--ink);
  background: var(--content-card-hover);
  border-color: var(--content-card-hover-border);
  box-shadow: none;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-preview-style]) main :is(
    .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
    .blog-card, a.review-card[href], .theme-search-item,
    a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
    a.contact-channel[href], a.legal-doc-card[href],
    a.editorial-source[href], a.editorial-author--linked[href],
    a.editorial-post-nav__card[href], a.search-result[href],
    a.search-discovery-link[href], .seo-faq details,
    .review-structure__faq details, .review-page .faq-item,
    .review-page .usage-card.is-linked
  ) { transition: none; }
}

/* Keep the page pale in light mode; give the tinted cards quiet depth. */
:root:not([data-theme="dark"]):not([data-preview-style]) main :is(
  .collection-card.card, .catalog-review-card, .blog-card, .review-card,
  .category-directory__panel, .seo-link-card, .seo-featured, .seo-pair-card,
  .seo-sidebar-box, .contact-stat, .contact-editor, .legal-doc-card,
  .editorial-source, .editorial-post-nav__card, .seo-faq details,
  .review-structure__card, .review-structure__faq details,
  .review-structure__sources li, .review-structure__updates li,
  .review-structure__cta,
  .review-structure__facts > div, .review-structure__direct,
  .review-structure__side, .review-structure__promo
) { box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 4%, transparent); }

:root:not([data-theme="dark"]):not([data-preview-style]) main .collection-card .card-item {
  background: color-mix(in srgb, var(--surface) 86%, var(--accent));
}
:root[data-theme="dark"]:not([data-preview-style]) main .collection-card .collection-open,
:root[data-theme="dark"]:not([data-preview-style]) main .collection-card:is(:hover, :focus-within) .card-header-title a,
:root[data-theme="dark"]:not([data-preview-style]) main :is(
  .hero-focus, .feature-card-wide, .catalog-review-card, .blog-card,
  .review-card, .theme-search-item, .seo-link-card, .seo-featured,
  .seo-pair-card, .seo-sidebar-box, .editorial-post-nav__card
) :is(.focus-link, .read-more-button, .btn-action, .blog-card-more, .section-more) {
  color: var(--ink);
}
:root[data-theme="dark"]:not([data-preview-style]) main :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, .review-card, .theme-search-item, .category-directory__panel,
  .seo-link-card, .seo-featured, .seo-pair-card, .seo-sidebar-box,
  .seo-summary, .contact-stat, .contact-editor, .legal-doc-card,
  .editorial-source, .editorial-post-nav__card, .seo-faq details,
  .review-structure__card, .review-structure__faq details,
  .review-structure__sources li, .review-structure__updates li,
  .review-structure__cta, .review-structure__facts > div,
  .review-structure__direct, .review-structure__side,
  .review-structure__promo
) :is(p, li, dt, small) {
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
}
:root[data-theme="dark"] main .review-structure__decision .review-structure__card:first-child h3,
:root[data-theme="dark"]:not([data-preview-style]) main .review-structure__side a,
:root[data-theme="dark"]:not([data-preview-style]) main .review-structure__sources a,
:root[data-theme="dark"]:not([data-preview-style]) main .review-structure__card :is(.review-structure__price, .review-structure__diagnostic strong, a),
:root[data-theme="dark"]:not([data-preview-style]) main .review-structure__promo .review-structure__eyebrow {
  color: var(--ink);
}

.palette-preview {
  position: relative;
  flex: none;
  z-index: 220;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: none;
  font-family: var(--font-main);
  color: var(--ink);
  text-align: left;
}
.palette-preview[hidden], .palette-preview [hidden] { display: none !important; }
.palette-preview button {
  appearance: none;
  font: inherit;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.palette-preview button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.palette-preview__toggle span { display: none; }
.palette-preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.palette-preview__panel {
  position: absolute;
  top: var(--palette-panel-top, calc(100% + 16px));
  right: var(--palette-panel-right, 0px);
  display: flex;
  flex-direction: column;
  width: 410px;
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - var(--palette-widget-top, calc(var(--site-header-height, 72px) + var(--site-admin-offset, 0px) + 16px)) - 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 56px rgb(0 0 0 / 24%);
}
.palette-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 0; flex-shrink: 0; }
.palette-preview__eyebrow { display: block; margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.palette-preview__header h2 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.3; letter-spacing: -.04em; }
.palette-preview__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); }
.palette-preview__close:hover { background: var(--soft-accent); color: var(--ink); border-color: var(--accent); }
.palette-preview__panel > p { margin: 10px 22px 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.palette-preview__tabs { display: flex; flex-shrink: 0; gap: 6px; margin: 0 22px 14px; padding: 4px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.palette-preview__tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; }
.palette-preview__tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 4px rgb(0 0 0 / 6%); }
.palette-preview__tabs button:hover { color: var(--accent); background: var(--soft-accent); }
.palette-preview__tabs span { font-size: 10px; font-weight: 500; color: var(--muted); }
.palette-preview__scroll { min-height: 0; padding: 4px 22px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.palette-preview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 10px; }
.palette-preview__option { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); color: var(--ink); text-align: left; }
.palette-preview__option:hover { background: var(--soft-accent); border-color: var(--accent); }
.palette-preview__option[aria-pressed="true"] { border-color: var(--accent); background: var(--soft-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.palette-preview__swatches { display: flex; width: 100%; height: 32px; border: 1px solid rgb(127 127 127 / 16%); border-radius: 7px; overflow: hidden; }
.palette-preview__swatches i { flex: 1; background: var(--swatch); }
.palette-preview__swatches i:first-child { flex: 1.5; }
.palette-preview__sample { display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 8px 10px; border: 1px solid rgb(127 127 127 / 16%); border-radius: 7px; background: var(--sample-bg); color: var(--sample-ink); overflow: hidden; }
.palette-preview__sample b { font: 750 28px/1 var(--font-main); letter-spacing: -.07em; }
.palette-preview__sample i { flex: 1; height: 22px; border-radius: 4px; background: var(--sample-soft); border: 1px solid var(--sample-accent); }
.palette-preview__sample i:last-child { flex: .7; background: var(--sample-accent); }
.palette-preview__option[data-style="aurora"] .palette-preview__sample { background: var(--sample-soft); }
.palette-preview__option[data-style="dashboard"] .palette-preview__sample i { height: 30px; border-radius: 2px; }
.palette-preview__swatches--dark { display: none; }
:root[data-theme="dark"] .palette-preview__swatches--light { display: none; }
:root[data-theme="dark"] .palette-preview__swatches--dark { display: flex; }
.palette-preview__option-title { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 13px; font-weight: 750; line-height: 1.3; }
.palette-preview__check { flex: none; color: var(--accent); visibility: hidden; }
.palette-preview__option[aria-pressed="true"] .palette-preview__check { visibility: visible; }
.palette-preview__note { color: var(--muted); font-size: 11px; line-height: 1.4; }
.palette-preview__footer { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 22px 18px; border-top: 1px solid var(--line); }
.palette-preview__status { flex-basis: 100%; margin: 0; color: var(--ink); font-size: 12px; font-weight: 650; }
.palette-preview__reset { padding: 0; min-height: 0; border: 0; border-radius: 3px; color: var(--accent); background: transparent; font-size: 12px !important; text-decoration: underline; text-underline-offset: 3px; }
.palette-preview__reset:hover { color: var(--ink); }
.palette-preview__hint { margin: 0; flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 480px) {
  .palette-preview__panel { width: calc(100vw - 24px); border-radius: 16px; }
  .palette-preview__header { padding: 16px 16px 0; }
  .palette-preview__header h2 { font-size: 20px; }
  .palette-preview__panel > p { margin-inline: 16px; margin-bottom: 12px; }
  .palette-preview__tabs { margin-inline: 16px; }
  .palette-preview__scroll { padding-inline: 16px; }
  .palette-preview__footer { padding: 12px 16px 14px; }
}
@media (max-height: 560px) {
  .palette-preview__eyebrow, .palette-preview__hint, .palette-preview__panel > p { display: none; }
  .palette-preview__header { padding-block: 10px; }
  .palette-preview__footer { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .palette-preview button { transition: none; } }
@media print { .palette-preview { display: none !important; } }

:root[data-theme] .review-structure__related-arrow { color: var(--content-card-link); }

/* Nested review links retain their own contrast inside a hovered card. */
:root[data-theme] main .collection-card.card .card-header-title a {
  color: var(--ink);
}
:root[data-theme] main .collection-card.card .card-item {
  transition: background-color .18s ease, color .18s ease;
}
:root[data-theme] main .collection-card.card .card-item:is(:hover, :focus-visible) {
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
}
:root[data-theme] main .collection-card.card .card-item:is(:hover, :focus-visible) .item-name {
  color: inherit;
}
:root[data-theme] main .collection-card.card .card-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] main .collection-card.card,
  :root[data-theme] main .collection-card.card .card-item { transition: none; }
}

/* One interaction treatment for navigational cards in every palette and concept. */
:root[data-theme] body main :is(
  .collection-card.card, .hero-focus, .feature-card-wide,
  .catalog-review-card, .blog-card:has(.blog-card-link[href]),
  a.review-card[href], .theme-search-item:has(a[href]),
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href], a.editorial-source[href],
  a.editorial-author-box[href], a.review-byline[href],
  a.editorial-post-nav__card[href], a.search-result[href], a.search-discovery-link[href],
  .review-structure__related a[href], .review-page .usage-card.is-linked
) {
  box-shadow: none;
  transform: none;
  transition: background-color .18s ease, border-color .18s ease;
}
:root[data-theme] body main :is(
  .collection-card.card, .hero-focus, .feature-card-wide,
  .catalog-review-card, .blog-card:has(.blog-card-link[href]),
  a.review-card[href], .theme-search-item:has(a[href]),
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href], a.editorial-source[href],
  a.editorial-author-box[href], a.review-byline[href],
  a.editorial-post-nav__card[href], a.search-result[href], a.search-discovery-link[href],
  .review-structure__related a[href], .review-page .usage-card.is-linked
):is(:hover, :focus-within) {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}
:root[data-theme] body main :is(
  .collection-card.card, .hero-focus, .feature-card-wide,
  .catalog-review-card, .blog-card:has(.blog-card-link[href]),
  a.review-card[href], .theme-search-item:has(a[href]),
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href], a.editorial-source[href],
  a.editorial-author-box[href], a.review-byline[href],
  a.editorial-post-nav__card[href], a.search-result[href], a.search-discovery-link[href],
  .review-structure__related a[href], .review-page .usage-card.is-linked
):is(:hover, :focus-within) :is(h2, h3, .card-header-title a, .editorial-author__name) {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] body main :is(
  .collection-card.card, .hero-focus, .feature-card-wide,
  .catalog-review-card, .blog-card:has(.blog-card-link[href]),
  a.review-card[href], .theme-search-item:has(a[href]),
  a.seo-link-card[href], a.seo-featured[href], a.seo-pair-card[href],
  a.contact-channel[href], a.legal-doc-card[href], a.editorial-source[href],
  a.editorial-author-box[href], a.review-byline[href],
  a.editorial-post-nav__card[href], a.search-result[href], a.search-discovery-link[href],
  .review-structure__related a[href], .review-page .usage-card.is-linked
) { transition: none; }
}