/* 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;
}

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); }
html.mono-face body::before {
  background-color: var(--face-wallpaper);
  /* A separately uploaded wallpaper still takes precedence over the plain colour. */
  background-image: var(--site-bg, none);
}
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; }

/* Keep the native palette for "template" surfaces. Accent surfaces start
   from a neutral dark base rather than inheriting the native violet. */
html.mono-face[data-theme="dark"][data-face-surfaces="accent"] {
  --surface: #20252c;
  --bg-soft-0: rgb(32 37 44 / 0);
}

/* Filled media controls are separate from lightened dark-theme links. */
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[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) { color: var(--navy); }
html.mono-face :is(.nav__link, .nav__link--seasons):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 {
  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;
  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; }
}
@media (max-width: 480px) {
  /* Cap reply indentation: wider admin fonts must not squeeze deep threads
     into a few pixels on small phones. The author name stays visible. */
  html.mono-face .cm .cm-thread .cm-post__face { display: none; }
  html.mono-face .cm .cm-thread .cm-post { padding-left: 0; gap: 0; }
  html.mono-face .cm .cm-thread .cm-thread { padding-left: 0; border-left: 0; }
  html.mono-face .cm .cm-post__author { overflow-wrap: anywhere; }
}

/* 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 {
  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; cursor: pointer; overflow-wrap: anywhere;
}
.mono-engine-player .players-ui > input:checked + label {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.mono-engine-player .players-ui > 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 { border-radius: var(--face-button-radius); }
/* Match the engine's radio selector so its later inline CSS cannot override the admin palette. */
html.mono-face .mono-engine-player .players-ui > input[type="radio"]: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[type="radio"]:checked + label {
  background: var(--blue-soft); color: var(--blue); border: 2px solid var(--blue);
}

@media (max-width: 640px) {
  .cm .cm-post__body, .cm .cm-post__content { min-width: 0; overflow-wrap: anywhere; }
  .cm .cm-thread.comment__replies { padding-left: 10px; margin-left: 0; }
  .cm .cm-thread .cm-post.comment {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0 !important;
    gap: 0;
  }
  .cm .cm-thread .cm-post__face { display: none; }
  .cm .cm-thread .cm-post__body { grid-column: 1; }
  .cm .cm-thread .cm-thread { padding-left: 0; border-left: 0; }
  .cm .cm-post__author, .cm .comment__reply-to { overflow-wrap: anywhere; }
  .cm .comment__actions { flex-wrap: wrap; gap: 4px 10px; }
  .cm .comment__actions :is(button, .comment__rate-link) { min-height: 36px; }
}

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__name, .actorhead__orig { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 370px) {
  #actor-main .actorhead { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; }
  #actor-main .actorhead__name { font-size: 20px; }
}
.faq__item:not(.is-open) > .faq__a { visibility: hidden; }
@media (max-width: 768px) {
  [data-collapsible]:not(.is-open) > .panel__body { visibility: hidden; }
}
.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; }

/* Long sidebar content must not set the minimum width of a mobile grid. */
.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); }
}

html body :is(#main, .footer) :is(.show-head__trailer, .btn--ghost, .btn-outline-danger, .btn-outline-dark, .ui-button, .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more, .episodes-more__btn, .actor__more, .ncard__more, .posters-block__nav-btn, .chars-rail__btn, .franchise-rail__btn, .season-tabs-rail__btn, .footer__social-link, .sbtn):not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { html body :is(#main, .footer) :is(.show-head__trailer, .btn--ghost, .btn-outline-danger, .btn-outline-dark, .ui-button, .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more, .episodes-more__btn, .actor__more, .ncard__more, .posters-block__nav-btn, .chars-rail__btn, .franchise-rail__btn, .season-tabs-rail__btn, .footer__social-link, .sbtn):not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active):hover { background: color-mix(in srgb, var(--blue) 12%, var(--surface)) !important; border-color: var(--blue) !important; color: var(--blue) !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--blue) 18%, transparent) !important; } }
html body :is(#main, .footer) :is(.show-head__trailer, .btn--ghost, .btn-outline-danger, .btn-outline-dark, .ui-button, .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more, .episodes-more__btn, .actor__more, .ncard__more, .posters-block__nav-btn, .chars-rail__btn, .franchise-rail__btn, .season-tabs-rail__btn, .footer__social-link, .sbtn):not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active):focus-visible { background: color-mix(in srgb, var(--blue) 12%, var(--surface)) !important; border-color: var(--blue) !important; color: var(--blue) !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--blue) 18%, transparent) !important; outline: 2px solid var(--blue); outline-offset: 3px; }
html body :is(#main, .footer) :is(.show-head__trailer, .btn--ghost, .btn-outline-danger, .btn-outline-dark, .ui-button, .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more, .episodes-more__btn, .actor__more, .ncard__more, .posters-block__nav-btn, .chars-rail__btn, .franchise-rail__btn, .season-tabs-rail__btn, .footer__social-link, .sbtn):not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active):active { background: color-mix(in srgb, var(--blue) 20%, var(--surface)) !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { html body :is(#main, .footer) :is(.show-head__trailer, .btn--ghost, .btn-outline-danger, .btn-outline-dark, .ui-button, .stills__more, .facts__more, .awards__more, .tracks__more, .comments__more, .episodes-more__btn, .actor__more, .ncard__more, .posters-block__nav-btn, .chars-rail__btn, .franchise-rail__btn, .season-tabs-rail__btn, .footer__social-link, .sbtn):not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active) { transition: none; } }

/* 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; }
}
@media (prefers-reduced-motion: reduce) { html.mono-face .tabs--seasons .tab { transition: none; } }