/* Public controls: one field, one button and one segmented control specification across inner pages.
   Selectors start with :root so this layer wins ties against stylesheets the server appends after it.
   The player stage keeps its own controls. */
:root body.inner {
  --ctl-h: 48px;
  --ctl-r: 12px;
  --ctl-bg: #0c141c;
  --ctl-bd: rgba(255, 255, 255, .14);
  --ctl-bd-hover: rgba(179, 217, 235, .4);
  --ctl-focus: #b3d9eb;
  --ctl-ring: 0 0 0 3px rgba(179, 217, 235, .2);
  --ctl-muted: #9fb4c1;
  --ctl-placeholder: #8ea3b2;
}

/* Fields: search, text, email, select and the enhanced picker. */
:root body.inner main :is(input[type="search"], input[type="text"], input[type="email"], select, .library-picker-trigger):not(.stage *, .comment-bar *, .danmaku-bar *) {
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 0 16px;
  border: 1px solid var(--ctl-bd);
  border-radius: var(--ctl-r);
  background-color: var(--ctl-bg);
  color: #f4f7f8;
  font: 400 15px/1.4 var(--font, "Sora", sans-serif);
  box-shadow: none;
}
:root body.inner main :is(input[type="search"], input[type="text"], input[type="email"], select, .library-picker-trigger):not(.stage *, .comment-bar *, .danmaku-bar *):hover {
  border-color: var(--ctl-bd-hover);
}
:root body.inner main :is(input[type="search"], input[type="text"], input[type="email"], select, .library-picker-trigger):not(.stage *, .comment-bar *, .danmaku-bar *):focus-visible,
:root body.inner main :is(input[type="search"], input[type="text"], input[type="email"]):not(.stage *, .comment-bar *, .danmaku-bar *):focus,
:root body.inner main .library-picker-trigger[aria-expanded="true"] {
  border-color: var(--ctl-focus);
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: var(--ctl-ring);
}
:root body.inner main :is(input, textarea)::placeholder {
  color: var(--ctl-placeholder);
  opacity: 1;
}
:root body.inner main :is(input, select, textarea, button, .btn):disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* Search carries its icon and a quiet clear control. */
:root body.inner main input[type="search"]:not(.stage *) {
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb4c1' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  background-position: 15px 50%;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}
:root body.inner main input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8d7df' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / 18px no-repeat;
  cursor: pointer;
  opacity: .8;
}

/* Field labels speak in one small label voice. */
:root body.inner main :is(.library-search > span, .library-view > span, .benefits-form label) {
  color: var(--ctl-muted);
  font: 400 12px/1.5 var(--font, "Sora", sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}
:root body.inner main .benefits-form label > :is(input, select) {
  letter-spacing: normal;
  text-transform: none;
}

/* Buttons: one primary and one secondary shape. */
:root body.inner main .btn:not(.stage *, .comment-bar *, .danmaku-bar *, .text-link) {
  min-height: var(--ctl-h);
  padding-inline: 22px;
  border-radius: var(--ctl-r);
  font: 500 15px/1.2 var(--font, "Sora", sans-serif);
  letter-spacing: 0;
}
:root body.inner main .btn:not(.ghost):not(.stage *):active {
  background-color: #dfe8ee;
}
:root body.inner main .btn.ghost:not(.stage *) {
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--ctl-bd);
  border-radius: var(--ctl-r);
  background: transparent;
  color: #e6eef3;
  font: 400 14px/1.2 var(--font, "Sora", sans-serif);
  opacity: 1;
}
:root body.inner main .btn.ghost:not(.stage *):hover {
  border-color: var(--ctl-bd-hover);
  background: rgba(232, 241, 255, .05);
  color: #fff;
}
:root body.inner main :is(.btn, button):not(.stage *):focus-visible {
  outline: 2px solid var(--ctl-focus);
  outline-offset: 3px;
}

/* Composers: comments and live comments read as one field with an inset action. */
:root body.inner main :is(#comment-form, #danmaku-form) {
  min-height: 56px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--ctl-bd);
  border-radius: 14px;
  background: var(--ctl-bg);
}
:root body.inner main :is(#comment-form, #danmaku-form):hover {
  border-color: var(--ctl-bd-hover);
}
:root body.inner main :is(#comment-form, #danmaku-form):focus-within {
  border-color: var(--ctl-focus);
  box-shadow: var(--ctl-ring);
}
:root body.inner main :is(#comment-form, #danmaku-form) :is(input, textarea) {
  padding: 12px 0;
  color: #f4f7f8;
  font: 400 15px/1.5 var(--font, "Sora", sans-serif);
}
:root body.inner main :is(#comment-form, #danmaku-form) .btn {
  height: 46px;
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 10px;
  font: 500 14px/1.2 var(--font, "Sora", sans-serif);
}

/* Films series filter: a segmented control, matching phones. */
@media (min-width: 720px) {
  :root body.library-page .filters {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 20px;
    padding: 4px;
    border: 1px solid var(--ctl-bd);
    border-radius: 14px;
    background: rgba(232, 241, 255, .03);
  }
}
:root body.library-page .filter {
  border-radius: 10px;
  color: #b4c5d0;
}
:root body.library-page .filter:hover {
  background: rgba(232, 241, 255, .06);
  color: #fff;
}
:root body.library-page .filter.on {
  background: rgba(179, 217, 235, .16);
  color: #fff;
}
/* Desktop sizing only: phone widths keep the r177 narrow-screen tuning (12.5px under 390, pills under 360). */
@media (min-width: 720px) {
  :root body.library-page .filter {
    min-height: 40px;
    border: 1px solid transparent;
    font: 400 13px/1.4 var(--font, "Sora", sans-serif);
  }
  :root body.library-page .filter.on {
    border-color: transparent;
  }
}
@media (max-width: 719px) {
  :root body.library-page .filter {
    min-height: 44px;
  }
}

/* Phones keep 16px text in fields so iOS does not zoom on focus. */
@media (max-width: 719px) {
  :root body.inner main :is(input[type="search"], input[type="text"], input[type="email"], select, .library-picker-trigger, textarea):not(.stage *) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root body.inner main :is(input[type="search"], input[type="text"], input[type="email"], select, .library-picker-trigger, .btn, .filter, .comment-bar, .danmaku-bar):not(.stage *) {
    transition: border-color .16s ease-out, box-shadow .16s ease-out, background-color .16s ease-out, color .16s ease-out;
  }
}