/* Login page styling.
 *
 * This page used to pull in cdn.tailwindcss.com, unpkg.com/alpinejs,
 * fonts.googleapis.com (plus fonts.gstatic.com for the font files) and
 * svgrepo.com — five external origins, each needing its own DNS lookup, TCP
 * connection and TLS handshake before the first screen of the day could
 * render, and all of them dead when the lab is offline. The Tailwind build was
 * the play CDN, which also compiles the stylesheet in the browser on every
 * load.
 *
 * What follows is exactly the utilities login.php uses, written out once.
 * Values match Tailwind's defaults so the markup did not have to change.
 */

:root { --brand: #0f766e; }

*, *::before, *::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; margin: 0; }
button { background: none; cursor: pointer; }
h1, p { margin: 0; }

/* layout */
.block           { display: block; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.flex-grow       { flex-grow: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.relative        { position: relative; }
.overflow-hidden { overflow: hidden; }
.text-center     { text-align: center; }
.uppercase       { text-transform: uppercase; }
.object-contain  { object-fit: contain; }

/* size */
.h-screen  { height: 100vh; }
.h-4       { height: 1rem; }
.h-5       { height: 1.25rem; }
.h-12      { height: 3rem; }
.h-16      { height: 4rem; }
.w-4       { width: 1rem; }
.w-5       { width: 1.25rem; }
.w-12      { width: 3rem; }
.w-auto    { width: auto; }
.w-full    { width: 100%; }
.max-w-md  { max-width: 28rem; }

/* spacing */
.p-3   { padding: 0.75rem; }
.p-4   { padding: 1rem; }
.p-8   { padding: 2rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mx-4  { margin-left: 1rem; margin-right: 1rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* type */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* colour */
.bg-white           { background-color: #fff; }
.bg-slate-50        { background-color: #f8fafc; }
.bg-rose-50         { background-color: #fff1f2; }
.bg-\[var\(--brand\)\] { background-color: var(--brand); }
.text-white      { color: #fff; }
.text-slate-400  { color: #94a3b8; }
.text-slate-500  { color: #64748b; }
.text-slate-700  { color: #334155; }
.text-slate-800  { color: #1e293b; }
.text-rose-600   { color: #e11d48; }

/* border */
.border           { border-width: 1px; }
.border-t         { border-top-width: 1px; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-2xl { border-radius: 1rem; }

/* depth */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

/* interaction */
.transition {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.hover\:bg-slate-50:hover  { background-color: #f8fafc; }
.hover\:opacity-90:hover   { opacity: 0.9; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-\[var\(--brand\)\]:focus { border-color: var(--brand); }
.focus\:ring-1:focus                    { box-shadow: 0 0 0 1px var(--brand); }