/*
 * Supplemental utilities.
 *
 * assets/css/tailwind.min.css is a purged Tailwind v3 build and this host has no
 * Node toolchain, so utilities introduced after that build was generated are
 * defined here by hand and loaded after it. Everything below matches Tailwind
 * v3 defaults (spacing unit 0.25rem; sm 640px, md 768px, lg 1024px, xl 1280px),
 * so a future `npx tailwindcss` rebuild makes this file redundant rather than
 * conflicting.
 */

/* Layout */
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.shrink-0 { flex-shrink: 0; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.top-16 { top: 4rem; }
.inset-x-0 { left: 0; right: 0; }
.bottom-0 { bottom: 0; }
.overscroll-contain { overscroll-behavior: contain; }
.z-30 { z-index: 30; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.max-w-\[calc\(100vw-2rem\)\] { max-width: calc(100vw - 2rem); }

/* Sizing & spacing */
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-3 { padding-bottom: 0.75rem; }

/* Type */
.text-base { font-size: 1rem; line-height: 1.5rem; }
.font-normal { font-weight: 400; }
.underline { text-decoration-line: underline; }

/* Colour */
.text-gray-200 { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); }
.border-white\/20 { border-color: rgb(255 255 255 / 0.2); }
.hover\:bg-gray-900:hover { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
.hover\:bg-transparent:hover { background-color: transparent; }

/* sm: 640px */
@media (min-width: 640px) {
    .sm\:items-center { align-items: center; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lg: 1024px */
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:mt-0 { margin-top: 0; }
    .lg\:static { position: static; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
}

/* xl: 1280px */
@media (min-width: 1280px) {
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:gap-4 { gap: 1rem; }
    .xl\:gap-x-7 { column-gap: 1.75rem; }
    .xl\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .xl\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}