/*
 * The handful of things Tailwind utilities cannot express.
 *
 * Everything else - layout, colour, spacing, states - lives on the markup as utility
 * classes. What is left here is bidirectional text, scrollbar and selection styling,
 * and a shimmer background the animation keyframes need.
 */

/* Painted before the Tailwind CDN has generated anything, so the first frame is cream
   rather than white. */
html {
  background: #fdfaf2;
}

html.dark {
  background: #141210;
}

/* Arabic company and person names sit inside otherwise left-to-right pages. Isolating
   them stops the surrounding punctuation from being reordered around them. */
.ar {
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}

/* In a left-to-right column the Arabic should still start at the reading edge. */
.ar-start {
  text-align: left;
}

::selection {
  background: #c7ebe0;
  color: #09654e;
}

.dark ::selection {
  background: #09654e;
  color: #e6f6f1;
}

/* Slim, warm scrollbars for the filter rail and other inner scrollers. */
.scroll-slim {
  scrollbar-width: thin;
  scrollbar-color: #e7dac0 transparent;
}

.scroll-slim::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll-slim::-webkit-scrollbar-thumb {
  background: #e7dac0;
  border-radius: 999px;
}

.dark .scroll-slim {
  scrollbar-color: #423c34 transparent;
}

.dark .scroll-slim::-webkit-scrollbar-thumb {
  background: #423c34;
}

.scroll-none {
  scrollbar-width: none;
}

.scroll-none::-webkit-scrollbar {
  display: none;
}

/* The moving band behind the loading placeholders; the animation itself is a Tailwind
   keyframe, but the gradient it slides has to be declared somewhere. */
.shimmer {
  background-image: linear-gradient(90deg, #f9f3e6 25%, #f2e9d6 50%, #f9f3e6 75%);
  background-size: 200% 100%;
}

.dark .shimmer {
  background-image: linear-gradient(90deg, #221f1a 25%, #2c2823 50%, #221f1a 75%);
}

/* The hidden attribute has to beat utilities like inline-flex, which share its
   specificity and would otherwise win by coming later. */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}