/*
 * Layout primitives and text utilities.
 *
 * This is deliberately NOT a Tailwind clone. Two reasons:
 *
 *   The lint contract forbids digits in class names, so a numeric scale like
 *   .gap_4 is not expressible. Sizes are named instead (--tight, --loose).
 *   Class-stuffing is the thing we're trying to avoid. A handful of composable
 *   primitives that own their own spacing beats fifteen classes per element.
 *
 * Rule of thumb: reach for a primitive to arrange things, and a component class
 * (components/) to make a thing. If a markup block needs more than three of
 * these, it wants to be a component or a partial.
 */

/* --- Stack: vertical rhythm ------------------------------------------- */

/* The default gap suits form fields and list rows. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--flush {
  gap: 0;
}

.stack--tight {
  gap: var(--space-2);
}

.stack--snug {
  gap: var(--space-3);
}

.stack--loose {
  gap: var(--space-6);
}

.stack--section {
  gap: var(--space-8);
}

/* --- Cluster: horizontal groups that wrap ----------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--tight {
  gap: var(--space-1);
}

.cluster--snug {
  gap: var(--space-2);
}

.cluster--loose {
  gap: var(--space-5);
}

/* Push the last child away from the rest — headers with a trailing action. */
.cluster--spread {
  justify-content: space-between;
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--baseline {
  align-items: baseline;
}

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

/* Keeps a toolbar on one line and lets its middle element absorb the slack. */
.cluster--nowrap {
  flex-wrap: nowrap;
}

/* --- Grow / shrink ---------------------------------------------------- */
.grow {
  flex: 1 1 auto;

  /* Without this a long child refuses to shrink and overflows the row. */
  min-width: 0;
}

.shrink_none {
  flex-shrink: 0;
}

/* --- Grid: responsive card fields ------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}

.grid--narrow {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.grid--pair {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* --- Center: constrain measure ---------------------------------------- */
.center {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.center--prose {
  max-width: var(--prose-max);
}

/* --- Padding shells --------------------------------------------------- */
.pad {
  padding: var(--space-4);
}

.pad--tight {
  padding: var(--space-2);
}

.pad--snug {
  padding: var(--space-3);
}

.pad--loose {
  padding: var(--space-6);
}

.pad--none {
  padding: 0;
}

/* --- Text ------------------------------------------------------------- */
.text_muted {
  color: var(--color-text-muted);
}

.text_subtle {
  color: var(--color-text-subtle);
}

.text_danger {
  color: var(--color-danger-text);
}

.text_warning {
  color: var(--color-warning-text);
}

.text_success {
  color: var(--color-success-text);
}

.text_tiny {
  font-size: var(--text-xs);
}

.text_small {
  font-size: var(--text-sm);
}

.text_large {
  font-size: var(--text-lg);
}

.text_strong {
  font-weight: var(--weight-semibold);
}

.text_medium {
  font-weight: var(--weight-medium);
}

.text_mono {
  font-family: var(--font-mono);
}

.text_right {
  text-align: right;
}

/* Section eyebrows: "TODAY", "AWAITING REPLY". */
.text_caps {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Multi-line clamp for email previews and ticket descriptions. */
.clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.clamp--long {
  -webkit-line-clamp: 4;
}

/* --- Visibility ------------------------------------------------------- */
.visually_hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden {
  display: none;
}

@media (width <= 60rem) {
  .hide_on_narrow {
    display: none;
  }
}

@media (width > 60rem) {
  .hide_on_wide {
    display: none;
  }
}