/* Activated only after admin-face.js has read the server-generated face.
   Keep this sheet after engine.css. The original stylesheet remains the fallback. */
html.mono-face {
  --mono-face-link: var(--ms-link);
  --mono-face-hover: var(--ms-link-hover);
  --mono-face-fill: var(--ms-accent);
  --mono-face-fill-ink: var(--ms-ink);
  --mono-face-soft: color-mix(in srgb, var(--ms-accent) 10%, var(--surface));
  --mono-face-border: color-mix(in srgb, var(--ms-accent) 32%, var(--surface));
  --blue: var(--mono-face-link);
  --blue-dark: var(--mono-face-hover);
  --blue-soft: var(--mono-face-soft);
  --blue-soft-text: var(--mono-face-link);
  --bg: var(--ms-page);
  --bg-card: var(--ms-page);
  --navy: #1b1d22;
  --navy-soft: #30343b;
  --text: #454b54;
  --text-2: #626a75;
  --text-3: #737b86;
  --border: #e0e3e7;
  --border-2: #cdd2d9;
  --header-bg: var(--ms-header);
  --header-bg-stuck: var(--header-bg);
  --face-button-radius: calc(var(--radius-sm) + 2px);
  --face-card-shadow: var(--ms-card-shadow);
  --face-card-border: transparent;
  --face-card-bg: var(--surface);
  --face-wallpaper: var(--ms-page);
  --shadow-btn: 0 5px 14px color-mix(in srgb, var(--ms-accent) 18%, transparent);
  color-scheme: light;
  background: var(--face-wallpaper);
}

html.mono-face[data-theme="dark"] {
  --mono-face-link: color-mix(in srgb, var(--ms-accent) 48%, #fff);
  --mono-face-hover: color-mix(in srgb, var(--ms-accent) 30%, #fff);
  --bg: #14171c;
  --bg-card: #191d23;
  --navy: #f0f2f5;
  --navy-soft: #dce0e6;
  --text: #c0c6d0;
  --text-2: #a7b0bf;
  --text-3: #939eae;
  --border: #363f4b;
  --border-2: #465161;
  --header-bg: color-mix(in srgb, var(--ms-header) 9%, #14171c);
  --face-wallpaper: #101318;
  --face-card-shadow: 0 8px 22px rgb(0 0 0 / 25%);
  color-scheme: dark;
}

/* A legacy striped header is also neutral on MONO; lines are unsupported. */
html.mono-face[data-theme="dark"]:is([data-face-header="1"], [data-face-header="3"]) {
  --header-bg: var(--bg-card);
}

html.mono-face[data-face-card="border"] {
  --face-card-shadow: none;
  --face-card-border: var(--blue);
}
html.mono-face[data-face-card="soft"] {
  --face-card-shadow: none;
  --face-card-bg: var(--blue-soft);
}
html.mono-face[data-face-button="2"] { --face-button-radius: 2px; }

html.mono-face body {
  color: var(--text);
  background-color: var(--face-wallpaper) !important;
  background-image: var(--site-bg, none) !important;
}

html.mono-face .card { background: var(--bg-card); border-radius: var(--radius-card); }
html.mono-face .header {
  background: var(--header-bg) !important;
  box-shadow: none;
  border-bottom: 0;
}
html.mono-face .header .nav { background: transparent !important; }

/* Lightened links stay readable in dark mode; filled media controls use
   the selected button accent and ink instead of the link colour. */
html.mono-face :is(.episode__badge, .show-badge--hd) {
  background: var(--mono-face-fill);
  color: var(--mono-face-fill-ink);
}
html.mono-face :is(.episode__thumb:hover, .film:hover, .franchise-item:hover,
  .rand:hover, .season__media:hover) .play-circle,
html.mono-face .play-circle:hover {
  background: var(--mono-face-fill);
  color: var(--mono-face-fill-ink);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--mono-face-fill) 70%, transparent);
}
html.mono-face .track__play {
  background: var(--mono-face-fill);
  color: var(--mono-face-fill-ink);
}
html.mono-face[data-face-surfaces="accent"] {
  --bg-soft: color-mix(in srgb, var(--ms-accent) 8%, var(--surface));
  --bg-soft-2: color-mix(in srgb, var(--ms-accent) 13%, var(--surface));
  --bg-soft-0: color-mix(in srgb, var(--bg-soft) 0%, transparent);
}
html.mono-face[data-face-footer="accent"] .footer {
  background: color-mix(in srgb, var(--ms-accent) 13%, var(--surface)) !important;
}
html.mono-face[data-face-radius="custom"] {
  --radius-card: var(--ms-radius);
  --radius-lg: var(--ms-radius);
  --radius-md: var(--ms-radius-sm);
  --radius-sm: var(--ms-radius-sm);
}
/* When the admin has supplied only one logo, give its dark-mode copy the same
   light backing it was designed for. A separate dark logo is shown unchanged. */
html.mono-face[data-theme="dark"] .mono-face-shared-logo {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: #fff;
}
html.mono-face :is(.nav__link, .nav__link--seasons, .nav__cta) { color: var(--navy); }
html.mono-face :is(.nav__link, .nav__link--seasons, .nav__cta):hover { color: var(--blue) !important; }

/* Content cards, including cards rendered by AJAX, share the chosen treatment.
   The page shell, media overlays, avatars and ratings are intentionally separate. */
html.mono-face[data-face-card] :is(#main, .header) :is(.episode, .char, .actor, .ncard, .news, .award, .faq__item,
  .franchise-item, .nav-seasons__card, .posters-block__card) {
  border: 1px solid var(--face-card-border) !important;
  box-shadow: var(--face-card-shadow) !important;
  background-color: var(--face-card-bg) !important;
}
html.mono-face[data-face-card] :is(#main, .header) :is(.episode, .char, .actor, .ncard, .news, .award, .faq__item,
  .franchise-item, .nav-seasons__card, .posters-block__card):hover {
  border-color: var(--blue) !important;
}
html.mono-face[data-face-radius="custom"] :is(.panel, .show-head__poll, .nav-seasons, .cm-hero__menu,
  .comment-modal__dialog, .trailer-modal__dialog) { border-radius: var(--radius-lg); }
html.mono-face[data-face-radius="custom"] :is(.show-head__poster, .episode__thumb, .char__photo, .actor__photo,
  .franchise-item__poster, .posters-block__cover, .still, .ncard__img,
  .cform__input, .cform__area, .actors-search__input, .news-search__input) {
  border-radius: var(--radius-md);
}

/* Only action buttons receive the button style; icon toggles and star votes retain
   their geometry. Specificity also prevents engine.css's red hover background. */
html.mono-face :is(.btn, .bbcodes, .ui-button, .dlevotebutton, .poll__submit, .cform__submit,
  .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more,
  .episodes-more__btn, .actor__more, .ncard__more) {
  border-radius: var(--face-button-radius) !important;
  font-family: var(--ms-font, inherit);
}
html.mono-face :is(.btn--primary, .poll__submit, .cform__submit, .bbcodes, .btn-danger, .btn-purple, .dlevotebutton) {
  background: var(--ms-accent) !important;
  border: 2px solid color-mix(in srgb, var(--ms-accent) 75%, var(--ms-link)) !important;
  color: var(--ms-ink) !important;
  box-shadow: var(--shadow-btn);
}
html.mono-face :is(.btn--primary, .poll__submit, .cform__submit, .bbcodes, .btn-danger, .btn-purple, .dlevotebutton):hover {
  background: var(--ms-link-hover) !important;
  border-color: var(--ms-link-hover) !important;
  color: #fff !important;
}
html.mono-face[data-face-button="3"] :is(.btn--primary, .poll__submit, .cform__submit, .bbcodes, .btn-danger, .btn-purple, .dlevotebutton) {
  background: transparent !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  box-shadow: none;
}
html.mono-face[data-face-button="3"] :is(.btn--primary, .poll__submit, .cform__submit, .bbcodes, .btn-danger, .btn-purple, .dlevotebutton):hover {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
  background: var(--blue-soft) !important;
}
html.mono-face :is(.show-head__trailer, .btn--ghost, .ui-button, .btn-outline-danger, .btn-outline-dark) {
  background: var(--surface) !important;
  color: var(--blue) !important;
  border: 1px solid var(--border-2) !important;
}
html.mono-face :is(.show-head__trailer, .btn--ghost, .ui-button, .btn-outline-danger, .btn-outline-dark):hover {
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
html.mono-face :is(.tab.is-active, .tab--active, .tab[aria-selected="true"], .player-tab.is-active) {
  background: var(--ms-accent) !important;
  border-color: var(--ms-accent) !important;
  color: var(--ms-ink) !important;
  border-radius: var(--face-button-radius) !important;
}
html.mono-face[data-face-button="3"] :is(.tab.is-active, .tab--active, .tab[aria-selected="true"], .player-tab.is-active) {
  background: var(--blue-soft) !important;
  border: 2px solid var(--blue) !important;
  color: var(--blue) !important;
  box-shadow: none;
}
html.mono-face :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
html.mono-face :is(.home-materials > summary, .home-materials > summary:hover) {
  background: var(--blue-soft) !important;
}
@media (max-width: 768px) {
  html.mono-face .card { border-radius: 0; }
  html.mono-face .header .nav { background: var(--header-bg) !important; }
  html.mono-face .header .logo { min-width: 0; flex: 0 1 auto; }
  html.mono-face .header .logo img { max-width: 100%; height: auto; max-height: 30px; }
  html.mono-face .header__actions { flex-shrink: 0; }
}

html.mono-face { --accent: var(--blue); }
html.mono-face .show-head__subtitle:empty { display: none; }

/* Basic usability is independent of the admin appearance switch. */
html[data-theme="dark"] .mono-face-shared-logo {
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
}
.header .logo { min-width: 0; }
.header .logo > span { min-width: 0; max-width: 100%; }
.header__actions { flex-shrink: 0; }
@media (max-width: 768px) {
  .header .logo { flex: 0 1 auto; }
  .header .logo img { max-width: 100%; height: auto; max-height: 30px; object-fit: contain; }
}

/* Engine player UI: keep provider labels, order, lazy SDK mounts and stack mode. */
.mono-engine-player { width: 100%; min-width: 0; }
.mono-engine-player .players-ui { gap: 8px; margin: 0; }
.mono-engine-player .players-ui > label,
.mono-engine-player .videos.players-ui.players-ui--tabs > label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--navy); font: inherit;
  font-size: 14px; font-weight: 600; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.mono-engine-player .players-ui > input:checked + label,
.mono-engine-player .videos.players-ui.players-ui--tabs > input:checked + label {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.mono-engine-player .players-ui > input:focus-visible + label,
.mono-engine-player .videos.players-ui.players-ui--tabs > input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 3px; }
.mono-engine-player .video-block { border-radius: var(--radius-lg); }
.mono-engine-player .wink-lazy, .mono-engine-player .wink-xf-mount { min-height: 100% !important; height: 100%; }
.mono-engine-player .players-ui--stack > label { cursor: default; }
html.mono-face .mono-engine-player .players-ui > label,
html.mono-face .mono-engine-player .videos.players-ui.players-ui--tabs > label { border-radius: var(--face-button-radius); }
html.mono-face .mono-engine-player .players-ui > input:checked + label,
html.mono-face .mono-engine-player .videos.players-ui.players-ui--tabs > input:checked + label {
  background: var(--ms-accent); color: var(--ms-ink); border-color: var(--ms-accent);
}
html.mono-face[data-face-button="3"] .mono-engine-player .players-ui > input:checked + label,
html.mono-face[data-face-button="3"] .mono-engine-player .videos.players-ui.players-ui--tabs > input:checked + label {
  background: var(--blue-soft); color: var(--blue); border: 2px solid var(--blue);
}

/* Keep native radio tabs keyboard accessible and derive hover from the theme. */
.mono-engine-player .videos.players-ui.players-ui--tabs > input[type="radio"] {
  display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mono-engine-player .videos.players-ui.players-ui--tabs > input:not(:checked) + label:hover {
  background: var(--blue-soft); color: var(--blue); border-color: var(--blue);
}

html.mono-face[data-face-radius="custom"] :is(#main, .header) :is(.episode, .char, .actor, .ncard, .news, .award, .faq__item, .franchise-item, .nav-seasons__card, .posters-block__card) {
  border-radius: var(--radius-card) !important;
}

.mono-news-page { min-width: 0; }
.actorhead__info { min-width: 0; }
.actorhead__name, .actorhead__orig, .actor-specs dd { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .actorhead { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .actorhead__name { font-size: 24px; }
}
.faq__item:not(.is-open) > .faq__a { visibility: hidden; }
@media (max-width: 768px) {
  [data-collapsible]:not(.is-open) > .panel__body { visibility: hidden; }
}
.ep__aside > .side-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.crumbs__current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .ep__aside { grid-template-columns: minmax(0, 1fr); }
}
.mono-news-page .news-head { margin-bottom: 24px; }
.mono-news-page .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .mono-news-page .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mono-news-page .news-grid { grid-template-columns: minmax(0, 1fr); } }
[data-episode-total-row][hidden] { display: none !important; }


/* Same season-tab feedback on home and season pages; retain admin colours. */
html.mono-face .tabs--seasons .tab { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
html.mono-face .tabs--seasons .tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
 html.mono-face .tabs--seasons .tab:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); box-shadow: 0 3px 10px color-mix(in srgb,var(--blue) 20%,transparent); }
 html.mono-face .tabs--seasons .tab.tab--active:hover,
 html.mono-face .tabs--seasons .tab[aria-selected="true"]:hover { background: var(--ms-link-hover) !important; color: #fff !important; border-color: var(--ms-link-hover) !important; }
 html.mono-face[data-face-button="3"] .tabs--seasons .tab:is(.tab--active, [aria-selected="true"]):hover { background: var(--blue-soft) !important; color: var(--blue) !important; border-color: var(--blue) !important; }
}
@media (prefers-reduced-motion: reduce) { html.mono-face .tabs--seasons .tab { transition: none; } }

/* Native tab height must be content-driven; stack labels retain their existing rules. */
.mono-engine-player .videos.players-ui.players-ui--tabs > label { height: auto; }