/* Pages built with daisyUI components next to Bootstrap (library, gallery).
   Bootstrap and the legacy stylesheet are unlayered, so they beat daisyUI's layered rules wherever the
   class names overlap (.btn, .card, .table, .badge...). Inside #library-app and #gallery-app those unlayered rules are
   rolled back so only daisyUI and Tailwind apply. Icons are inline SVG (the Font Awesome rules would
   be rolled back too). */
:is(#library-app, #gallery-app) *, :is(#library-app, #gallery-app) *::before, :is(#library-app, #gallery-app) *::after { all: revert-layer; }

:is(#library-app, #gallery-app)[data-theme="wwf"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f4f7f4;
  --color-base-300: #d9dfdb;
  --color-base-content: #16201b;
  --color-primary: #007932;
  --color-primary-content: #ffffff;
  --color-secondary: #9a681c;
  --color-secondary-content: #ffffff;
  --color-accent: #00728f;
  --color-accent-content: #ffffff;
  --color-neutral: #16201b;
  --color-neutral-content: #f4f7f4;
  --color-info: #00728f;
  --color-info-content: #ffffff;
  --color-success: #007932;
  --color-success-content: #ffffff;
  --color-warning: #b35900;
  --color-warning-content: #ffffff;
  --color-error: #9b1c13;
  --color-error-content: #ffffff;
  --radius-selector: .5rem;
  --radius-field: .5rem;
  --radius-box: .75rem;
  --size-selector: .25rem;
  --size-field: .25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  color: var(--color-base-content);
}
:is(#library-app, #gallery-app) :is(.stat-title, .stat-desc) { color: #4a564f; opacity: 1; }
:is(#library-app, #gallery-app) .stat-value { opacity: 1; }
:is(#library-app, #gallery-app) thead th { color: #4a564f; }
:is(#library-app, #gallery-app) svg.lib-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(#library-app, #gallery-app) .lib-title { font-family: 'WWF', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { :is(#library-app, #gallery-app) * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Full-screen photo viewer. The legacy stylesheet defines .bg-black as white with !important, so the
   viewer is styled by id instead of utility names. */
#gallery-app #gal-viewer .modal-box { background-color: #050806; color: #fff; }
#gallery-app #gal-viewer .modal-box :is(figcaption, p, .btn) { color: #fff; }
/* daisyUI fills ghost buttons with a light grey on hover and focus, which hides the white icon on the dark viewer. */
#gallery-app #gal-viewer .btn:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(255, 255, 255, .2) !important; color: #fff !important; border-color: transparent; }

/* Focus ring inside the daisyUI pages: the global ring adds a white halo that fills small round buttons. */
:is(#library-app, #gallery-app) :focus-visible { box-shadow: none !important; outline: 3px solid #0b5cad !important; outline-offset: 2px !important; }
#gallery-app #gal-viewer :focus-visible { outline-color: #fff !important; }

/* Space reserved for content built by scripts, so nothing jumps when it appears. Declared with the same
   id-based specificity as the revert rule above (a plain #id rule would be rolled back by it). */
#library-app #lib-stats { min-height: 6.8rem; }
#library-app #lib-results { min-height: 60vh; }
#gallery-app #gal-cats { min-height: 2.75rem; }
@media (min-width: 768px) { #gallery-app #gal-cats { min-height: 5.1rem; } }
@media (min-width: 1700px) { #gallery-app #gal-cats { min-height: 2.75rem; } }
#gallery-app #gal-stage { min-height: 60vh; }
@media (max-width: 639.98px) { #library-app #lib-stats { min-height: 27rem; } }

/* Gallery categories: one scrolling row on phones instead of five wrapped lines pushing the photos down. */
@media (max-width: 767.98px) {
  #gallery-app #gal-cats { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: .25rem; }
  #gallery-app #gal-cats > .btn { flex: none; scroll-snap-align: start; }
}

/* daisyUI keeps a scrollbar gutter while a dialog is open; it shows as a pale strip beside the dark viewer. */
:root:has(dialog.modal[open]) { scrollbar-gutter: auto; }

/* Photo captions: dark enough behind the text for any picture, including bright skies. */
#gallery-app .gal-scrim { padding-top: 2.5rem; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, 0)); color: #fff; }