/* Component styles for the FPF CD UI.
 *
 * Every value here references a token from tokens.css. No colour literal may
 * appear in this file — see specs/005-web-ui/design-system.md and
 * tests/ui/test_design_system.py, which enforces it.
 *
 * `ds-` classes whose guide exists in the catalog carry a comment naming it.
 * The ones composed locally (table, timeline, pagination) say so, because the
 * catalog does not define them and they must not read as institutional.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--app-font-family);
  font-size: var(--fpf-font-size-md);
  font-weight: var(--fpf-font-weight-regular);
  line-height: var(--fpf-lineHeight-relaxed);
  color: var(--fpf-content-primary);
  background: var(--fpf-bg-subtle);
}

/* Headings map onto the scale's H1/H2/H3, not onto invented sizes. */
h1 {
  margin: 0;
  font-size: var(--fpf-font-size-3xl);
  font-weight: var(--fpf-font-weight-black);
  line-height: var(--fpf-lineHeight-tight);
  letter-spacing: var(--fpf-letterSpacing-tight);
  color: var(--fpf-content-primary);
}
h2 {
  margin: 0;
  font-size: var(--fpf-font-size-2xl);
  font-weight: var(--fpf-font-weight-extrabold);
  line-height: var(--fpf-lineHeight-tight);
  letter-spacing: var(--fpf-letterSpacing-tight);
  color: var(--fpf-content-primary);
}
h3 {
  margin: 0;
  font-size: var(--fpf-font-size-xl);
  font-weight: var(--fpf-font-weight-bold);
  line-height: var(--fpf-lineHeight-normal);
  color: var(--fpf-content-primary);
}

/* Page headings sit at H2; a 36px H1 on every list page would shout. */
.ds-main h1 {
  font-size: var(--fpf-font-size-2xl);
  font-weight: var(--fpf-font-weight-extrabold);
  letter-spacing: var(--fpf-letterSpacing-tight);
}
.ds-main h2 {
  font-size: var(--fpf-font-size-xl);
  font-weight: var(--fpf-font-weight-bold);
  letter-spacing: var(--fpf-letterSpacing-normal);
}

/* Label / XS — the scale's uppercase step. */
.ds-label {
  font-size: var(--fpf-font-size-xs);
  font-weight: var(--fpf-font-weight-extrabold);
  line-height: var(--fpf-lineHeight-normal);
  letter-spacing: var(--fpf-letterSpacing-widest);
  text-transform: uppercase;
}

a {
  color: var(--fpf-link-default);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fpf-border-focus);
  outline-offset: 2px;
}

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

/* ==========================================================================
   Layout shell
   ========================================================================== */
.ds-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* Edge to edge, as the institutional applications run: a capped column left
   most of a wide monitor empty next to a twelve-column table. `min-width: 0`
   is what lets a wide table scroll inside the flex row instead of pushing the
   sidebar off screen. */
.ds-main {
  flex: 1;
  min-width: 0;
  padding: var(--fpf-space-6);
}

.ds-page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpf-space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fpf-space-6);
}

.ds-page-header__actions {
  display: flex;
  gap: var(--fpf-space-2);
}

.ds-muted {
  color: var(--fpf-content-secondary);
}
.ds-tertiary {
  color: var(--fpf-content-tertiary);
}
.ds-mono {
  font-family: var(--app-font-family-mono);
  font-size: var(--fpf-font-size-sm);
}

@media (max-width: 900px) {
  .ds-shell {
    flex-direction: column;
  }
  /* Stacked, the sidebar is a band across the top: a full-height column has
     nothing beside it to be full height *of*. */
  .ds-nav,
  .ds-nav--collapsed {
    position: static;
    width: auto;
    height: auto;
    border-radius: 0;
  }
}

/* ==========================================================================
   Navigation — Design System /components/navigation
   "Sidebar Navigation: Default" and "Collapsed — Icons + Tooltip".
   Dark surface in both themes; active item on interactive/primary/subtle.
   ========================================================================== */
/* Full height and flush to the left edge, rounded only on the inner corners —
   the catalog's own sidebar is `h-screen` with `border-radius: 0 24px 24px 0`.
   Sticky rather than fixed so it scrolls with a long page only once its own
   content has run out. */
.ds-nav {
  position: sticky;
  top: 0;
  align-self: stretch;
  height: 100vh;
  background: var(--app-nav-surface);
  border-radius: 0 var(--fpf-radius-xl) var(--fpf-radius-xl) 0;
  padding: var(--fpf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fpf-space-4);
  width: 260px;
  flex: none;
  overflow-y: auto;
}
.ds-nav--collapsed {
  width: 64px;
  padding: var(--fpf-space-5) 0;
  align-items: center;
  gap: var(--fpf-space-3);
}

.ds-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-2);
  text-decoration: none;
  color: var(--app-nav-content-strong);
}
.ds-nav__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
}
.ds-nav__brand-text {
  font-size: var(--fpf-font-size-md);
  font-weight: 700;
  line-height: 1.2;
}
.ds-nav__brand-text small {
  display: block;
  font-size: var(--fpf-font-size-xs);
  font-weight: 400;
  color: var(--app-nav-content);
}
.ds-nav--collapsed .ds-nav__brand-text {
  display: none;
}

/* The collapse control, styled like the 36px square in the shipped variant. */
.ds-nav__collapse,
.ds-nav__action {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: none;
  border-radius: var(--fpf-radius-md);
  background: var(--app-nav-hover);
  color: var(--app-nav-content);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
.ds-nav__collapse:hover,
.ds-nav__action:hover {
  color: var(--app-nav-content-strong);
}
.ds-nav--collapsed .ds-nav__collapse {
  margin-bottom: var(--fpf-space-1);
}

.ds-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fpf-space-1);
  width: 100%;
}
.ds-nav--collapsed .ds-nav__list {
  align-items: center;
}

.ds-nav__row {
  position: relative;
  display: flex;
  justify-content: center;
}

.ds-nav__link {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-3);
  width: 100%;
  padding: var(--fpf-space-2) var(--fpf-space-3);
  border-radius: var(--fpf-radius-md);
  color: var(--app-nav-content);
  font-size: var(--fpf-font-size-md);
  font-weight: 400;
  text-decoration: none;
}
.ds-nav__link:hover {
  background: var(--app-nav-hover);
  color: var(--app-nav-content-strong);
}
/* "Estado ativo facilmente identificavel em light e dark mode." */
.ds-nav__link[aria-current="page"] {
  background: var(--fpf-interactive-primary-subtle);
  color: var(--fpf-interactive-primary-default);
  font-weight: 600;
}
.ds-nav--collapsed .ds-nav__link {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
.ds-nav--collapsed .ds-nav__label {
  display: none;
}

/* "Tooltip em modo colapsado" — shown only when collapsed, and only on hover
   or keyboard focus, so it is reachable without a pointer. */
.ds-nav__tooltip {
  display: none;
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--app-nav-tooltip-surface);
  color: var(--app-nav-tooltip-content);
  font-size: var(--fpf-font-size-sm);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--fpf-radius-sm);
  white-space: nowrap;
  z-index: 10;
  box-shadow: var(--app-shadow-overlay);
  pointer-events: none;
}
.ds-nav--collapsed .ds-nav__row:hover .ds-nav__tooltip,
.ds-nav--collapsed .ds-nav__row:focus-within .ds-nav__tooltip {
  display: block;
}

.ds-nav__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fpf-space-2);
  width: 100%;
}
.ds-nav--collapsed .ds-nav__footer {
  align-items: center;
}
.ds-nav__user {
  font-size: var(--fpf-font-size-sm);
  color: var(--app-nav-content);
  padding: 0 var(--fpf-space-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-nav--collapsed .ds-nav__user {
  display: none;
}
.ds-nav__footer .ds-nav__row {
  justify-content: flex-start;
}
.ds-nav--collapsed .ds-nav__footer .ds-nav__row {
  justify-content: center;
}

/* Breadcrumb — guide: navigation. 13px, chevron in content/tertiary. */
.ds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fpf-space-1);
  margin: 0 0 var(--fpf-space-3);
  font-size: var(--fpf-font-size-md);
}
.ds-breadcrumb__sep {
  color: var(--fpf-content-tertiary);
  margin: 0 2px;
}
.ds-breadcrumb__item {
  color: var(--fpf-content-tertiary);
  font-weight: 400;
  text-decoration: none;
}
.ds-breadcrumb__item:hover {
  color: var(--fpf-content-secondary);
}
.ds-breadcrumb__item--current {
  color: var(--fpf-content-primary);
  font-weight: 600;
}

/* Tabs — guide: navigation. "Nao exceder 6 tabs na mesma barra." */
.ds-tabs {
  display: flex;
  gap: var(--fpf-space-1);
  border-bottom: 1px solid var(--fpf-border-default);
  margin-bottom: var(--fpf-space-6);
}
.ds-tabs__tab {
  padding: var(--fpf-space-2) var(--fpf-space-4);
  color: var(--fpf-content-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ds-tabs__tab:hover {
  color: var(--fpf-content-primary);
}
.ds-tabs__tab[aria-current="page"] {
  color: var(--fpf-content-primary);
  font-weight: 600;
  border-bottom-color: var(--fpf-interactive-primary-default);
}

/* ==========================================================================
   Button — Design System /components/buttons
   5 variants x 3 sizes. Heights 32/40/48, padding 12/16/24, font 12/14/14 at
   weight 700, radius/md. Read from the rendered component, which is stricter
   than the guide: Ghost hovers onto bg/muted and Outline onto border/strong.
   ========================================================================== */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fpf-space-2);
  height: 40px;
  padding: 0 var(--fpf-space-4);
  border-radius: var(--fpf-radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fpf-font-size-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}
.ds-button--sm {
  height: 32px;
  padding: 0 var(--fpf-space-3);
  font-size: var(--fpf-font-size-sm);
}
.ds-button--lg {
  height: 48px;
  padding: 0 var(--fpf-space-6);
}
.ds-button--icon {
  width: 40px;
  padding: 0;
}
.ds-button--sm.ds-button--icon {
  width: 32px;
}
.ds-button--lg.ds-button--icon {
  width: 48px;
}

.ds-button--primary {
  background: var(--fpf-interactive-primary-default);
  color: var(--fpf-interactive-primary-on);
}
.ds-button--primary:hover {
  background: var(--fpf-interactive-primary-hover);
}
.ds-button--primary:active {
  background: var(--fpf-interactive-primary-active);
}

.ds-button--secondary {
  background: var(--fpf-interactive-secondary-default);
  color: var(--fpf-interactive-secondary-on);
}
.ds-button--secondary:hover {
  background: var(--fpf-interactive-secondary-hover);
}

.ds-button--outline {
  background: transparent;
  color: var(--fpf-content-primary);
  border-color: var(--fpf-border-default);
}
.ds-button--outline:hover {
  border-color: var(--fpf-border-strong);
}

.ds-button--ghost {
  background: transparent;
  color: var(--fpf-content-secondary);
}
.ds-button--ghost:hover {
  background: var(--fpf-bg-muted);
}

.ds-button--danger {
  background: var(--fpf-status-danger-solid);
  color: var(--fpf-content-inverse);
}
/* The rendered component darkens to a red that exists in no token. Mixing
   danger/solid toward black lands in the same place without introducing a
   literal — which the guard in tests/ui would refuse anyway, including from
   inside this comment. */
.ds-button--danger:hover {
  background: color-mix(in srgb, var(--fpf-status-danger-solid) 88%, black);
}

.ds-button:active {
  transform: translateY(1px);
}
.ds-button[disabled],
.ds-button[aria-disabled="true"] {
  background: var(--fpf-bg-muted);
  color: var(--fpf-content-disabled);
  border-color: var(--fpf-border-default);
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Loading state — required by the guide. */
.ds-button[data-loading="true"] {
  pointer-events: none;
  opacity: 0.75;
}
.ds-button[data-loading="true"]::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: var(--fpf-radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ds-spin 700ms linear infinite;
}
@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-button[data-loading="true"]::before {
    animation: none;
  }
}

/* ==========================================================================
   Card & Stat — Design System /components/card and /examples/dashboard
   rounded-2xl (radius/lg), padding space/5, 1px border/default, light shadow.
   ========================================================================== */
.ds-card {
  background: var(--fpf-surface-default);
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-lg);
  padding: var(--fpf-space-5);
  box-shadow: var(--app-shadow-raised);
}
.ds-card--flat {
  box-shadow: none;
}
.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpf-space-4);
  margin-bottom: var(--fpf-space-4);
}
.ds-card__header h2 {
  font-size: var(--fpf-font-size-md);
  font-weight: 700;
  letter-spacing: 0;
}
.ds-card__body > * + * {
  margin-top: var(--fpf-space-3);
}
.ds-card__actions {
  display: flex;
  gap: var(--fpf-space-2);
  margin-top: var(--fpf-space-4);
  padding-top: var(--fpf-space-4);
  border-top: 1px solid var(--fpf-border-default);
}

/* Stat card — /examples/dashboard */
.ds-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fpf-space-4);
  margin-bottom: var(--fpf-space-6);
}
.ds-stat {
  background: var(--fpf-surface-default);
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-lg);
  padding: var(--fpf-space-5);
  box-shadow: var(--app-shadow-raised);
}
.ds-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fpf-space-3);
}
.ds-stat__label {
  font-size: var(--fpf-font-size-sm);
  font-weight: 500;
  color: var(--fpf-content-secondary);
}
.ds-stat__icon {
  color: var(--fpf-content-tertiary);
  display: inline-flex;
}
.ds-stat__value {
  font-size: var(--fpf-font-size-2xl);
  font-weight: 800;
  line-height: var(--fpf-lineHeight-tight);
  color: var(--fpf-content-primary);
}
.ds-stat__delta {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-1);
  margin-top: var(--fpf-space-2);
  font-size: var(--fpf-font-size-xs);
  letter-spacing: 0;
  text-transform: none;
}
.ds-stat__change {
  font-weight: 600;
}
.ds-stat__delta--success {
  color: var(--fpf-status-success-content);
}
.ds-stat__delta--danger {
  color: var(--fpf-status-danger-content);
}
.ds-stat__period {
  color: var(--fpf-content-tertiary);
  font-weight: 400;
}

/* ==========================================================================
   Feedback — guide: feedback (Badge, Alert, Status)
   ========================================================================== */
/* Badge — Design System /components/feedback. 10px/800, 0.18em, no border. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fpf-space-1);
  padding: 3px 8px;
  border-radius: var(--fpf-radius-full);
  font-size: var(--fpf-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge--primary {
  background: var(--fpf-interactive-primary-subtle);
  color: var(--fpf-link-default);
}
.ds-badge--success {
  background: var(--fpf-status-success-bg);
  color: var(--fpf-status-success-content);
}
.ds-badge--warning {
  background: var(--fpf-status-warning-bg);
  color: var(--fpf-status-warning-content);
}
.ds-badge--danger {
  background: var(--fpf-status-danger-bg);
  color: var(--fpf-status-danger-content);
}
.ds-badge--info {
  background: var(--fpf-status-info-bg);
  color: var(--fpf-status-info-content);
}
.ds-badge--neutral {
  background: var(--fpf-bg-muted);
  color: var(--fpf-content-secondary);
}

/* Tag with indicator — Design System /components/feedback, "Tags com
   Indicador". A dot carries the status, so it is never colour alone. */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--fpf-radius-full);
  border: 1px solid transparent;
  font-size: var(--fpf-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-tag__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--fpf-radius-full);
  flex: none;
}
.ds-tag--ativo {
  background: var(--fpf-status-success-bg);
  border-color: var(--fpf-status-success-border);
  color: var(--fpf-status-success-content);
}
.ds-tag--ativo .ds-tag__dot {
  background: var(--fpf-status-success-solid);
}
.ds-tag--atencao {
  background: var(--fpf-status-warning-bg);
  border-color: var(--fpf-status-warning-border);
  color: var(--fpf-status-warning-content);
}
.ds-tag--atencao .ds-tag__dot {
  background: var(--fpf-status-warning-solid);
}
.ds-tag--critico {
  background: var(--fpf-status-danger-bg);
  border-color: var(--fpf-status-danger-border);
  color: var(--fpf-status-danger-content);
}
.ds-tag--critico .ds-tag__dot {
  background: var(--fpf-status-danger-solid);
}
.ds-tag--informacao {
  background: var(--fpf-status-info-bg);
  border-color: var(--fpf-status-info-border);
  color: var(--fpf-status-info-content);
}
.ds-tag--informacao .ds-tag__dot {
  background: var(--fpf-status-info-solid);
}
.ds-tag--neutro {
  background: var(--fpf-bg-muted);
  border-color: var(--fpf-border-default);
  color: var(--fpf-content-secondary);
}
.ds-tag--brand {
  background: var(--fpf-interactive-primary-subtle);
  border-color: var(--fpf-border-focus);
  color: var(--fpf-link-default);
}

/* Progress — Design System /components/feedback, "Progresso".
   Heights SM 6 / MD 10 / LG 14, track on bg/muted. */
.ds-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fpf-space-2);
}
.ds-progress__label {
  font-size: var(--fpf-font-size-md);
  font-weight: 600;
  color: var(--fpf-content-primary);
}
.ds-progress__value {
  font-size: var(--fpf-font-size-md);
  font-weight: 600;
  color: var(--fpf-content-secondary);
}
.ds-progress__track {
  background: var(--fpf-bg-muted);
  border-radius: var(--fpf-radius-full);
  overflow: hidden;
}
.ds-progress__track--sm {
  height: 6px;
}
.ds-progress__track--md {
  height: 10px;
}
.ds-progress__track--lg {
  height: 14px;
}
.ds-progress__fill {
  height: 100%;
  border-radius: var(--fpf-radius-full);
  transition: width 240ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .ds-progress__fill {
    transition: none;
  }
}
.ds-progress__fill--brand {
  background: var(--fpf-interactive-primary-default);
}
.ds-progress__fill--success {
  background: var(--fpf-interactive-accent-default);
}
.ds-progress__fill--warning {
  background: var(--fpf-status-warning-solid);
}
.ds-progress__fill--danger {
  background: var(--fpf-status-danger-solid);
}
.ds-progress__fill--info {
  background: var(--fpf-status-info-solid);
}

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fpf-space-3);
  padding: var(--fpf-space-4) var(--fpf-space-6);
  border-radius: var(--fpf-radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--fpf-space-4);
}
.ds-alert__icon {
  flex: none;
  margin-top: 2px;
  display: inline-flex;
}
.ds-alert__title {
  font-size: var(--fpf-font-size-md);
  font-weight: 700;
  margin-bottom: 2px;
}
.ds-alert__text {
  font-size: var(--fpf-font-size-md);
  line-height: 1.5;
}
.ds-alert--success {
  background: var(--fpf-status-success-bg);
  border-color: var(--fpf-status-success-border);
  color: var(--fpf-status-success-content);
}
.ds-alert--warning {
  background: var(--fpf-status-warning-bg);
  border-color: var(--fpf-status-warning-border);
  color: var(--fpf-status-warning-content);
}
.ds-alert--danger {
  background: var(--fpf-status-danger-bg);
  border-color: var(--fpf-status-danger-border);
  color: var(--fpf-status-danger-content);
}
.ds-alert--info {
  background: var(--fpf-status-info-bg);
  border-color: var(--fpf-status-info-border);
  color: var(--fpf-status-info-content);
}
/* The institutional tone, for product news rather than a status. */
.ds-alert--lime {
  background: var(--fpf-interactive-primary-subtle);
  border-color: color-mix(in srgb, var(--fpf-interactive-primary-default) 35%, transparent);
  color: var(--fpf-link-default);
}

/* ==========================================================================
   Input & form controls — Design System guide `input`, with the measurements
   from the rendered /examples/login: control height 44, 1.5px border,
   radius/md, 14px text; label 12px/600 with 6px below it.
   States: default, focus, error, disabled, readonly.
   ========================================================================== */
.ds-field + .ds-field {
  margin-top: var(--fpf-space-4);
}

/* A full-width form lays its fields out in columns rather than one long
   stack; `ds-form__wide` marks a field that needs the whole row. */
.ds-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--fpf-space-4) var(--fpf-space-6);
  align-items: start;
}
.ds-form__grid .ds-field + .ds-field {
  margin-top: 0;
}
.ds-form__wide {
  grid-column: 1 / -1;
}
.ds-field__label {
  display: block;
  font-size: var(--fpf-font-size-sm);
  font-weight: 600;
  color: var(--fpf-content-primary);
  margin-bottom: 6px;
}
.ds-field__required {
  color: var(--fpf-status-danger-content);
}

.ds-field__control,
.ds-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--fpf-space-4);
  font-family: inherit;
  font-size: var(--fpf-font-size-md);
  color: var(--fpf-content-primary);
  background: var(--fpf-surface-default);
  border: 1.5px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-md);
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}
textarea.ds-field__control {
  height: auto;
  min-height: 88px;
  padding: var(--fpf-space-3) var(--fpf-space-4);
  line-height: var(--fpf-lineHeight-relaxed);
}
select.ds-field__control {
  cursor: pointer;
}
.ds-field__control::placeholder {
  color: var(--fpf-content-tertiary);
}
.ds-field__control:hover:not([disabled]):not([readonly]) {
  border-color: var(--fpf-border-strong);
}
.ds-field__control:focus {
  outline: none;
  border-color: var(--fpf-border-focus);
}
.ds-field__control[disabled] {
  background: var(--fpf-bg-muted);
  color: var(--fpf-content-disabled);
  cursor: not-allowed;
}
.ds-field__control[readonly] {
  background: var(--fpf-bg-subtle);
  color: var(--fpf-content-secondary);
}
.ds-field--error .ds-field__control {
  border-color: var(--fpf-status-danger-border);
  background: var(--fpf-status-danger-bg);
}
.ds-field--error .ds-field__control:focus {
  border-color: var(--fpf-status-danger-solid);
}

.ds-field__helper {
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-tertiary);
  line-height: var(--fpf-lineHeight-relaxed);
  margin-top: var(--fpf-space-1);
}
.ds-field__error {
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-status-danger-content);
  margin-top: var(--fpf-space-1);
}

/* Checkbox, radio and switch stay native inputs, styled to the catalog's
   measurements (20x20, radius/sm, 1.5px, lime when checked). The rendered
   component is a `<button role="checkbox">`; a form that cannot submit
   without JavaScript would fail this feature's own requirement. */
.ds-field--checkbox,
.ds-field--radio {
  display: flex;
  align-items: flex-start;
  gap: var(--fpf-space-3);
}
.ds-field--checkbox .ds-field__label,
.ds-field--radio .ds-field__label {
  order: 2;
  margin-bottom: 0;
  font-size: var(--fpf-font-size-md);
  font-weight: 500;
}
.ds-field--checkbox .ds-field__control,
.ds-field--radio .ds-field__control {
  appearance: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  flex: none;
  order: 1;
  margin-top: 1px;
  border: 1.5px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-sm);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.ds-field--radio .ds-field__control {
  border-radius: var(--fpf-radius-full);
}
.ds-field--checkbox .ds-field__control:checked,
.ds-field--radio .ds-field__control:checked {
  background: var(--fpf-interactive-primary-default);
  border-color: var(--fpf-interactive-primary-default);
}
.ds-field--checkbox .ds-field__control:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid var(--fpf-content-inverse);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ds-field--radio .ds-field__control:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--fpf-radius-full);
  background: var(--fpf-content-inverse);
}
.ds-field--checkbox .ds-field__control[disabled],
.ds-field--radio .ds-field__control[disabled] {
  opacity: 0.5;
}

/* Switch — catalog sizes SM 36x20/14, MD 44x24/18, LG 52x28/22. MD here. */
.ds-field--switch {
  display: flex;
  align-items: flex-start;
  gap: var(--fpf-space-3);
}
.ds-field--switch .ds-field__label {
  order: 2;
  margin-bottom: 0;
  font-size: var(--fpf-font-size-md);
  font-weight: 500;
}
.ds-field--switch .ds-field__control {
  appearance: none;
  order: 1;
  width: 44px;
  height: 24px;
  min-height: 0;
  padding: 2px;
  flex: none;
  border-radius: var(--fpf-radius-full);
  border: 1.5px solid var(--fpf-border-default);
  background: var(--fpf-bg-muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.ds-field--switch .ds-field__control::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: var(--fpf-radius-full);
  background: var(--fpf-content-tertiary);
  transition: background-color 120ms ease;
}
.ds-field--switch .ds-field__control:checked {
  background: var(--fpf-interactive-primary-default);
  border-color: var(--fpf-interactive-primary-default);
  justify-content: flex-end;
}
.ds-field--switch .ds-field__control:checked::after {
  background: var(--fpf-content-inverse);
}

.ds-form__actions {
  display: flex;
  gap: var(--fpf-space-2);
  margin-top: var(--fpf-space-6);
}

/* ==========================================================================
   Timeline — LOCAL COMPOSITION. The deployment detail's spine, built from the
   feedback status tones. See design-system.md, "Gaps".
   ========================================================================== */
.ds-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-timeline__item {
  display: flex;
  gap: var(--fpf-space-3);
  padding: var(--fpf-space-2) 0;
  align-items: baseline;
}
.ds-timeline__item + .ds-timeline__item {
  border-top: 1px solid var(--fpf-border-default);
}
.ds-timeline__marker {
  flex: 0 0 1.25rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}
.ds-timeline__item--ok .ds-timeline__marker,
.ds-timeline__item--changed .ds-timeline__marker {
  color: var(--fpf-status-success-content);
}
.ds-timeline__item--failed .ds-timeline__marker,
.ds-timeline__item--unreachable .ds-timeline__marker {
  color: var(--fpf-status-danger-content);
}
.ds-timeline__item--running .ds-timeline__marker {
  color: var(--fpf-status-info-content);
}
.ds-timeline__item--skipped .ds-timeline__marker {
  color: var(--fpf-content-tertiary);
}
.ds-timeline__name {
  flex: 1;
}
.ds-timeline__item--skipped .ds-timeline__name {
  color: var(--fpf-content-tertiary);
}
.ds-timeline__meta {
  color: var(--fpf-content-tertiary);
  font-size: var(--fpf-font-size-sm);
  white-space: nowrap;
}

/* Raw output, behind a disclosure — never the first thing shown (FR-506). */
.ds-output {
  margin: 0;
  padding: var(--fpf-space-4);
  background: var(--fpf-bg-subtle);
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-md);
  font-family: var(--app-font-family-mono);
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 32rem;
  overflow-y: auto;
}
.ds-disclosure > summary {
  cursor: pointer;
  padding: var(--fpf-space-2) 0;
  color: var(--fpf-link-default);
  font-weight: 600;
}

/* Definition grid for detail pages */
.ds-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--fpf-space-4);
  margin: 0;
}
.ds-facts dt {
  font-size: var(--fpf-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fpf-content-secondary);
}
.ds-facts dd {
  margin: var(--fpf-space-1) 0 0;
  color: var(--fpf-content-primary);
}

.ds-stack > * + * {
  margin-top: var(--fpf-space-4);
}
.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpf-space-2);
  align-items: center;
}

/* A task in flight when the run stopped (selectors.INTERRUPTED). */
.ds-timeline__item--interrupted .ds-timeline__marker {
  color: var(--fpf-status-warning-content);
}

/* ==========================================================================
   Icons — inline SVG, sized in em so they scale with their container's text.
   ========================================================================== */
.ds-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.ds-icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ==========================================================================
   Auth page — the shared FPFtech sign-in shell.

   LOCAL COMPOSITION: the catalog has no page-level guide, so the layout is
   ours; every colour still comes from a token. The corner glow is derived from
   interactive/primary with `color-mix` rather than a new literal, so it
   follows the theme instead of forking the palette.
   ========================================================================== */
.ds-auth {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: var(--fpf-space-8) var(--fpf-space-6);
  position: relative;
  overflow: hidden;
  background: var(--fpf-surface-default);
}
.ds-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      70rem 45rem at 100% -10%,
      color-mix(in srgb, var(--fpf-interactive-primary-default) 22%, transparent),
      transparent 65%
    ),
    radial-gradient(
      50rem 35rem at -10% 110%,
      color-mix(in srgb, var(--fpf-interactive-primary-default) 10%, transparent),
      transparent 60%
    );
}

.ds-auth__theme {
  position: absolute;
  top: var(--fpf-space-4);
  right: var(--fpf-space-4);
  z-index: 1;
}

.ds-auth__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--fpf-space-8);
  align-items: center;
}
@media (max-width: 900px) {
  .ds-auth__grid {
    grid-template-columns: 1fr;
    gap: var(--fpf-space-6);
  }
}

/* ---- Left column: who this is and what it does ---- */
.ds-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-3);
  margin-bottom: var(--fpf-space-8);
}
/* No tile behind it: the mark is the mark. A lime plate under a lime logo
   only erases half of it. */
.ds-auth__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.ds-auth__brand-name {
  font-size: var(--fpf-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fpf-interactive-primary-default);
}
.ds-auth__brand-tagline {
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-secondary);
}

.ds-auth__eyebrow {
  font-size: var(--fpf-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fpf-interactive-primary-default);
  margin-bottom: var(--fpf-space-3);
}
.ds-auth__title {
  font-size: clamp(var(--fpf-font-size-2xl), 4.5vw, var(--fpf-font-size-4xl));
  font-weight: var(--fpf-font-weight-black);
  line-height: var(--fpf-lineHeight-tight);
  letter-spacing: var(--fpf-letterSpacing-tight);
  margin-bottom: var(--fpf-space-2);
}
.ds-auth__lead {
  font-size: var(--fpf-font-size-xl);
  color: var(--fpf-content-secondary);
  margin: 0 0 var(--fpf-space-4);
}
.ds-auth__blurb {
  font-size: var(--fpf-font-size-md);
  line-height: 1.65;
  color: var(--fpf-content-secondary);
  max-width: 34rem;
  margin: 0;
}

.ds-auth__assurance {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-3);
  margin-top: var(--fpf-space-8);
  font-size: var(--fpf-font-size-md);
  color: var(--fpf-content-secondary);
}
.ds-auth__assurance-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--fpf-radius-full);
  background: color-mix(in srgb, var(--fpf-interactive-primary-default) 18%, transparent);
  color: var(--fpf-interactive-primary-default);
}

/* ---- Right column: the card ---- */
.ds-auth__panel {
  justify-self: end;
  width: 100%;
  max-width: 27rem;
}
@media (max-width: 900px) {
  .ds-auth__panel {
    justify-self: stretch;
  }
}
.ds-auth__card {
  background: var(--fpf-surface-raised);
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-lg);
  padding: var(--fpf-space-6);
  box-shadow: var(--app-shadow-raised);
}
.ds-auth__card-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fpf-radius-md);
  background: color-mix(in srgb, var(--fpf-interactive-primary-default) 16%, transparent);
  color: var(--fpf-interactive-primary-default);
  margin-bottom: var(--fpf-space-4);
}
.ds-auth__card h1 {
  font-size: var(--fpf-font-size-xl);
  margin-bottom: var(--fpf-space-2);
}
.ds-auth__card-sub {
  color: var(--fpf-content-secondary);
  font-size: var(--fpf-font-size-md);
  margin: 0 0 var(--fpf-space-6);
}
.ds-auth__submit {
  width: 100%;
  justify-content: space-between;
  margin-top: var(--fpf-space-6);
}
.ds-auth__hint {
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-tertiary);
  text-align: center;
  margin: var(--fpf-space-3) 0 0;
}
.ds-auth__note {
  display: flex;
  gap: var(--fpf-space-2);
  align-items: flex-start;
  margin-top: var(--fpf-space-6);
  padding-top: var(--fpf-space-4);
  border-top: 1px solid var(--fpf-border-default);
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-tertiary);
}
.ds-auth__note .ds-icon {
  color: var(--fpf-interactive-primary-default);
  margin-top: 2px;
}
.ds-auth__footer {
  text-align: center;
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-tertiary);
  margin-top: var(--fpf-space-4);
}

/* ==========================================================================
   Sidebar footer, sections and brand subtitle — the catalog application's own
   sidebar. Labelled theme toggle, signed-in user, sign-out and version.
   ========================================================================== */
.ds-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpf-space-2);
}
.ds-nav--collapsed .ds-nav__head {
  flex-direction: column;
  gap: var(--fpf-space-3);
}

.ds-nav__brand-text small {
  display: block;
  font-size: var(--fpf-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-nav-content-dim);
}

.ds-nav__collapse {
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--app-nav-content-faint);
}
.ds-nav__collapse:hover {
  background: var(--app-nav-hover);
  color: var(--app-nav-content);
}
.ds-nav--collapsed .ds-nav__collapse {
  width: 36px;
  height: 36px;
  background: var(--app-nav-hover);
}

.ds-nav__body {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}
.ds-nav--collapsed .ds-nav__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section label — Label/XS from the type scale. */
.ds-nav__section {
  margin: var(--fpf-space-3) 0 var(--fpf-space-1);
  padding: 0 var(--fpf-space-3);
  font-size: var(--fpf-font-size-xs);
  font-weight: var(--fpf-font-weight-extrabold);
  letter-spacing: var(--fpf-letterSpacing-widest);
  text-transform: uppercase;
  color: var(--app-nav-content-faint);
}
/* The group holding the current page is tinted, so the section reads as
   active even when its item is scrolled out of view. */
.ds-nav__section--active {
  color: color-mix(in srgb, var(--fpf-interactive-primary-default) 70%, transparent);
}
.ds-nav--collapsed .ds-nav__section {
  width: 24px;
  height: 1px;
  padding: 0;
  margin: var(--fpf-space-2) 0;
  overflow: hidden;
  text-indent: -999px;
  background: var(--app-nav-divider);
}

.ds-nav__link {
  font-size: var(--fpf-font-size-md);
}

/* Footer rows: the theme toggle, the user, sign-out, then the version. */
.ds-nav__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fpf-space-2);
  width: 100%;
  padding-top: var(--fpf-space-4);
}
.ds-nav--collapsed .ds-nav__footer {
  align-items: center;
}

.ds-nav__action,
.ds-nav__user {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-2);
  width: 100%;
  padding: var(--fpf-space-2) var(--fpf-space-3);
  border: none;
  border-radius: var(--fpf-radius-md);
  background: var(--app-nav-hover);
  color: var(--app-nav-content);
  font-family: inherit;
  font-size: var(--fpf-font-size-md);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.ds-nav__user {
  cursor: default;
  background: transparent;
}
.ds-nav__action:hover {
  background: var(--app-nav-hover-strong);
  color: var(--app-nav-content-strong);
}
.ds-nav__action-icon {
  display: inline-flex;
  flex: none;
}
.ds-nav__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--fpf-radius-full);
  background: var(--fpf-interactive-primary-subtle);
  color: var(--fpf-interactive-primary-default);
  font-size: var(--fpf-font-size-xs);
  font-weight: 700;
  letter-spacing: 0;
}

/* The control names its destination, as the institutional applications do:
   "Modo Claro" while dark, "Modo Escuro" while light. Swapped in CSS so it is
   right before any JavaScript has run, and right without JavaScript at all. */
[data-theme-icon-light],
[data-theme-label-light] {
  display: none;
}
[data-theme="dark"] [data-theme-icon-dark],
[data-theme="dark"] [data-theme-label-dark] {
  display: inline-flex;
}
[data-theme="dark"] [data-theme-icon-light],
[data-theme="dark"] [data-theme-label-light] {
  display: none;
}
[data-theme="light"] [data-theme-icon-dark],
[data-theme="light"] [data-theme-label-dark] {
  display: none;
}
[data-theme="light"] [data-theme-icon-light],
[data-theme="light"] [data-theme-label-light] {
  display: inline-flex;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-icon-dark],
  :root:not([data-theme="light"]) [data-theme-label-dark] {
    display: inline-flex;
  }
  :root:not([data-theme="light"]) [data-theme-icon-light],
  :root:not([data-theme="light"]) [data-theme-label-light] {
    display: none;
  }
}

/* Identity block: name, address, and two icon actions. */
.ds-nav__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpf-space-2);
  padding: var(--fpf-space-2) var(--fpf-space-3);
  border-radius: var(--fpf-radius-md);
}
.ds-nav__identity-text {
  min-width: 0;
}
.ds-nav__identity-name {
  display: block;
  font-size: var(--fpf-font-size-md);
  font-weight: var(--fpf-font-weight-bold);
  color: var(--app-nav-content-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-nav__identity-mail {
  display: block;
  font-size: var(--fpf-font-size-sm);
  color: var(--app-nav-content);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-nav__identity-actions {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-1);
  flex: none;
}
.ds-nav__icon-action {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--fpf-radius-sm);
  background: transparent;
  color: var(--app-nav-content-faint);
  cursor: pointer;
}
.ds-nav__icon-action:hover {
  background: var(--app-nav-hover);
  color: var(--app-nav-content-strong);
}
.ds-nav--collapsed .ds-nav__identity-text,
.ds-nav--collapsed .ds-nav__identity {
  display: none;
}

.ds-nav--collapsed .ds-nav__action,
.ds-nav--collapsed .ds-nav__user {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
.ds-nav--collapsed .ds-nav__action-label {
  display: none;
}

.ds-nav__version {
  margin: var(--fpf-space-1) 0 0;
  padding: 0 var(--fpf-space-3);
  text-align: center;
  font-size: var(--fpf-font-size-xs);
  font-weight: var(--fpf-font-weight-medium);
  letter-spacing: 0;
  color: var(--app-nav-content-ghost);
}
.ds-nav--collapsed .ds-nav__version {
  display: none;
}

/* ==========================================================================
   Data table — Design System /examples/table ("Admin Table").
   A bordered, rounded panel: toolbar with search and a primary action, a
   header row on bg/subtle in Label/XS, rows that tint on hover, and a footer
   with the count and pagination. Still a local composition — the catalog has
   no table *guide* — but the geometry is the example's.
   ========================================================================== */
.ds-panel {
  background: var(--fpf-surface-default);
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-lg);
  box-shadow: var(--app-shadow-raised);
  overflow: hidden;
}
.ds-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpf-space-4);
  padding: var(--fpf-space-5);
  border-bottom: 1px solid var(--fpf-border-default);
  flex-wrap: wrap;
}
.ds-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpf-space-4);
  padding: var(--fpf-space-5);
  border-top: 1px solid var(--fpf-border-default);
}
.ds-panel__count {
  font-size: var(--fpf-font-size-sm);
  color: var(--fpf-content-tertiary);
}

/* Search field in a toolbar: 36px, not the 44px form control. */
.ds-search {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-2);
  height: 36px;
  padding: 0 var(--fpf-space-3);
  flex: 1;
  max-width: 20rem;
  border: 1px solid var(--fpf-border-default);
  border-radius: var(--fpf-radius-md);
  background: var(--fpf-surface-default);
  color: var(--fpf-content-tertiary);
}
.ds-search:focus-within {
  border-color: var(--fpf-border-focus);
}
.ds-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fpf-font-size-md);
  color: var(--fpf-content-primary);
}
.ds-search input::placeholder {
  color: var(--fpf-content-tertiary);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
}
.ds-table th {
  text-align: left;
  padding: var(--fpf-space-3) var(--fpf-space-5);
  background: var(--fpf-bg-subtle);
  border-bottom: 1px solid var(--fpf-border-default);
  font-size: var(--fpf-font-size-xs);
  font-weight: var(--fpf-font-weight-extrabold);
  letter-spacing: var(--fpf-letterSpacing-widest);
  text-transform: uppercase;
  color: var(--fpf-content-tertiary);
}
.ds-table td {
  padding: var(--fpf-space-3) var(--fpf-space-5);
  border-bottom: 1px solid var(--fpf-border-default);
  font-size: var(--fpf-font-size-md);
  color: var(--fpf-content-secondary);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td {
  border-bottom: none;
}
.ds-table tbody tr:hover {
  background: var(--fpf-bg-subtle);
}
.ds-table__primary {
  font-weight: 600;
  color: var(--fpf-content-primary);
}
.ds-table__identity {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-3);
}
.ds-table__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--fpf-radius-full);
  background: var(--fpf-interactive-primary-subtle);
  color: var(--fpf-link-default);
  font-size: var(--fpf-font-size-sm);
  font-weight: 700;
}
.ds-table__empty {
  padding: var(--fpf-space-12);
  text-align: center;
  color: var(--fpf-content-secondary);
}
.ds-table-scroll {
  overflow-x: auto;
}

/* Pagination — the example's square buttons on bg/muted. */
.ds-pagination {
  display: flex;
  align-items: center;
  gap: var(--fpf-space-2);
}
.ds-pagination__step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--fpf-radius-md);
  background: var(--fpf-bg-muted);
  color: var(--fpf-content-secondary);
  text-decoration: none;
}
.ds-pagination__step:hover {
  color: var(--fpf-content-primary);
}
.ds-pagination__step[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}
.ds-pagination__page {
  font-size: var(--fpf-font-size-sm);
  font-weight: 600;
  color: var(--fpf-content-primary);
  padding: 0 var(--fpf-space-2);
}

.ds-table__sub {
  display: block;
  font-size: var(--fpf-font-size-sm);
}

/* A panel that holds content rather than a table needs its own padding —
   the table brings its own through the cells. */
.ds-panel__body {
  padding: var(--fpf-space-5);
}