/* ==========================================================================
   UTILITIES

   The seventy-odd single-purpose classes the markup actually uses, written out.
   They replace the Tailwind runtime compiler, which was a ~400 KB script
   fetched from a CDN on every page view in order to generate this much CSS in
   the browser — a build step performed at read time, over the network, by
   software that has to work in a basement with no signal.

   Nothing is generated here. If the markup needs a class that is not below, it
   does not exist: add it here deliberately, or use a component class in
   styles.css, which is where anything used more than twice belongs.
   ========================================================================== */

/* --- display and flow ---------------------------------------------------- */
.block          { display: block; }
.inline-block   { display: inline-block; }
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.relative       { position: relative; }
.shrink-0       { flex-shrink: 0; }
.min-w-0        { min-width: 0; }
.w-full         { width: 100%; }
.h-full         { height: 100%; }

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

/* --- spacing -------------------------------------------------------------
   The scale is Tailwind's: one unit is 0.25rem. Only the steps in use are
   here, which is why the ladder has gaps. */
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }

.p-3      { padding: 0.75rem; }
.p-5      { padding: 1.25rem; }
.px-2     { padding-inline: 0.5rem; }
.py-0\.5  { padding-block: 0.125rem; }
.pt-2     { padding-top: 0.5rem; }
.pt-3     { padding-top: 0.75rem; }
.mt-1     { margin-top: 0.25rem; }
/* A paragraph inside a flex or grid container that spaces its children with `gap` has no margin of its own: the browser's
   1em paragraph margin on top of the gap is what made two lines of a dialog sit 50px apart. */
.m-0      { margin: 0; }

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

/* --- sizing --------------------------------------------------------------- */
.w-1\.5 { width: 0.375rem; }
.w-5    { width: 1.25rem; }
.w-7    { width: 1.75rem; }
.h-1\.5 { height: 0.375rem; }
.h-5    { height: 1.25rem; }
.h-7    { height: 1.75rem; }

/* --- type ----------------------------------------------------------------- */
.text-xs   { font-size: 0.75rem;   line-height: 1.4; }
.text-sm   { font-size: 0.875rem;  line-height: 1.5; }
.text-base { font-size: 1rem;      line-height: 1.55; }
.text-xl   { font-size: 1.25rem;   line-height: 1.35; }

.font-medium    { font-weight: 500; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono      { font-family: var(--font-mono); }

.italic           { font-style: italic; }
.leading-relaxed  { line-height: 1.625; }
.tracking-wider   { letter-spacing: 0.05em; }
.text-center      { text-align: center; }
.text-start       { text-align: start; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap { white-space: nowrap; }
.break-words       { overflow-wrap: break-word; }
.select-none       { user-select: none; }

/* --- borders and radii ---------------------------------------------------- */
.border      { border-width: 1px; border-style: solid; }
.border-t    { border-top-width: 1px; border-top-style: solid; }
.border-line { border-color: var(--line); }

.rounded      { border-radius: var(--r-sm); }
.rounded-md   { border-radius: var(--r-md); }
.rounded-full { border-radius: var(--r-pill); }

/* --- colour ---------------------------------------------------------------
   These are the only colour utilities that survive, and every one resolves
   through the palette tokens rather than naming a value. */
.bg-panel-raised { background-color: var(--panel-raised); }
.bg-tempo-gold   { background-color: var(--gold-500); }

.text-ink-soft      { color: var(--ink-soft); }
.text-sage          { color: var(--sage); }
.text-sage-dim      { color: var(--sage-dim); }
.text-sage-mute     { color: var(--sage-mute); }
.text-tempo-gold    { color: var(--gold-500); }
.text-tempo-bright  { color: var(--gold-100); }
.text-tempo-dim     { color: var(--sage-dim); }
.text-tempo-ink     { color: var(--on-gold); }

.fill-current   { fill: currentColor; }
.stroke-current { stroke: currentColor; }

/* --- accessibility -------------------------------------------------------- */
.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;
}