/* Dark mode for the compiled app: overrides its fixed set of Tailwind colours.
   Applied when <html data-theme="dark"> (set by theme.js and the inline script in index.html). */
html[data-theme="dark"] { color-scheme: dark; background: #000; }

html[data-theme="dark"] .bg-\[\#FBFBFD\] { background-color: #000; }
html[data-theme="dark"] .bg-white\/70 { background-color: rgb(28 28 30 / .7); }
html[data-theme="dark"] .hover\:bg-white\/80:hover { background-color: rgb(44 44 46 / .8); }
html[data-theme="dark"] .bg-\[\#F5F5F7\] { background-color: #2C2C2E; }
html[data-theme="dark"] .hover\:bg-\[\#E5E5E7\]:hover { background-color: #3A3A3C; }
html[data-theme="dark"] .border-\[\#E5E5E7\] { border-color: #38383A; }
html[data-theme="dark"] .shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.02\)\] { box-shadow: none; }

html[data-theme="dark"] .text-\[\#1D1D1F\] { color: #F5F5F7; }
html[data-theme="dark"] .text-\[\#86868B\] { color: #98989D; }
html[data-theme="dark"] .placeholder-\[\#86868B\]::placeholder { color: #6E6E73; }
html[data-theme="dark"] a.text-\[\#0071E3\] { color: #2997FF; }
html[data-theme="dark"] a.hover\:text-\[\#0077ED\]:hover { color: #47A6FF; }

html[data-theme="dark"] .bg-green-50 { background-color: rgb(48 209 88 / .14); }
html[data-theme="dark"] .text-green-600 { color: #30D158; }

/* The switch: sits on the opposite side of the language button, in the same row. */
.theme-switch-row {
  position: absolute; top: 1rem; left: 0; right: 0; z-index: 10;
  width: min(42rem, 100% - 2rem); margin: 0 auto;
  display: flex; justify-content: flex-start; pointer-events: none;
}
@media (min-width: 640px) { .theme-switch-row { top: 1.5rem; width: min(42rem, 100% - 3rem); } }
@media (min-width: 768px) { .theme-switch-row { top: 2rem; width: min(42rem, 100% - 4rem); } }

.theme-switch {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9999px;
  border: 1px solid #E5E5E7; background: rgb(255 255 255 / .7); color: #1D1D1F;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 2px 4px rgba(0,0,0,.02);
  transition: background-color .2s, border-color .2s, color .2s;
}
.theme-switch:hover { background: rgb(255 255 255 / .8); }
.theme-switch:focus-visible { outline: 2px solid #0071E3; outline-offset: 2px; }
.theme-switch svg { width: 18px; height: 18px; }
html[data-theme="dark"] .theme-switch { border-color: #38383A; background: rgb(28 28 30 / .7); color: #F5F5F7; box-shadow: none; }
html[data-theme="dark"] .theme-switch:hover { background: rgb(44 44 46 / .8); }
html[data-theme="dark"] .theme-switch:focus-visible { outline-color: #2997FF; }