/* Black surfaces only in night mode. A named important layer wins over legacy
   unlayered !important rules without changing daytime styles or layout. */
@layer bookweb-black-night {
  html[data-bw-night="true"] {
    background: #000 !important;
    color-scheme: dark !important;
  }
  html[data-bw-night="true"] :where(body, body *):not(:where(svg, svg *, img, video, canvas, iframe)) {
    background-color: #000 !important;
    background-image: none !important;
    color: #e6e6e6 !important;
    border-color: #454545 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html[data-bw-night="true"] :where(span, b, strong, em, i, small, label, p, h1, h2, h3, h4, h5, h6, a:not([class])) {
    background-color: transparent !important;
  }
  html[data-bw-night="true"] :where(body, body *)::before,
  html[data-bw-night="true"] :where(body, body *)::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #e6e6e6 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html[data-bw-night="true"] :where(button, input, textarea, select, .feature-entry-btn, .floating-nav > a) {
    outline: 1px solid #454545 !important;
    outline-offset: -1px !important;
  }
  html[data-bw-night="true"] button.theme-btn { position: relative !important; }
  html[data-bw-night="true"] button.theme-btn[title]::after {
    content: attr(title) !important;
    position: absolute; inset: 0; display: grid; place-items: center;
    font: 600 10px/1 system-ui; pointer-events: none;
  }
  /* Keep CSS triangles triangular: their transparent side borders are structural. */
  html[data-bw-night="true"] :where(.ann-ear-l, .ann-ear-r, .sc-ear-l, .sc-ear-r, .sc-ear-l-in, .sc-ear-r-in, .bc-ear-l, .bc-ear-r) {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
  html[data-bw-night="true"] :where(.sc-ear-l-in, .sc-ear-r-in) { border-bottom-color: #000 !important; }
  html[data-bw-night="true"] :where(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
  }
  html[data-bw-night="true"] :where(button, a, [role="tab"]).active,
  html[data-bw-night="true"] :where([aria-selected="true"], [aria-pressed="true"], input:checked) {
    border-color: #ddd !important;
    outline: 1px solid #999 !important;
    outline-offset: -2px !important;
  }
  html[data-bw-night="true"] :where(input, textarea)::placeholder { color: #a6a6a6 !important; opacity: 1 !important; }
  html[data-bw-night="true"] :where(button, a):disabled { color: #888 !important; }
  html[data-bw-night="true"] :where(input, progress) { accent-color: #ddd !important; }
  html[data-bw-night="true"] :where([class*="spinner"], [style*="border-top-color"]) { border-top-color: #ddd !important; }
  html[data-bw-night="true"] :where([class*="progress"][class*="fill"]) { background-color: #b8b8b8 !important; }
  html[data-bw-night="true"] :where(.error, .error-message, [role="alert"]) { color: #ffb4b4 !important; }
  html[data-bw-night="true"] :where(.success, .success-message) { color: #a9e5b7 !important; }
  html[data-bw-night="true"] ::selection { background: #555 !important; color: #fff !important; }
  html[data-bw-night="true"] dialog::backdrop { background: rgb(0 0 0 / 85%) !important; }
  .bw-reader-text[data-bw-theme="dark"] { background: #000 !important; color: #e6e6e6 !important; }
  /* A reader's explicit light/sepia selection remains usable inside its dialog. */
  .bw-reader-text[data-bw-theme="light"] { background: #fff !important; color: #222 !important; }
  .bw-reader-text[data-bw-theme="sepia"] { background: #f5ecd5 !important; color: #403525 !important; }
}