/*
 * Project theme. Linked on every page after the base CSS, so the variables
 * set here win. Variable names and default values: the :root and .dark
 * blocks of the platform's ui/styles/base.css (.base/ui/styles/base.css in a
 * project).
 *
 * Example — a blue accent:
 *
 * :root {
 *   --primary: oklch(0.55 0.2 260);
 *   --primary-foreground: oklch(0.98 0 0);
 *   --sidebar-primary: oklch(0.55 0.2 260);
 *   --ring: oklch(0.55 0.2 260);
 * }
 * .dark {
 *   --primary: oklch(0.7 0.16 260);
 *   --primary-foreground: oklch(0.2 0 0);
 *   --sidebar-primary: oklch(0.7 0.16 260);
 *   --ring: oklch(0.7 0.16 260);
 * }
 *
 * Tailwind classes in templates under app/ work as usual; this file is for
 * variables and the odd rule Tailwind cannot express.
 */

/*
 * Notifications: a long title made the row wider than the panel, because its
 * no-wrap text sets the grid's minimum width. The platform's markup stays; the
 * row keeps to the panel and the title wraps, so it can be read in full.
 */
a.flex.gap-3 > .grid.min-w-0.flex-1 {
  grid-template-columns: minmax(0, 1fr);
}
a.flex.gap-3 > .grid.min-w-0.flex-1 > .flex > span.truncate {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/*
 * A chart is drawn by a script that loads after the page: until then its
 * place is empty. A turning ring says the chart is coming.
 */
[data-chart]:empty {
  display: grid;
  place-items: center;
}
[data-chart]:empty::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: app-spin 0.8s linear infinite;
}
@keyframes app-spin {
  to {
    transform: rotate(360deg);
  }
}