/* ─── Utilities ──────────────────────────────────────────────────────
   Hand-rolled Tailwind-style utility classes extracted from per-page
   style blocks across dozens of HTML files. The project pins the html
   font-size to 16px in tokens.css (the browser default and Tailwind's
   canonical assumption), so rem values scale exactly like stock
   Tailwind — 0.5rem = 8px, 1rem = 16px, 1.5rem = 24px, etc. Body text
   is 16px too (custom.css), so text-base matches body, text-sm is 87.5
   percent of body, and the rest of the ratios are identical to Tailwind.

   Loaded after components.css so utilities can override component defaults
   the same way Tailwind's own utilities win the cascade. Responsive
   variants (sm, md, lg, xl, 2xl prefixes) live in the auto-generated
   section below the marker.
   ──────────────────────────────────────────────────────────────────── */

/* Display */
.flex { display: flex; }
.hidden { display: none; }

/* Flex direction & wrap */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Alignment */
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.top-1\/2 { top: 50%; }

/* Transforms */
.-translate-y-1\/2 { transform: translateY(-50%); }
.rotate-0 { transform: rotate(0deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }
.-rotate-45 { transform: rotate(-45deg); }
.-rotate-90 { transform: rotate(-90deg); }
.-rotate-180 { transform: rotate(-180deg); }
.-rotate-270 { transform: rotate(-270deg); }

/* Sizing */
.w-full { width: 100%; }
.w-1\/5 { width: 20%; }
.w-1\/3 { width: 33.33333333%; }
.w-2\/3 { width: 66.66666667%; }
.w-4\/5 { width: 80%; }
.w-max { width: max-content; }
.h-full { height: 100%; }
.flex-1 { flex: 1 1 0%; }
.min-w-\[150px\] { min-width: 150px; }
.min-w-\[200px\] { min-width: 200px; }
.min-h-\[200px\] { min-height: 200px; }
.size-4 { width: 1rem; height: 1rem; }

/* Margin — zero utilities use !important to guarantee they win over
   component defaults (Bootstrap's .alert, .card-body, etc. set margins
   that inline versions of these were overriding with !important). */
.m-0 { margin: 0 !important; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mr-2\.5 { margin-right: 0.625rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-auto { margin-left: auto; }

/* Padding */
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.pr-6 { padding-right: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.p-4 { padding: 1rem; }
.pr-10 { padding-right: 2.5rem; }

/* Gap */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Typography — font size */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-xl { font-size: 1.25rem; }

/* Typography — font weight */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Typography — alignment & transform */
.text-center { text-align: center; }
.text-end { text-align: end; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Typography — wrapping */
.text-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }

/* Color */
.text-red-500 { color: var(--danger); }

/* Border radius */
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }

/* List */
.list-none { list-style: none; }

/* Opacity */
.opacity-80 { opacity: 0.8; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Animations */
.animate-spin { animation: tw-spin 1s linear infinite; }
.animate-pulse { animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes tw-spin {
    to { transform: rotate(360deg); }
}

@keyframes tw-pulse {
    50% { opacity: 0.5; }
}

/* Responsive utilities (sm: ≥640px, md: ≥768px, lg: ≥992px, xl: ≥1280px,
   2xl: ≥1536px) live under the marker below — generated from HTML/JS
   usage by gen-utilities.js. Do NOT hand-write breakpoint rules above
   the marker: the script groups generated rules into cascade order
   (base → sm → md → lg → xl → 2xl), so base utilities placed here would
   sit AFTER any manual breakpoint block and override the responsive
   intent. If a responsive override isn't auto-generatable (bespoke
   value or `!important`), use an arbitrary utility or the `!` prefix
   (e.g. `class="md:flex-nowrap"` already works; `class="!md:flex-nowrap"`
   adds `!important`). */

/* ═══ AUTO-GENERATED by gen-utilities.js — edit above this line ═══ */
/* ── base ── */
.-mb-\[25px\] { margin-bottom: -25px; }
.-mt-2 { margin-top: -0.5rem; }
.\!mb-2 { margin-bottom: 0.5rem !important; }
.\!w-full { width: 100% !important; }
.border { border-style: solid; border-width: 1px; }
.border-4 { border-style: solid; border-width: 4px; }
.contents { display: contents; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.flex-col-reverse { flex-direction: column-reverse; }
.font-mono { font-family: monospace; }
.gap-1 { gap: 0.25rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.h-\[35px\] { height: 35px; }
.h-auto { height: auto; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.max-w-full { max-width: 100%; }
.me-1 { margin-inline-end: 0.25rem; }
.min-h-\[120px\] { min-height: 120px; }
.min-h-\[40px\] { min-height: 40px; }
.min-h-\[48px\] { min-height: 48px; }
.min-h-auto { min-height: auto; }
.min-w-0 { min-width: 0; }
.min-w-1\/2 { min-width: 50%; }
.min-w-\[100px\] { min-width: 100px; }
.min-w-\[120px\] { min-width: 120px; }
.min-w-\[125px\] { min-width: 125px; }
.min-w-\[17px\] { min-width: 17px; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[220px\] { min-width: 220px; }
.ml-3 { margin-left: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.opacity-50 { opacity: 0.5; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.ps-4 { padding-inline-start: 1rem; }
.pt-4 { padding-top: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.self-start { align-self: flex-start; }
.shrink-0 { flex-shrink: 0; }
.size-2 { width: 0.5rem; height: 0.5rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }
.size-full { width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.table { display: table; }
.text-\[25px\] { font-size: 25px; }
.text-left { text-align: left; }
.text-lg { font-size: 1.125rem; }
.text-right { text-align: right; }
.text-start { text-align: start; }
.text-white { color: #fff; }
.transition { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.w-1\/2 { width: 50%; }
.w-1\/4 { width: 25%; }
.w-2\/5 { width: 40%; }
.w-auto { width: auto; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.z-1 { z-index: 1; }

/* ── sm: ((min-width: 640px)) ── */
@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } }
@media (min-width: 640px) { .sm\:font-normal { font-weight: 400; } }
@media (min-width: 640px) { .sm\:gap-4 { gap: 1rem; } }
@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .sm\:items-center { align-items: center; } }
@media (min-width: 640px) { .sm\:w-1\/3 { width: 33.33333333333333%; } }
@media (min-width: 640px) { .sm\:w-2\/3 { width: 66.66666666666666%; } }

/* ── md: ((min-width: 768px)) ── */
@media (min-width: 768px) { .md\:flex { display: flex; } }
@media (min-width: 768px) { .md\:flex-row { flex-direction: row; } }
@media (min-width: 768px) { .md\:gap-0 { gap: 0; } }
@media (min-width: 768px) { .md\:hidden { display: none; } }
@media (min-width: 768px) { .md\:items-center { align-items: center; } }
@media (min-width: 768px) { .md\:items-start { align-items: flex-start; } }
@media (min-width: 768px) { .md\:items-stretch { align-items: stretch; } }
@media (min-width: 768px) { .md\:justify-between { justify-content: space-between; } }
@media (min-width: 768px) { .md\:justify-end { justify-content: flex-end; } }
@media (min-width: 768px) { .md\:justify-start { justify-content: flex-start; } }
@media (min-width: 768px) { .md\:max-w-\[60\%\] { max-width: 60%; } }
@media (min-width: 768px) { .md\:min-w-\[260px\] { min-width: 260px; } }
@media (min-width: 768px) { .md\:pt-4 { padding-top: 1rem; } }
@media (min-width: 768px) { .md\:w-1\/2 { width: 50%; } }
@media (min-width: 768px) { .md\:w-1\/6 { width: 16.666666666666664%; } }
@media (min-width: 768px) { .md\:w-5\/6 { width: 83.33333333333334%; } }
@media (min-width: 768px) { .md\:w-auto { width: auto; } }

/* ── lg: ((min-width: 992px)) ── */
@media (min-width: 992px) { .lg\:flex-row { flex-direction: row; } }
@media (min-width: 992px) { .lg\:flex-row-reverse { flex-direction: row-reverse; } }
@media (min-width: 992px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lg\:items-center { align-items: center; } }
@media (min-width: 992px) { .lg\:max-w-\[60\%\] { max-width: 60%; } }
@media (min-width: 992px) { .lg\:w-1\/2 { width: 50%; } }
@media (min-width: 992px) { .lg\:w-1\/3 { width: 33.33333333333333%; } }
@media (min-width: 992px) { .lg\:w-2\/3 { width: 66.66666666666666%; } }

/* ── xl: ((min-width: 1280px)) ── */
@media (min-width: 1280px) { .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }