/* Generated by brand/scripts/build-components.mjs from brand/components/. Do not edit. Load public/tokens/tokens.css first. */

/* Card: a white surface with a 1 px border. The head carries the block's label and an action; the body, the content.
   nu-cards glues several with a 1 px line, the way data strips and app grids look. */
.nu-card {
  border: var(--nu-border-width) solid var(--nu-color-border);
  border-radius: var(--nu-radius-default);
  background: var(--nu-color-surface);
  color: var(--nu-color-ink);
}

.nu-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nu-space-12);
  border-bottom: var(--nu-border-width) solid var(--nu-color-divider);
  padding: var(--nu-space-14) var(--nu-space-20);
}

.nu-card__body {
  padding: var(--nu-space-16) var(--nu-space-20);
}

/* A number that tells the state, with its small unit. */
.nu-card__figure {
  display: flex;
  align-items: baseline;
  gap: var(--nu-space-8);
  margin: 0;
  font-size: var(--nu-size-number);
  line-height: var(--nu-font-line-height-tight);
}

.nu-card__unit {
  font-size: var(--nu-size-small);
  color: var(--nu-color-muted);
}

.nu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--nu-layout-card-min), 1fr));
  gap: var(--nu-border-width);
  border: var(--nu-border-width) solid var(--nu-color-border);
  background: var(--nu-color-border);
}

.nu-cards > .nu-card {
  border: 0;
}