/* Dark theme: html[data-theme="dark"], the default of the domains in config('sites.dark'), or the
   visitor's choice from the footer button (site.js, kept in localStorage). The bands that are dark
   already (header, hero, product lines, footer) stay as they are; the light surfaces turn charcoal
   and their dark text turns light. Red stays the colour of the buttons. The lists are in :where() so that
   the page's own two-class rules (a featured plan, the red head of a column) still win; this file loads last. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #161619;
  --surface: #232328;
  --surface-2: #2d2d33;
  --heading: #f2f3f5;
  --body: #b3b5bc;
  --line: #34343a;
  --grey: #1c1c20;
  --accent-text: var(--accent);
  --red-text: #ff6b6b;
}
:root[data-theme="dark"] body { background: var(--page); }

/* Light surfaces */
:root[data-theme="dark"] :where(.card, .plan, .tile, .addon, .step, .panel, .sec--grey .note, .compare table, .form, .consent,
  .prose .ui.card, .prose .wp-block-column.kteam .kteam-img-social a, .tool-card__icon, .tool-links a, .whois-raw pre, .tld-prices li, .ticket-msg,
  .acct-otp__btn, .acct-secret, .acct-side, .acct-tabbar, .acct-sheet, .acct-lines a, .acct-log, .mplan, .how__transfer, .pd-buy, .pd-card,
  .rv-which__col, .rv-scan, .rv-places, .rv-suggest, .rv-item:has(input:checked), .rv-list__all, #sectors .rv-card, .rv-attack li,
  .web-work__item, .bld-template, .bld-bar, .bld-group, .bld-item__remove, .aff-seg button, .aff-tabs button, .aff-map__expand, .aff-map__empty) {
  background: var(--surface);
}
/* A step lighter than the card they sit on */
:root[data-theme="dark"] :where(.chip--light, .compare tbody .is-featured, .prose blockquote, .prose th, .acct-menu a:hover, .acct-menu button:hover, .acct-sheet a:hover, .acct-sheet button:hover, .acct-sheet a[aria-current="page"]) { background: var(--surface-2); }
@media (max-width: 859px) { :root[data-theme="dark"] .plans--compact .plan__list li { background: var(--surface-2); } }
:root[data-theme="dark"] .plan--featured { background: #0f0f11; box-shadow: inset 0 0 0 1px var(--red); }
:root[data-theme="dark"] .compare thead th:not(.is-featured) { background: #0f0f11; }

/* Dark text on those surfaces */
:root[data-theme="dark"] :where(.h2, .h3, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose a:hover, .prose strong, .prose blockquote, .prose th,
  .prose .has-black-color, .prose .has-page-text-color, .prose .wp-block-rank-math-toc-block a, .prose .ui.statistic > .value, .prose .kteam-title,
  .prose .wp-block-column.kteam .kteam-img-social a, .chip--light, .card__title, .more, .plan__name, .plan__price, .plans--compact .plan__list li,
  .tile__name, .tile__price, .addon, .addon:hover, .pricelist__row, .step h3, .note, .compare tbody th, .compare .is-featured, .faq summary,
  .form, .form .form__title, .field__label, .form .form__alert, .form__status strong, .comments__title, .comment__author, .comment__body,
  .comment__reply:hover, .comments__replying, .consent__title, .consent__options strong, .consent__more, .note strong, .plan strong, .panel strong,
  .tool-card__name, .tool-big, .tool-flag, .tool-table td:first-child, .tool-stats strong, .tool-links a, .tool-choices label, .tool-toggle label,
  .tool-wait, .tool-score, .tool-opps strong, .tool-codes span, .tool-codes code, .tool-contrast strong, .tool-files li,
  .afp-rates strong, .afp-rates span, .afp-terms > summary, .aff-terms > summary, .aff-period a, .aff-stats strong, .aff-card__title, .aff-card__sub,
  .aff-seg button, .aff-map__expand, .aff-map__empty, .aff-code__value, .aff-wallet__row span, .aff-level__now, .aff-table tbody th, .aff-tabs button,
  .aff-pop strong, .aff-places__name, .aff-list__what strong, .aff-list__money strong, .aff-badge,
  .bld-status strong, .bld-group > summary, .bld-sec__name, .bld-choice__card strong, .bld-choice__more a,
  .buy-alert, .buy-line__what strong, .buy-line__status, .buy-line__price, .buy-total, .buy-coupon__on, .choice strong, .buy-facts dt,
  .buy-copy:hover .buy-copy__hint, .buy-copy[data-done] .buy-copy__hint, .domain-result__name, .domain-result__state, .domain-result__price,
  .whois-result__free, .whois-facts dd, .tld-prices li, .booking-day span, .booking-time span, .ticket-msg__head, .ticket-msg__body, .acct-title,
  .acct-link:hover, .acct-prods a, .acct-item__what strong, .acct-item__state, .acct-done, .acct-secret .buy-copy, .acct-sub, .acct-dns__type,
  .acct-warn__title, .acct-cards strong, .acct-check, .acct-usage__label, .acct-mail__head strong, .acct-progress li.is-done, .acct-progress li.is-now,
  .acct-menu a, .acct-menu button, .acct-sheet a, .acct-sheet button, .acct-empty__title, .acct-lines__name, .acct-client, .buy-saved > summary,
  .acct-tools__list a, .acct-choice, .acct-tab.is-on, .acct-log, .plan__billed, .hosting-note strong, .hosting-checks,
  .mplan__name, .mplan__label, .mplan__price, .mplans__note strong, .how__transfer strong, .qa__item h3,
  .pd-crumbs [aria-current], .pd-title, .pd-tags, .pd-h2, .pd-does h3, .pd-buy__price, .pd-buy__points, .pd-rows, .pd-card__name, .pd-card__price,
  .pd-card__more, .pd-faq__item h3, .rv-which__list, .rv-analysis__list, .rv-suggest__text strong, .rv-places__title, .rv-places__what strong,
  .rv-item__head, .rv-item--removed .rv-item__state, .rv-item--paid .rv-item__state, .rv-deposit dd, .rv-list__all, .rv-saved summary, .rv-case__tip,
  .rv-card h3, .rv-attack strong, .rv-reply, .rv-export__label, .tr-list strong, .wlt-totals li:last-child strong, .wlt-table td:nth-child(n+3),
  .web-pack__list, .web-work__name) {
  color: var(--heading);
}
:root[data-theme="dark"] .plan__billed { color: var(--body); }
:root[data-theme="dark"] .acct-menu a[aria-current="page"] { color: var(--white); }

/* Fields */
:root[data-theme="dark"] :where(.field__input, .news__input, .buy-line__years select, .acct-switch select, .bld-colors input[type="color"]) {
  background: var(--page);
  color: var(--heading);
  border-color: #4a4a52;
}

/* Buttons: the charcoal button would vanish, it turns light. Outline buttons on light surfaces follow. */
:root[data-theme="dark"] .btn--ink { background: var(--heading); color: var(--ink); }
:root[data-theme="dark"] .btn--ink:hover { background: var(--white); color: var(--ink); }
:root[data-theme="dark"] .bld-btn-line { color: var(--heading); box-shadow: inset 0 0 0 2px var(--heading); }
:root[data-theme="dark"] .bld-btn-line:hover { background: var(--heading); color: var(--ink); }

/* Pictures a little softer on the dark page */
:root[data-theme="dark"] :where(.card__image, .post__image, .prose img) { filter: brightness(0.92); }

/* The switch in the footer */
.ftr__theme { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ftr__theme svg { flex: none; }
.ftr__theme:hover { color: var(--accent); }
:root[data-theme="dark"] .ftr__theme .i-moon, :root:not([data-theme="dark"]) .ftr__theme .i-sun { display: none; }
html:not(.js) .ftr__theme { display: none; }