.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; }

/* Dialog visibility — reliable at every breakpoint (beats Tailwind sm:grid). */
.dlg { display: none !important; }
.dlg.open { display: block !important; }
@media (min-width: 640px) {
  .dlg.open { display: grid !important; place-items: center; padding: 1.5rem; }
}

/* ============================================================
   LIGHT MODE — per-device theme (toggled via html.light class,
   saved to localStorage). Remaps the dark slate palette to a
   clean light palette. Dark is the default (no class).
   ============================================================ */
html.light body { background: #f1f5f9 !important; color: #0f172a; }

/* Backgrounds: dark slates -> whites / light grays */
html.light .bg-slate-950,
html.light .bg-slate-900 { background-color: #ffffff !important; }
html.light .bg-slate-800 { background-color: #e2e8f0 !important; }
html.light .bg-slate-700 { background-color: #cbd5e1 !important; }
html.light .bg-slate-600 { background-color: #94a3b8 !important; }

/* Semi-transparent panels (headers, cards, overlays) */
html.light .bg-slate-950\/90 { background-color: rgba(255,255,255,0.9) !important; }
html.light .bg-slate-900\/90 { background-color: rgba(255,255,255,0.9) !important; }
html.light .bg-slate-800\/60 { background-color: rgba(226,232,240,0.7) !important; }
html.light .bg-slate-800\/70 { background-color: rgba(226,232,240,0.8) !important; }
html.light .bg-slate-900\/60 { background-color: rgba(241,245,249,0.8) !important; }

/* Text: light slates -> dark, keep good contrast */
html.light .text-slate-100 { color: #0f172a !important; }
html.light .text-slate-200 { color: #1e293b !important; }
html.light .text-slate-300 { color: #334155 !important; }
html.light .text-slate-400 { color: #475569 !important; }
html.light .text-slate-500 { color: #64748b !important; }
html.light .text-slate-600 { color: #64748b !important; }
/* text-slate-900 stays dark (already dark on light) */

/* Borders */
html.light .border-slate-800,
html.light .border-slate-700 { border-color: #e2e8f0 !important; }

/* Inputs & search fields */
html.light input,
html.light textarea,
html.light select { color: #0f172a; }
html.light input::placeholder,
html.light textarea::placeholder { color: #94a3b8; }

/* ---- Header polish: soft shadow instead of a hard dark border ---- */
html.light header {
  box-shadow: 0 1px 10px rgba(15,23,42,0.06);
  border-bottom-color: transparent !important;
}

/* ---- Header icon buttons: force dark, high-contrast icons on the
   light-gray button chips (they otherwise inherit near-white text). ---- */
html.light header button i { color: #334155; }
/* keep the coloured action buttons' icons white (Donate = green bg, etc.) */
html.light header .bg-green-600 i,
html.light header .bg-green-600 { color: #ffffff; }

/* ---- Feed / sponsor / banner cards: add a gentle shadow so white
   cards separate cleanly from the light-gray page background. ---- */
html.light article,
html.light #feed > div,
html.light .rounded-2xl.border { box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); }

/* ---- Topic tabs: only restyle INACTIVE pills (they carry bg-slate-900).
   The active tab keeps its green bg-green-500 (do NOT override it). ---- */
html.light #topics button.bg-slate-900 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }

/* ---- "Positive only" toggle: hairline border, white surface when off ---- */
html.light #posToggle.bg-slate-900 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }

/* ---- Dialog / sheet panels sit on white with a strong shadow ---- */
html.light .dlg > div,
html.light .dlg .bg-slate-900,
html.light .dlg .bg-slate-950 { box-shadow: 0 20px 50px rgba(15,23,42,0.18); }

/* ---- Search bar: subtle inner surface ---- */
html.light #search { background-color: #ffffff !important; border-color: #e2e8f0 !important; }

/* ---- Muted/hover borders that use slate-700 on hover ---- */
html.light .hover\:border-slate-700:hover { border-color: #cbd5e1 !important; }