/* ============================================================
   TETRA CON — Utilities
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--white);
  color: var(--navy-900);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-out);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }
.text-cyan { color: var(--cyan-500); }
.text-teal { color: var(--teal-600); }
.text-white { color: var(--white) !important; }
.text-muted { color: var(--text-secondary); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  color: var(--teal-600);
}

.divider { height: 1px; background: var(--border-light); border: none; }
.divider-dark { height: 1px; background: var(--border-dark); border: none; }

.rounded-lg { border-radius: var(--radius-lg); }
.shadow-md { box-shadow: var(--shadow-md); }

.tag-pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.visually-hidden-focusable:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}

.no-scroll { overflow: hidden; }