/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: var(--control-min-size);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  line-height: var(--leading-tight);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-secondary-light);
  color: var(--color-secondary-strong);
  border-color: var(--color-secondary);
}
.btn-secondary:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-bg-muted); color: var(--color-text); }

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}
.btn-danger:hover { background: #b91c1c; }

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.btn-icon {
  padding: var(--space-2);
  aspect-ratio: 1;
}

/* ── Forms ─────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group + .form-group { margin-top: var(--space-4); }

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.form-label-required::after {
  content: " *";
  color: var(--color-danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary);
}

.form-input::placeholder { color: var(--color-text-muted); }

.form-input[aria-invalid="true"],
.form-input.is-invalid {
  border-color: var(--color-danger);
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min-size);
}

.form-checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}

.form-card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.form-card h2 { margin-bottom: var(--space-5); }
.form-card.wide { margin-top: var(--space-6); }
.form-field { display: grid; gap: var(--space-2); border: 0; }
.form-field > span, .form-field legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.form-field small { color: var(--color-text-muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); }
.form-row { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

/* ── Cards ─────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card-raised {
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card-block {
  border: 2px solid var(--color-border-strong);
  box-shadow: var(--shadow-hard);
}

.card-inverse {
  border-color: var(--color-secondary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.card-inverse a { color: inherit; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.card-body > * + * { margin-top: var(--space-3); }

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── Badges / tags ─────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-neutral {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.badge-primary {
  background: var(--color-primary-light);
  color: var(--color-primary-strong);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success-text);
}

.badge-warning {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-light);
  color: var(--color-warning-text);
}

.badge-danger {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-light);
  color: var(--color-danger-text);
}

.badge-info {
  background: var(--color-info-light);
  color: var(--color-info-text);
}

/* Certification levels are deliberately independent of team brand accents. */
.badge-cert-0 { background: transparent; color: var(--color-text-muted); }
.badge-cert-1 { border: 1px dashed var(--color-warning); background: var(--color-warning-light); color: var(--color-warning-text); }
.badge-cert-2 { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); color: var(--color-text); }
.badge-cert-3 { background: color-mix(in srgb, var(--color-primary) 52%, var(--color-surface)); color: var(--color-primary-text); }
.badge-cert-4 { background: var(--color-primary); color: var(--color-primary-text); }
.badge-cert-5 { background: var(--color-primary); color: var(--color-primary-text); box-shadow: inset 0 -3px 0 var(--color-secondary); }

/* Training status badges (mapped to semantic colors) */
.badge-not_started   { background: var(--color-bg-muted);      color: var(--color-text-muted); }
.badge-in_progress   { background: var(--color-info-light);    color: var(--color-info-text); }
.badge-certified     { background: var(--color-success-light); color: var(--color-success-text); }
.badge-expiring_soon { border: 1px solid var(--color-warning); background: var(--color-warning-light); color: var(--color-warning-text); }
.badge-expired       { border: 1px solid var(--color-danger); background: var(--color-danger-light); color: var(--color-danger-text); }
.badge-revoked       { border: 1px solid var(--color-border-strong); background: var(--color-bg-muted); color: var(--color-text-secondary); text-decoration: line-through; }

/* ── Alerts / notices ──────────────────────────────────── */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.alert-success { border: 2px solid var(--color-success); background: var(--color-success-light); color: var(--color-success-text); }
.alert-warning { border: 2px solid var(--color-warning); background: var(--color-warning-light); color: var(--color-warning-text); }
.alert-danger  { border: 2px solid var(--color-danger); background: var(--color-danger-light);  color: var(--color-danger-text);  }
.alert-info    { border: 2px solid var(--color-info); background: var(--color-info-light);    color: var(--color-info-text);    }

/* ── Tables ────────────────────────────────────────────── */

.table-wrap {
  /* Tables should scroll inside their own region instead of widening the
   * document on phones. The training matrix opts into .matrix-scroll when it
   * also needs a bounded vertical viewport. */
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.responsive-table { overflow: visible; }

.matrix-scroll {
  max-height: calc(100vh - 17rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.table thead th {
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Keep row labels visible while wide tables are scrolled horizontally. The
 * opaque background is important: without it, cells behind the pinned column
 * show through as the table moves. */
.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
  z-index: 1;
}

/* The top-left cell sits above both the pinned header and pinned column. */
.table thead th:first-child {
  background: var(--color-bg-subtle);
  z-index: 3;
}

.table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.table tbody tr:last-child { border-bottom: none; }

.table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.table tbody tr:hover > th:first-child,
.table tbody tr:hover > td:first-child {
  background: var(--color-bg-subtle);
}

@media (max-width: 640px) {
  /* Keep dense admin tables readable without forcing a sideways scan. Cells
   * opt in with data-label so the same markup remains a real semantic table. */
  .responsive-table { border: 0; }
  .responsive-table .table,
  .responsive-table .table thead,
  .responsive-table .table tbody,
  .responsive-table .table tr,
  .responsive-table .table th,
  .responsive-table .table td { display: block; }
  .responsive-table .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .responsive-table .table tr {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .responsive-table .table tr + tr { margin-top: var(--space-3); }
  .responsive-table .table td,
  .responsive-table .table th {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .responsive-table .table td::before,
  .responsive-table .table th::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }
  .responsive-table .table td:first-child,
  .responsive-table .table th:first-child {
    position: static;
    box-shadow: none;
    background: transparent;
  }
  .responsive-table .table td:last-child { padding-bottom: 0; }
}

/* ── Navigation: top bar ───────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 4px solid var(--color-secondary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.topbar-inner {
  display: flex;
  width: 100%;
  max-width: var(--container-max);
  min-height: 4.25rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.topbar-brand {
  display: flex;
  min-width: 0;
  min-height: var(--control-min-size);
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--color-primary-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-brand:hover { color: var(--color-primary-text); text-decoration: none; }

.mobile-nav { flex: 1 1 auto; }

.topbar-nav {
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  gap: 2px;
}

.topbar-link {
  display: flex;
  min-height: var(--control-min-size);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-primary-text) 86%, transparent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.topbar-link:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-text);
  text-decoration: none;
}

.topbar-link[aria-current="page"],
.topbar-link.is-active {
  border-bottom-color: var(--color-secondary);
  color: var(--color-primary-text);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar-settings,
.topbar-account-toggle {
  display: inline-flex;
  min-width: var(--control-min-size);
  min-height: var(--control-min-size);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary-text);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.topbar-settings:hover,
.topbar-settings[aria-current="page"],
.topbar-account-toggle:hover,
.topbar-account-toggle[aria-expanded="true"] {
  background: var(--color-primary-hover);
  color: var(--color-primary-text);
  text-decoration: none;
}

.topbar-settings[aria-current="page"] {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}

.topbar-settings svg,
.topbar-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-account-toggle {
  gap: var(--space-2);
  padding-inline: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.topbar-account-toggle .avatar {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}

.topbar-chevron {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile menu toggle */
.topbar-toggle {
  display: none;
  min-height: var(--control-min-size);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 2px solid color-mix(in srgb, var(--color-primary-text) 55%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.topbar-toggle:hover,
.topbar-toggle[aria-expanded="true"] { background: var(--color-primary-hover); }

@media (max-width: 767px) {
  .topbar-inner { gap: var(--space-1) var(--space-2); }
  .topbar-brand {
    max-width: 100%;
    flex: 0 0 auto;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .topbar-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .topbar-actions { order: 3; margin-left: 0; }
  .mobile-nav {
    display: none;
    order: 4;
    width: 100%;
    max-height: 60vh;
    padding-bottom: var(--space-2);
    flex: 1 0 100%;
    overflow-y: auto;
  }
  .mobile-nav.is-open { display: block; }
  .topbar-nav { flex-direction: column; }
  .topbar-link { width: 100%; padding-inline: var(--space-3); }
  .topbar-account-name,
  .topbar-chevron { display: none; }
  .topbar-actions .dropdown { position: static; }
  .topbar-actions .dropdown-menu {
    right: auto;
    left: 16px;
    width: min(15rem, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    min-width: 0;
  }
  .topbar-actions .dropdown-item {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .mobile-nav { display: block !important; }
  .topbar-inner { padding-inline: var(--space-6); }
}

/* ── Empty states ──────────────────────────────────────── */

.empty-state {
  display: flex;
  min-height: 12.5rem;
  padding: var(--space-8);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: left;
}

.empty-state-icon {
  display: grid;
  width: 3rem;
  min-height: 3rem;
  place-items: center;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.empty-state-title,
.empty-state > h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -.01em;
  color: var(--color-text);
  text-transform: uppercase;
}

.empty-state.compact { min-height: 0; padding: var(--space-6); }

/* ── Page header ───────────────────────────────────────── */

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

.page-title { font-size: var(--text-2xl); }

.page-description {
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.page-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.narrow-page { max-width: 44rem; margin: 0 auto; }
.stack { display: grid; gap: var(--space-4); max-width: 40rem; }
.stack-tight { gap: var(--space-2); }

/* ── Dropdown menu ─────────────────────────────────────── */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  width: min(15rem, calc(100vw - (2 * var(--space-4))));
  background: var(--color-surface-raised);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
}

.dropdown-item {
  display: flex;
  min-height: var(--control-min-size);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
}

.dropdown-item:hover {
  background: var(--color-bg-muted);
  text-decoration: none;
}

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-1) 0;
}

/* ── Avatar / initials ─────────────────────────────────── */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); }
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-base); }

/* ── Eyebrow ───────────────────────────────────────────── */

.eyebrow {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Page-specific training rules live in pages.css. */

/* Page-specific onboarding and meeting rules live in pages.css. */

/* ── Segmented control ─────────────────────────────────── */

.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-border);
}

.segmented-control > a,
.segmented-control > button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-md) - 1px);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.segmented-control > [aria-current],
.segmented-control > [aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ── Section divider with label ────────────────────────── */

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.section-divider::before,
.section-divider::after {
  content: "";
  height: var(--space-2);
  background: var(--color-border-strong);
}

.section-divider::before { width: var(--space-8); flex: none; }
.section-divider::after { flex: 1; }

/* ── Toast / flash messages (Django messages) ──────────── */

.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 24rem;
  width: calc(100% - var(--space-8));
}

.toast {
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.toast-success .toast-icon { color: var(--color-success); }
.toast-warning,
.toast-info { background: var(--color-warning-light); }
.toast-warning .toast-icon,
.toast-info .toast-icon { color: var(--color-primary); }
.toast-error   { border: 2px solid var(--color-danger); background: var(--color-danger-light); color: var(--color-danger-text); }
.toast-error .toast-icon { color: var(--color-danger); }

.toast-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-top: var(--space-2);
}

.toast-icon svg,
.toast-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast-message { align-self: center; }

.toast-close {
  margin-left: auto;
  width: var(--control-min-size);
  min-width: var(--control-min-size);
  height: var(--control-min-size);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}