/* ============================================================================
   Tailwind safety net
   ---------------------------------------------------------------------------
   These pages build their layout from cdn.tailwindcss.com, which downloads and
   generates CSS *in the browser*. If that request is slow, blocked or the
   device is offline, every utility class vanishes and the page collapses to
   plain left-aligned blocks — containers lose their centring, grids lose their
   columns, and the whole design falls apart.

   This file hand-writes the layout-critical subset so a page still reads
   correctly when Tailwind never arrives. It matters most for learners on slow
   rural connections, which is exactly when the CDN fails.

   LOAD ORDER: link this in <head>. Tailwind's runtime injects its own <style>
   at the end of <head>, so when it does arrive it comes later in the cascade
   and wins — this file only ever fills a gap, it never fights Tailwind.

   Scope is deliberately narrow: containers, flex/grid, spacing and visibility.
   Colour, typography and decoration are left to the page's own CSS.
   ========================================================================== */

/* ---- containers: the ones that keep a page centred ---------------------- */
.mx-auto   { margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl  { max-width: 36rem; }
.w-full    { width: 100%; }

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

/* ---- flex / grid alignment ---------------------------------------------- */
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1 1 0%; }
.shrink-0        { flex-shrink: 0; }

/* grid columns actually used on these pages */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- gap ---------------------------------------------------------------- */
.gap-1   { gap: .25rem; }
.gap-1\.5{ gap: .375rem; }
.gap-2   { gap: .5rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }

/* ---- padding ------------------------------------------------------------ */
.p-2 { padding: .5rem; }   .p-3 { padding: .75rem; }  .p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }  .p-7 { padding: 1.75rem; }
.p-10{ padding: 2.5rem; }
.px-3 { padding-left: .75rem;  padding-right: .75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem;   padding-bottom: .5rem; }
.py-3 { padding-top: .75rem;  padding-bottom: .75rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
.pt-16{ padding-top: 4rem; }
.pb-20{ padding-bottom: 5rem; }

/* ---- margin ------------------------------------------------------------- */
.mt-2 { margin-top: .5rem; }   .mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }  .mb-10{ margin-bottom: 2.5rem; }
.mb-14{ margin-bottom: 3.5rem; } .mb-16{ margin-bottom: 4rem; }
.mb-20{ margin-bottom: 5rem; }  .mb-24{ margin-bottom: 6rem; }

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

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

/* ---- vertical rhythm used by the quiz engine ---------------------------- */
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }

/* ---- responsive: only the breakpoints these pages actually rely on ------- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex        { display: flex; }
  .md\:hidden      { display: none; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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\:flex        { display: flex; }
  .lg\:hidden      { display: none; }
}
@media (min-width: 1280px) {
  .xl\:hidden { display: none; }
  .xl\:flex   { display: flex; }
}
