/* Bridges the engine's admin styling (#msface, html.{mark}) to this template.
   The engine palette is light-only, so in dark mode the mark class is removed
   (see syncMultisiteFace in main.tpl) and only the choices are carried over.
   Variables sit on body so they win over the engine's html.{mark} custom properties. */

/* Accent: the chosen color itself; the engine's --green is a text shade. */
html[data-msface-active] body {
  --green: var(--face-button-bg);
  --green-dark: color-mix(in srgb, var(--face-button-bg) 85%, #000);
  --green-deep: var(--face-green);
  --accent-text: var(--face-green);
  --on-accent: var(--face-button-ink);
  --btn-radius: 999px;
}
html[data-msface-active] .home-card {
  --home-card-season-accent: var(--green);
}
html[data-msface-active][data-btn="2"] body {
  --btn-radius: 2px;
}
html[data-msface-active][data-theme="dark"] body {
  --green: var(--face-dark-accent);
  --green-dark: color-mix(in srgb, var(--face-dark-accent) 85%, #fff);
  --green-deep: var(--face-dark-accent);
  --accent-text: var(--face-dark-accent);
  --on-accent: var(--face-dark-ink);
  --hover-soft: color-mix(in srgb, var(--face-button-bg) 14%, transparent);
}

/* Fonts and radii also apply in dark mode, where the engine rule is off. */
:root[data-msface-active]:not([data-msface-font="0"]) {
  --font: var(--face-font);
  --font-display: var(--face-font-display);
}
:root[data-msface-active]:not([data-msface-rad="0"]) {
  --radius: var(--face-radius);
  --radius-sm: var(--face-radius-sm);
}

/* "Нейтральный" content background keeps this template's grey page,
   which separates the white panels. */
:root[data-msface-active][data-msface-page="1"]:not([data-theme="dark"]) {
  --bg: #f2f2f2;
}
:root[data-msface-active]:not([data-theme="dark"]):not([data-wallpaper]) body {
  background: var(--bg);
  color: var(--text);
}
:root[data-msface-active][data-theme="dark"][data-msface-page="2"] {
  --bg: color-mix(in srgb, var(--face-button-bg) 7%, #0f0f0f);
}
:root[data-msface-active][data-theme="dark"][data-msface-page="3"] {
  --bg: color-mix(in srgb, var(--face-button-bg) 12%, #0f0f0f);
}
/* An uploaded background or the engine's outer background (#msp-presentation)
   frames the site; content keeps the page color. */
:root:is([data-wallpaper], :has(#msp-presentation)) body {
  background: var(--bg);
  color: var(--text);
}
@media (min-width: 1280px) {
  :root:is([data-wallpaper], :has(#msp-presentation)) body {
    width: min(100% - 48px, 1504px);
    margin-inline: auto;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.18);
  }
}

/* Small surfaces (inputs, chips, muted blocks). */
:root[data-msface-active][data-theme="dark"][data-msface-surfaces="accent"] {
  --surface-2: color-mix(in srgb, var(--face-button-bg) 14%, #1e1e1e);
  --surface-3: color-mix(in srgb, var(--face-button-bg) 14%, #1c1c1c);
}

/* Header. The engine paints .{mark}-hd in light mode only and draws a line
   for every header choice; only "Акцентная полоса" keeps it, in both themes. */
:root[data-msface-active][data-theme="dark"][data-msface-head="2"] .header {
  background: color-mix(in srgb, var(--face-button-bg) 10%, var(--white));
}
:root[data-msface-active][data-msmark] .header[class] {
  border-bottom: 1px solid var(--border-header);
  box-shadow: none;
}
:root[data-msface-active][data-msmark][data-msface-head="3"]:not([data-msface-head-line="none"]) .header[class] {
  box-shadow: inset 0 -4px 0 var(--accent-text);
}
/* The engine colors every header link #1a1a1a; keep hover/current states. */
:root[data-msface-active] .header :is(.cats-bar a, .header-menu__inner a, .nav-genres__btn):is(:hover, .is-current),
:root[data-msface-active] .header .nav-genres.is-open > .nav-genres__btn {
  color: var(--green-deep);
}
:root[data-msface-active] .header .header__burger[aria-expanded="true"] .header__burger-lines {
  background: transparent;
}
:root[data-msface-active] .header .header__burger-lines {
  background: currentColor;
}

/* Cards. The engine paints .{mark}-cd in light mode only. */
:root[data-msface-active][data-theme="dark"]:not([data-msface-card="0"]) [data-msface-card] {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
:root[data-msface-active][data-theme="dark"][data-msface-card="2"] [data-msface-card] {
  border: 1px solid var(--green);
  box-shadow: none;
}
:root[data-msface-active][data-theme="dark"][data-msface-card="3"] [data-msface-card] {
  border-color: transparent;
  background: color-mix(in srgb, var(--face-button-bg) 14%, var(--white));
  box-shadow: none;
}

/* Footer. */
:root[data-msface-active][data-msface-footer="inherit"] .footer {
  background: var(--surface-2);
}
:root[data-msface-active][data-msface-footer="accent"] .footer {
  background: color-mix(in srgb, var(--face-button-bg) 14%, var(--white));
}

/* Accent surfaces tint inactive season tabs, so the active one needs a stronger fill. */
:root[data-msface-active] .ms-graph.ms-graph--tabs .ms-graph__tab[type="button"].is-active {
  background: color-mix(in srgb, var(--green) 26%, var(--surface));
}

/* Buttons follow the admin button shape; secondary title actions keep their
   neutral fill. Season and episode players use input + label tabs. */
:root[data-msface-active] :is(.title-watch, .title-trailer, .title-fav, .ms-more, .btn.btn--primary, .comments-form__submit, .comments-form .ac-form__btn, .pagination__btn-loader a, .series-ep__watch, .title-player__tab, .videos.players-ui > label) {
  border-radius: var(--btn-radius);
}
:root[data-msface-active][data-btn="3"] :is(.title-watch, .btn.btn--primary, .comments-form__submit, .comments-form .ac-form__btn, .pagination__btn-loader a, .series-ep__watch, .title-player__tab.is-active, .videos.players-ui > input:checked + label) {
  background: transparent;
  color: var(--green-deep);
  box-shadow: inset 0 0 0 2px var(--green-deep);
}
:root[data-msface-active][data-btn="3"] :is(.title-watch, .btn.btn--primary, .comments-form__submit, .comments-form .ac-form__btn, .pagination__btn-loader a, .series-ep__watch, .title-player__tab.is-active, .videos.players-ui > input:checked + label):is(:hover, :focus-visible) {
  background: var(--hover-soft);
  color: var(--green-deep);
}
html[data-msface-active]:not([data-btn="3"]) :is(.title-watch, .btn.btn--primary, .comments-form__submit, .comments-form .ac-form__btn, .pagination__btn-loader a, .series-ep__watch) {
  background: var(--face-button-bg);
  color: var(--face-button-ink);
  border-color: transparent;
}
html[data-msface-active]:not([data-btn="3"]) :is(.title-watch, .btn.btn--primary, .comments-form__submit, .comments-form .ac-form__btn, .pagination__btn-loader a, .series-ep__watch):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--face-button-bg) 85%, #000);
  color: var(--face-button-ink);
}
html[data-msface-active]:not([data-theme="dark"]) .header .search input {
  background: #fff;
  color: #222;
}