/*
 * Tailwind-style utility classes, applied directly in the HTML markup:
 * layout-structural properties (display, position, flex, alignment) plus
 * the handful of spacing/sizing/typography resets (margin, padding, width,
 * height, text-align, border) that were repeating verbatim across the
 * page-specific stylesheets. Only classes actually used by the 4 pages are
 * defined here — no speculative full palette. Naming and spacing scale
 * mirror real Tailwind (step N = N * 0.25rem), with one deliberate
 * deviation: values of 4px and under stay literal px here (e.g. `.left-1`,
 * `.right-1`) rather than Tailwind's real 0.25rem, per this project's
 * px-unit convention. `md:` variants live in the single trailing media
 * query below so they are always later in source order than their base
 * counterpart, guaranteeing they win at the desktop breakpoint regardless
 * of specificity. Where a base utility and a more specific one both set the
 * same longhand (e.g. `.m-0`'s margin-left and `.ml-auto`), the more
 * specific one is declared later in this file so it wins on equal
 * specificity — order matters here, not the order of classes in HTML.
 */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.overflow-hidden {
  overflow: hidden;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.justify-self-start {
  justify-self: start;
}

.top-0 {
  top: 0;
}

.top-2 {
  top: 0.5rem;
}

.top-full {
  top: 100%;
}

.bottom-2 {
  bottom: 0.5rem;
}

.left-0 {
  left: 0;
}

.left-1 {
  left: 4px;
}

.right-0 {
  right: 0;
}

.right-1 {
  right: 4px;
}

.right-6 {
  right: 1.5rem;
}

.-right-2 {
  right: -0.5rem;
}

.m-0 {
  margin: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.p-0 {
  padding: 0;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.border-0 {
  border: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

@media (min-width: 768px) {
  .md\:items-center {
    align-items: center;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:static {
    position: static;
  }

  .md\:hidden {
    display: none;
  }

  .md\:flex {
    display: flex;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .md\:block {
    display: block;
  }

  .md\:right-10 {
    right: 2.5rem;
  }

  .md\:right-0 {
    right: 0;
  }

  .md\:bottom-0 {
    bottom: 0;
  }

  .md\:justify-self-end {
    justify-self: end;
  }

  .md\:self-center {
    align-self: center;
  }

  .md\:self-end {
    align-self: flex-end;
  }

  .md\:absolute {
    position: absolute;
  }

  .md\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:ml-0 {
    margin-left: 0;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-center {
    text-align: center;
  }

  .md\:text-right {
    text-align: right;
  }
}