/* ==========================================================================
   Utilities: Layout
   Flex, grid, gap, alignment, and spacing helpers.
   Uses design tokens from base/tokens.css.
   ========================================================================== */

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

/* --- Flex direction --- */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }

/* --- Flex sizing --- */
.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

/* --- Justify content --- */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* --- Align items --- */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

/* --- Align self --- */
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* --- Gap --- */
.gap-0   { gap: 0; }
.gap-1   { gap: var(--space-1); }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* --- Margin: top --- */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

/* --- Margin: bottom --- */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* --- Margin: horizontal --- */
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Padding: all --- */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

/* --- Padding: vertical --- */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* --- Padding: horizontal --- */
.px-0  { padding-left: 0; padding-right: 0; }
.px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }

/* --- Padding: individual --- */
.pt-0  { padding-top: 0; }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }
.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }

/* --- Width --- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.min-w-0 { min-width: 0; }
.max-w-sm  { max-width: 24rem; }  /* 384px */
.max-w-md  { max-width: 28rem; }  /* 448px */
.max-w-lg  { max-width: 32rem; }  /* 512px */
.max-w-xl  { max-width: 36rem; }  /* 576px */
.max-w-2xl { max-width: 42rem; }  /* 672px */
.max-w-content { max-width: var(--content-max-width); }

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

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Visibility --- */
/* Screen-reader-only utility. The `top: 0; left: 0` is REQUIRED — without
   them the absolute element's bounding rect would land at its document-flow
   static position (potentially far down the page), and focusing it triggers
   a programmatic scroll-into-view on <html>, jerking the whole app-shell up
   by hundreds of pixels. See DS Conventions → "Visually-hidden form inputs"
   at /a/design-system/contribute. */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Responsive: sm (640px+)
   ========================================================================== */
@media (min-width: 640px) {
  .sm\:flex      { display: flex; }
  .sm\:grid      { display: grid; }
  .sm\:hidden    { display: none; }
  .sm\:flex-row  { flex-direction: row; }
  .sm\:flex-col  { flex-direction: column; }
  .sm\:gap-3     { gap: var(--space-3); }
  .sm\:gap-4     { gap: var(--space-4); }
  .sm\:gap-6     { gap: var(--space-6); }
}

/* ==========================================================================
   Responsive: md (768px+)
   ========================================================================== */
@media (min-width: 768px) {
  .md\:flex      { display: flex; }
  .md\:grid      { display: grid; }
  .md\:hidden    { display: none; }
  .md\:flex-row  { flex-direction: row; }
  .md\:flex-col  { flex-direction: column; }
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:gap-3     { gap: var(--space-3); }
  .md\:gap-4     { gap: var(--space-4); }
  .md\:gap-6     { gap: var(--space-6); }
  .md\:gap-8     { gap: var(--space-8); }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:mt-0      { margin-top: 0; }
  .md\:mb-0      { margin-bottom: 0; }
  .md\:p-6       { padding: var(--space-6); }
  .md\:px-6      { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:text-left { text-align: left; }
}

/* ==========================================================================
   Responsive: lg (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
  .lg\:flex      { display: flex; }
  .lg\:grid      { display: grid; }
  .lg\:hidden    { display: none; }
  .lg\:flex-row  { flex-direction: row; }
  .lg\:gap-4     { gap: var(--space-4); }
  .lg\:gap-6     { gap: var(--space-6); }
  .lg\:gap-8     { gap: var(--space-8); }
  .lg\:p-8       { padding: var(--space-8); }
}

/* ==========================================================================
   Responsive: xl (1440px+)
   ========================================================================== */
@media (min-width: 1440px) {
  .xl\:gap-8     { gap: var(--space-8); }
  .xl\:p-8       { padding: var(--space-8); }
}