/* Bridge the engine's multisite styling to this template's components.
   Wallpaper belongs to html; the centered site keeps the chosen page color. */
html[data-msmark] body[class] {
  background: transparent;
}

html[data-msface-active] {
  --face-button-radius: 999px;
}
html[data-msface-active] body {
  /* Use the selected accent itself, not the engine's darkened text shade. */
  --green: var(--face-button-bg);
  --green-dark: color-mix(in srgb, var(--green) 85%, #000);
  --face-button-hover: color-mix(in srgb, var(--face-button-bg) 85%, #000);
  --accent: var(--green);
  --ui-bg-btn: var(--face-button-bg);
  --ui-tt-btn: var(--face-button-ink);
  --ui-bg-btn-hover: var(--face-button-hover);
  --ui-bdc-inp-focus: var(--green);
  --face-loader-bg: var(--face-button-bg, var(--green));
  --face-loader-ink: var(--face-button-ink, #fff);
  --face-loader-border: 0;
}
html[data-msface-active][data-btn="2"] {
  --face-button-radius: 2px;
}
html[data-msface-active][data-btn="3"] body {
  --face-loader-bg: var(--surface);
  --face-loader-ink: var(--green);
  --face-loader-border: 2px solid var(--green);
}

/* Keep the app landing page and its controls independent. */
html[data-msface-active] :is(.btn, .title-fav, .pagination__btn-loader a):not(.app-v3 *, .tg-banner *) {
  border-radius: var(--face-button-radius);
  font-family: var(--font);
}
html[data-msface-active] :is(.btn.btn--primary, .pagination__btn-loader a):not(.app-v3 *, .tg-banner *) {
  background: var(--face-button-bg, var(--green));
  color: var(--face-button-ink, #fff);
}
html[data-msface-active][data-btn="3"] :is(.btn.btn--primary, .pagination__btn-loader a):not(.app-v3 *, .tg-banner *) {
  background: var(--surface);
  color: var(--green);
  border: 2px solid var(--green);
}
html[data-msface-active] :is(.btn.btn--primary, .pagination__btn-loader a):not(.app-v3 *, .tg-banner *):is(:hover, :focus-visible),
html[data-msface-active] .comments-form button.ac-form__btn.btn--primary[type="submit"]:is(:hover, :focus) {
  background: var(--face-button-hover);
  color: var(--face-button-ink, #fff);
  border-color: var(--face-button-hover);
}
html[data-msface-active] button.ms-more[type="button"] {
  border-radius: var(--face-button-radius) !important;
}
html[data-msface-active] .title-actions .btn--primary:is(:hover, :focus-visible),
html[data-msface-active] .comments-form button.ac-form__btn.btn--primary[type="submit"]:is(:hover, :focus) {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 42%, transparent);
}
html[data-msface-active]:not([data-msface-rad="0"]) :is(.pagination__pages > a, .pagination__pages > span, .pagination__nav, .pagination__nav > a, .pagination__nav > span) {
  border-radius: var(--radius-sm);
}
html[data-msface-active]:not([data-msface-rad="0"]) :is(.header__search, .xsort-area, .title-hero__poster, .title-comments, .series-block, .ms-tmdb-block) {
  border-radius: var(--radius);
}

/* The catalog has its own high-specificity loader rules in lord.css. */
html[data-msface-active] .catalog-page .grid-items.grid--6 > #pagination .pagination__btn-loader a {
  border-radius: var(--face-button-radius);
  border: var(--face-loader-border);
  background: var(--face-loader-bg) !important;
  color: var(--face-loader-ink) !important;
}
html[data-msface-active] .catalog-page .grid-items.grid--6 > #pagination .pagination__btn-loader a:is(:hover, :focus-visible) {
  background: var(--face-button-hover) !important;
  color: var(--face-button-ink, #fff) !important;
  border-color: var(--face-button-hover);
}

/* Player selectors use the same active-button preset on title/season/episode pages. */
html[data-msface-active] #pofi__player :is(.title-player__tab, input[type="radio"] + label) {
  border-radius: var(--face-button-radius);
  font-family: var(--font);
  filter: none;
}
html[data-msface-active] #pofi__player :is(.title-player__tab.is-active, input[type="radio"]:checked + label) {
  background: var(--face-button-bg);
  color: var(--face-button-ink);
  border: 0;
}
html[data-msface-active][data-btn="3"] #pofi__player :is(.title-player__tab.is-active, input[type="radio"]:checked + label) {
  background: var(--surface);
  color: var(--green);
  border: 2px solid var(--green);
}
html[data-msface-active] #pofi__player :is(.title-player__tab.is-active, input[type="radio"]:checked + label):is(:hover, :focus-visible) {
  background: var(--face-button-hover);
  color: var(--face-button-ink);
  border-color: var(--face-button-hover);
}

/* Keep the separator neutral; only the search glyph follows the accent. */
html[data-msface-active] body > .site > .header {
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
html[data-msmark] .header :is(.header__search button, .header__search-btn),
html[data-msmark] .header :is(.header__search button, .header__search-btn):is(:hover, :focus, :active) {
  background: transparent;
  color: var(--green);
  border: 0;
  box-shadow: none;
}

/* Dark surfaces remain the template's own; only face choices are carried over. */
html[data-msface-active][data-theme="dark"] body {
  --green: var(--face-dark-accent);
  --green-dark: color-mix(in srgb, var(--green) 85%, #fff);
  --green-soft: color-mix(in srgb, var(--face-button-bg) 14%, transparent);
  --green-chip: color-mix(in srgb, var(--face-button-bg) 22%, transparent);
  --green-chip-text: var(--face-dark-accent);
}
html[data-msmark][data-theme="dark"] .header__search .search-block__input {
  /* The base theme's focused input otherwise adds a black inset frame. */
  box-shadow: none;
}
html[data-msface-active][data-theme="dark"]:not([data-msface-font="0"]) body {
  --font: var(--face-font);
  --font-display: var(--face-font-display);
}
html[data-msface-active][data-theme="dark"]:not([data-msface-rad="0"]) body {
  --radius: var(--face-radius);
  --radius-sm: var(--face-radius-sm);
}
html[data-msface-active][data-theme="dark"]:not([data-msface-card="0"]) body [data-msface-card] {
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow-soft);
}
html[data-msface-active][data-theme="dark"][data-msface-card="2"] body [data-msface-card] {
  border: 1px solid var(--green);
  box-shadow: none;
}
html[data-msface-active][data-theme="dark"][data-msface-card="3"] body [data-msface-card] {
  background: color-mix(in srgb, var(--face-button-bg) 14%, var(--surface));
  box-shadow: none;
}
html[data-msface-active][data-theme="dark"]:not([data-msface-card="0"]) body [data-msface-card] .card__body {
  background: inherit;
}

/* Neutral surfaces are template tokens, independent of the selected accent. */
html[data-msface-active] body {
  --face-native-surface-2: #f7f7f7;
  --face-native-surface-3: #f8f8f8;
}
html[data-msface-active][data-theme="dark"] body {
  --face-native-surface-2: #1e1e1e;
  --face-native-surface-3: #1c1c1c;
}
html[data-msface-active][data-msface-surfaces="template"] body {
  --surface-2: var(--face-native-surface-2);
  --surface-3: var(--face-native-surface-3);
}
html[data-msface-active][data-theme="dark"][data-msface-surfaces="accent"] body {
  --surface-2: color-mix(in srgb, var(--face-button-bg) 14%, var(--face-native-surface-2));
  --surface-3: color-mix(in srgb, var(--face-button-bg) 14%, var(--face-native-surface-3));
}
html[data-msface-active][data-msface-footer="template"] .footer {
  background: var(--face-native-surface-3);
}
html[data-msface-active][data-msface-footer="accent"] .footer {
  background: color-mix(in srgb, var(--face-button-bg) 14%, var(--face-native-surface-3));
}
html[data-msface-active][data-msface-head="2"] body > .site > .header {
  background: color-mix(in srgb, var(--face-button-bg) 10%, var(--surface));
}
html[data-msface-active][data-msface-head="3"] body > .site > .header {
  box-shadow: inset 0 -3px 0 var(--green);
}
html[data-msface-active][data-theme="dark"][data-msface-page="2"] body {
  --bg-page: color-mix(in srgb, var(--face-button-bg) 7%, #171717);
  --bg: var(--bg-page);
}
html[data-msface-active][data-theme="dark"][data-msface-page="3"] body {
  --bg-page: color-mix(in srgb, var(--face-button-bg) 12%, #171717);
  --bg: var(--bg-page);
}
@media (hover: hover) and (pointer: fine) {
  html[data-msface-active][data-theme="dark"]:not([data-msface-card="0"]) body [data-msface-card]:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 45%, transparent);
  }
}