/**
 * Typography foundations page - table-led layout (Atlassian-style).
 * Loaded only from typography.html.
 */

.docs-type-table__preview {
  width: 14rem;
  min-width: 12rem;
  vertical-align: middle;
  padding: 1rem 1.125rem !important;
}

.docs-type-table .docs-type-specimen {
  display: block;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  color: var(--tn-color-text);
}

.docs-type-table__group td {
  background: var(--docs-bg-subtle, #f4f5f7);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--docs-text-subtle);
  padding: 0.5rem 1rem;
}

.docs-type-ot-sample {
  font-family: var(--tn-font-family-body);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.docs-type-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.875rem;
  margin: 1rem 0 1.25rem;
}

.docs-type-showcase__card {
  padding: 1rem 1.125rem;
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  background: var(--docs-bg);
}

.docs-type-showcase__meta {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--docs-text-subtle);
}

.docs-type-ot-sample--tabular {
  font-variant-numeric: tabular-nums;
}

.docs-type-ot-sample--zero {
  font-feature-settings: "zero" 1;
  font-weight: 600;
}

.docs-type-preview-shell {
  max-width: 20rem;
}

.docs-type-preview-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tn-space-base);
}

.docs-type-preview-metric {
  margin: var(--tn-space-xs) 0 0;
  font-size: var(--tn-font-size-heading-2);
  font-weight: var(--tn-font-weight-extrabold);
  line-height: var(--tn-font-lineHeight-heading-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .docs-type-table__preview {
    width: auto;
    min-width: 0;
  }
}