/* Extra utilities for CSS-variable colors and app-specific helpers */

.bg-surface\/80 { background-color: color-mix(in srgb, var(--bg) 80%, transparent); }
.dark .dark\:bg-surface\/80:is(.dark *) { background-color: color-mix(in srgb, var(--bg) 80%, transparent); }

.bg-on-surface-variant\/20 { background-color: color-mix(in srgb, var(--text-muted) 20%, transparent); }

.text-on-surface-variant\/30 { color: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.text-on-surface-variant\/40 { color: color-mix(in srgb, var(--text-muted) 40%, transparent); }
.text-on-surface-variant\/50 { color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.text-on-surface-variant\/60 { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.text-on-surface-variant\/70 { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.text-on-surface-variant\/80 { color: color-mix(in srgb, var(--text-muted) 80%, transparent); }
.text-on-surface-variant\/90 { color: color-mix(in srgb, var(--text-muted) 90%, transparent); }

.placeholder\:text-on-surface-variant\/30::placeholder { color: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.placeholder\:text-on-surface-variant\/50::placeholder { color: color-mix(in srgb, var(--text-muted) 50%, transparent); }

@media (max-width: 640px) {
  .sm-hidden { display: none !important; }
}

.prose { max-width: 65ch; }
.prose :where(p, ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1em; margin-bottom: 1em; }
.prose :where(h1, h2, h3, h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; line-height: 1.25; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-left: 1.5em; }
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.25em; margin-bottom: 0.25em; }
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--primary); text-decoration: underline; }
.prose-invert :where(h1, h2, h3, h4, p, li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; }