/* FORA — the utility classes the templates actually use.
 *
 * This file replaces the Tailwind Play CDN (cdn.tailwindcss.com), which was
 * being loaded on every page. That script is a development tool: it ships a
 * compiler to the browser, scans the DOM, and generates the stylesheet at
 * runtime. Tailwind's own documentation says not to use it in production, and
 * on a real connection it costs a render-blocking download plus a visible
 * flash of unstyled content before the CSS it invents arrives.
 *
 * The templates only ever used about ninety utilities, so they are written
 * out here instead. The values are Tailwind's own defaults, so the rendered
 * result is unchanged -- what goes away is the compiler, the round trip to a
 * third-party CDN on every page load, and the flash.
 *
 * Adding a utility class to a template means adding it here. The project's
 * own design system lives in style.css and is the better place for anything
 * that is not a one-off.
 *
 * Tailwind's spacing scale: 1 = 0.25rem, and each step is 0.25rem.
 * Breakpoints: sm 640px, md 768px, lg 1024px.
 */

/* ---------------------------------------------------------------- display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* --------------------------------------------------------------- position */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ------------------------------------------------------------ flex & grid */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }

/* Tailwind's space-y-* puts the margin on every child but the first. */
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }

/* ---------------------------------------------------------------- sizing */
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-\[1100px\] { max-width: 1100px; }

/* --------------------------------------------------------------- spacing */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.pr-8 { padding-right: 2rem; }

/* ------------------------------------------------------------- typography */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* One line, clipped with an ellipsis. Needs min-width:0 on flex children,
   which is why .min-w-0 sits beside it in so many templates. */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ misc */
.cursor-pointer { cursor: pointer; }
.opacity-0 { opacity: 0; }
.rounded-\[22px\] { border-radius: 22px; }

/* The stylesheet's own token, so these track the theme rather than pinning a
   colour that only works on one background. */
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-black\/\[0\.15\] { border-color: var(--border-subtle, rgba(255, 255, 255, 0.15)); }
.hover\:border-black\/\[0\.25\]:hover { border-color: var(--border-strong, rgba(255, 255, 255, 0.25)); }

.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-black\/\[0\.15\] > * + * { border-color: var(--border-subtle, rgba(255, 255, 255, 0.15)); }

.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:text-ink:hover { color: var(--text-primary, #fff); }

/* group-hover needs the parent marked .group; the parent itself gets no
   styling of its own from it. */
.group-hover\:opacity-100 { }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ----------------------------------------------------------- sm: ≥ 640px */
@media (min-width: 640px) {
  .sm\:inline { display: inline; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:divide-y-0 > * + * { border-top-width: 0; }
  .sm\:divide-x > * + * { border-left-width: 1px; border-left-style: solid; }
}

/* ----------------------------------------------------------- md: ≥ 768px */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------- lg: ≥ 1024px */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; }
  .lg\:grid-cols-\[1fr_220px_auto\] { grid-template-columns: 1fr 220px auto; }
}