/* Utilities the trending board and the overview page use that the checked-in
 * Tailwind build does not have.
 *
 * `static/css/tailwind.css` is a prebuilt artifact from 2026-07-24 with no
 * config or build script in the repo. The board shipped a month later, so a
 * number of the classes its markup has always carried - `bg-white/80`,
 * `py-14`, `top-1/2`, `mt-8` - resolve to nothing. Nothing errors; the styles
 * simply are not there, which is most of why the page looked cramped and
 * misaligned rather than merely plain.
 *
 * These are the Tailwind definitions for exactly the classes the board needs,
 * copied at Tailwind's own values so the markup keeps reading as Tailwind. It
 * is a patch over a build that cannot be re-run here, not a design system:
 * regenerating tailwind.css properly would restyle the whole app, which is not
 * something a board redesign should decide.
 *
 * The same reason `.line-clamp-3` sits hand-written in custom.css.
 */

/* Position */
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x, 0), -50%); }
.left-3\.5 { left: 0.875rem; }
.right-3\.5 { right: 0.875rem; }

/* Spacing */
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.gap-3\.5 { gap: 0.875rem; }
.pl-3\.5 { padding-left: 0.875rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-9 { padding-right: 2.25rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

/* Size */
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.h-\[85px\] { height: 85px; }
.min-w-\[200px\] { min-width: 200px; }
/* A floor on the row's subject column. Below it the action button wraps to its
   own line instead of crushing the title into two characters. */
.min-w-\[180px\] { min-width: 180px; }

/* Type */
.text-\[12px\] { font-size: 12px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[15px\] { font-size: 15px; }
.text-\[10\.5px\] { font-size: 10.5px; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
/* Digits of equal width, so a column of counts lines up instead of shimmering
   as the numbers change. On a ranking board that column is the point. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Surfaces */
.bg-white\/50 { background-color: rgb(255 255 255 / 0.5); }
.bg-white\/60 { background-color: rgb(255 255 255 / 0.6); }
.bg-white\/80 { background-color: rgb(255 255 255 / 0.8); }
.bg-slate-50\/80 { background-color: rgb(248 250 252 / 0.8); }
.bg-rose-50\/60 { background-color: rgb(255 241 242 / 0.6); }
.bg-amber-50\/70 { background-color: rgb(255 251 235 / 0.7); }
.hover\:bg-white\/70:hover { background-color: rgb(255 255 255 / 0.7); }

/* Borders and rings */
.border-slate-200\/70 { border-color: rgb(226 232 240 / 0.7); }
.border-indigo-100\/70 { border-color: rgb(224 231 255 / 0.7); }
.ring-slate-200\/70 { --tw-ring-color: rgb(226 232 240 / 0.7); }
.ring-indigo-100 { --tw-ring-color: rgb(224 231 255); }
.ring-indigo-100\/80 { --tw-ring-color: rgb(224 231 255 / 0.8); }
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Form controls */
.appearance-none { appearance: none; -webkit-appearance: none; }
.focus\:border-indigo-300:focus { border-color: rgb(165 180 252); }
.placeholder\:text-slate-300::placeholder { color: rgb(203 213 225); }

@media (min-width: 768px) {
  .md\:p-7 { padding: 1.75rem; }
}


/* ---- Overview page ---------------------------------------------------- *
 * Same story as above: new markup written against a build from before it
 * existed. The responsive grid utilities are the ones that bite hardest -
 * without them the page has no columns at all and every block stacks.
 */
.items-baseline { align-items: baseline; }
.last\:border-r-0:last-child { border-right-width: 0; }
.text-\[14px\] { font-size: 14px; }

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

@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}