/**
 * Members module — UI override stylesheet
 *
 * Shared field chrome (use everywhere — do not invent per-section labels):
 *   .members-field / __label / __required / __info / __control / __help
 *
 * Rebuild:
 *   cd modules/Members && npx vite build
 *
 * Loaded via: modules/Members/resources/js/app.js
 */

/* ==========================================================================
   List / Index (MembersIndex, MembersGrid, row menu, identity/photo fields)
   ========================================================================== */

/* ---------- Members Directory (list redesign) ---------- */
.members-directory {
  --md-radius: 16px;
  --md-radius-sm: 12px;
  --md-border: #e7eaf0;
  --md-surface: #ffffff;
  --md-muted: #6b7280;
  --md-text: #111827;
  --md-purple: #6d5efc;
  --md-purple-deep: #5446e5;
  --md-purple-soft: #efedff;
  --md-blue: #3b82f6;
  --md-orange: #f59e0b;
  --md-red: #ef4444;
  --md-green: #16a34a;
  --md-queue-text: #3d4a63;
  --md-queue-badge-bg: #eef0f4;
  --md-queue-badge-text: #3d4a63;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dark .members-directory {
  --md-border: rgb(var(--color-neutral-700));
  --md-surface: rgb(var(--color-neutral-900));
  --md-muted: rgb(var(--color-neutral-400));
  --md-text: #f9fafb;
  --md-purple-soft: rgba(109, 94, 252, 0.18);
  --md-queue-text: rgb(var(--color-neutral-300));
  --md-queue-badge-bg: rgb(var(--color-neutral-800));
  --md-queue-badge-text: rgb(var(--color-neutral-200));
}

/* Status filter row — sits on page, no card / grey bar chrome */
.members-directory__queues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (max-width: 639px) {
  .members-directory__queues {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem 0.35rem;
  }

  .members-directory__queues::-webkit-scrollbar {
    display: none;
  }
}

.members-directory__queue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.38rem 0.55rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--md-queue-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.members-directory__queue:hover {
  color: var(--md-text);
}

.members-directory__queue:focus-visible {
  outline: 2px solid rgba(109, 94, 252, 0.45);
  outline-offset: 2px;
}

.members-directory__queue.is-active {
  padding: 0.38rem 0.55rem 0.38rem 0.9rem;
  background: var(--md-purple);
  color: #fff;
  box-shadow: none;
}

.members-directory__queue.is-active:hover {
  color: #fff;
  background: #6354f5;
}

.members-directory__queue-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: var(--md-queue-badge-bg);
  color: var(--md-queue-badge-text);
}

.members-directory__queue.is-active .members-directory__queue-count {
  background: var(--md-purple-deep);
  color: #fff;
}

.members-directory__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (min-width: 1100px) {
  .members-directory__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.members-directory__metric {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  border: 1px solid var(--md-border);
  border-radius: 14px;
  background: var(--md-surface);
  padding: 1.15rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.members-directory__metric[role='button'] {
  cursor: pointer;
}

.members-directory__metric[role='button']:hover {
  border-color: #d9d6f5;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.members-directory__metric[role='button']:focus-visible {
  outline: 2px solid rgba(109, 94, 252, 0.45);
  outline-offset: 2px;
}

.members-directory__metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 16px;
  flex-shrink: 0;
  background: var(--md-purple);
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 94, 252, 0.3);
}

.members-directory__metric-glyph,
.members-directory__metric-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
}

@media (max-width: 639px) {
  .members-directory__metric-icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 14px;
  }

  .members-directory__metric-glyph,
  .members-directory__metric-icon svg {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.members-directory__metric--available .members-directory__metric-icon {
  background: var(--md-blue);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.3);
}

.members-directory__metric--docs .members-directory__metric-icon {
  background: var(--md-orange);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.3);
}

.members-directory__metric--expiring .members-directory__metric-icon {
  background: #f87171;
  box-shadow: 0 8px 18px rgba(248, 113, 113, 0.3);
}

.members-directory__metric-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
}

.members-directory__metric-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.25;
}

.members-directory__metric-value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--md-text);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.members-directory__metric-hint {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  line-height: 1.3;
}

.members-directory__metric--total .members-directory__metric-hint {
  color: var(--md-green);
  font-weight: 600;
}

.members-directory__metric--docs .members-directory__metric-hint {
  color: #d97706;
  font-weight: 600;
}

.members-directory__metric--expiring .members-directory__metric-hint {
  color: #ef4444;
  font-weight: 600;
}

.dark .members-directory__metric-label {
  color: rgb(var(--color-neutral-400));
}

.dark .members-directory__metric-hint {
  color: rgb(var(--color-neutral-500));
}

.members-directory__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@media (min-width: 1280px) {
  .members-directory__body {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}

.members-directory__main {
  min-width: 0;
}

.members-directory__table {
  position: relative;
}

.members-directory__table .card,
.members-directory__table .table-wrapper,
.members-directory__table > div {
  border-radius: var(--md-radius) !important;
  border-color: var(--md-border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Fallback below table while pagination row is not ready */
.members-directory__per-page {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 0.75rem;
}

.members-directory__per-page-mount {
  display: contents;
}

/* Teleported into Core pagination row: info | page buttons | per page */
.members-directory__per-page.is-attached {
  padding: 0;
  margin-inline-start: 0.75rem;
  flex-shrink: 0;
}

.members-directory__per-page-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 10px !important;
  background: var(--md-surface) !important;
  color: var(--md-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.members-directory__per-page-btn:hover:not(:disabled) {
  background: #f8fafc !important;
}

.dark .members-directory__per-page-btn:hover:not(:disabled) {
  background: rgb(var(--color-neutral-850, 23 23 23)) !important;
}

.members-directory__per-page-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.members-directory__per-page-chevron {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--md-muted);
}

@media (max-width: 639px) {
  .members-directory__per-page.is-attached {
    margin-inline-start: 0;
    width: 100%;
    justify-content: flex-end;
    padding: 0.5rem 0 0;
  }
}

.members-directory__table table {
  font-size: 0.8125rem;
}

.members-directory__table table thead th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #6b7280 !important;
  background: #fafbfc !important;
  border-bottom: 1px solid var(--md-border) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.members-directory__table table tbody td {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
}

/* ActionColumn — split "Open profile" + chevron */
.members-directory__table th.table-actions-column,
.members-directory__table td.table-actions-column,
.members-directory__table .table-actions-column {
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  padding-left: 0.35rem !important;
  padding-right: 0.45rem !important;
  overflow: visible !important;
}

.dark .members-directory__table table thead th {
  background: rgb(var(--color-neutral-850, 23 23 23)) !important;
  color: rgb(var(--color-neutral-400)) !important;
}

.members-directory__table table tbody tr:hover {
  background: #f8f7ff !important;
}

.members-directory__table table tbody tr.is-selected,
.members-directory__table table tbody tr[aria-selected='true'],
.members-directory__table table tbody tr:has(input[type='checkbox']:checked) {
  background: var(--md-purple-soft) !important;
}

.members-directory__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.members-directory__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem;
  border: 1px solid var(--md-border);
  border-radius: 10px;
  background: #f8fafc;
}

.dark .members-directory__view-toggle {
  background: rgb(var(--color-neutral-800));
}

.members-directory__smart-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.25rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(109, 94, 252, 0.35);
  background: var(--md-purple-soft);
  color: #4c3fd4;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.members-directory__split {
  display: inline-flex;
  align-items: stretch;
  max-width: 150px;
  margin-left: auto;
  border: 1px solid #d7dbe3;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.members-directory__split-main {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.members-directory__split-main:hover {
  background: #f8fafc;
}

.members-directory__split .members-row-menu--chevron {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
}

.members-directory__split .members-row-menu__trigger--chevron {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 100% !important;
  min-height: 100%;
  padding: 0.3rem 0.4rem !important;
  border: 0 !important;
  border-left: 1px solid #d7dbe3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4b5563 !important;
}

.members-directory__split .members-row-menu__trigger--chevron .members-row-menu__icon,
.members-directory__split .members-row-menu__trigger--chevron svg {
  width: 0.9rem !important;
  height: 0.9rem !important;
  display: block !important;
  color: currentColor !important;
}

.members-directory__split .members-row-menu__trigger--chevron:hover {
  background: #f3f4f6 !important;
}

.dark .members-directory__split {
  background: rgb(var(--color-neutral-800));
  border-color: rgb(var(--color-neutral-600));
}

.dark .members-directory__split-main {
  color: rgb(var(--color-neutral-100));
}

.members-directory__aside {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 0.75rem;
}

/* Show utility rail from lg — previously xl-only looked like a "missing sidebar". */
@media (min-width: 1024px) {
  .members-directory__aside {
    display: flex;
  }
}

.members-directory__panel {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-surface);
  padding: 0.95rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.members-directory__panel-title {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.members-directory__panel-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--md-muted);
}

.members-directory__panel-hint--tight {
  margin-top: 0.55rem;
}

.members-directory__smart-list,
.members-directory__saved-list,
.members-directory__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.members-directory__smart-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.52rem 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-text);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.members-directory__smart-item:hover,
.members-directory__smart-item.is-active {
  background: var(--md-purple-soft);
  color: #4338ca;
}

.members-directory__smart-count {
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #4b5563;
}

.dark .members-directory__smart-count {
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}

.members-directory__bulk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 0.75rem;
  border: 1px dashed #d1d5db;
  border-radius: var(--md-radius-sm);
  text-align: center;
  color: var(--md-muted);
  font-size: 0.8rem;
}

.members-directory__bulk-select {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--md-border);
  background: #f9fafb;
  color: #9ca3af;
  font-size: 0.78rem;
  font-weight: 600;
}

.members-directory__bulk-selected {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.members-directory__bulk-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.members-directory__legend li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.2rem 0;
  font-size: 0.78rem;
  color: #4b5563;
}

.dark .members-directory__legend li {
  color: rgb(var(--color-neutral-300));
}

/* Identity cell — design: circular photo + HD badge, stacked text */
.members-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0.15rem 0;
}

.members-identity__photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
}

.members-identity__avatar {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #e5e7eb;
  background: #f3f4f6;
}

.members-identity__avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
}

.dark .members-identity__avatar {
  box-shadow: 0 0 0 1px rgb(var(--color-neutral-700));
}

.members-identity__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
}

.members-identity__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .members-identity__name {
  color: #fff;
}

.members-identity__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.members-identity__signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.members-identity__signal--duplicate {
  color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.members-identity__signal--verified {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.members-identity__signal--export {
  color: #7c3aed;
  border-color: #ddd6fe;
  background: #f5f3ff;
}

.members-identity__signal--contact {
  color: #6b7280;
  border-color: #e5e7eb;
  background: #f9fafb;
}

.members-identity__meta {
  font-size: 0.72rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Directory custom columns */
.members-dir-cell {
  display: flex;
  align-items: center;
  min-height: 0;
}

.members-dir-cell[data-mode='dir_status'] {
  overflow: visible;
  justify-content: center;
}

.members-dir-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: none;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.members-dir-badge[data-tone='success'] {
  background: #dcfce7;
  color: #15803d;
}

.members-dir-badge[data-tone='warning'] {
  background: #fef3c7;
  color: #b45309;
}

.members-dir-badge[data-tone='danger'] {
  background: #fee2e2;
  color: #b91c1c;
}

.members-dir-badge[data-tone='neutral'] {
  background: #f3f4f6;
  color: #4b5563;
}

.members-dir-roles {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
}

.members-dir-market {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

.members-dir-market__flag {
  font-size: 0.95rem;
  line-height: 1;
}

.members-dir-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.members-dir-avail__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #9ca3af;
}

.members-dir-avail[data-tone='success'] {
  color: #15803d;
}

.members-dir-avail[data-tone='success'] .members-dir-avail__dot {
  background: var(--md-green);
}

.members-dir-avail[data-tone='warning'] {
  color: #b45309;
}

.members-dir-avail[data-tone='warning'] .members-dir-avail__dot {
  background: var(--md-orange);
}

.members-dir-booker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.members-dir-booker__avatar {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e7eb;
}

.members-dir-booker__avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #6b7280;
}

.members-dir-booker__name {
  font-size: 0.78rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6.5rem;
}

.members-dir-complete {
  width: 100%;
  min-width: 5.5rem;
  max-width: 6.75rem;
}

.members-dir-complete__top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.28rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
}

.dark .members-dir-complete__top {
  color: #f9fafb;
}

.members-dir-complete__track {
  height: 0.35rem;
  border-radius: 999px;
  background: #eef0f4;
  overflow: hidden;
}

.members-dir-complete__fill {
  height: 100%;
  border-radius: 999px;
  background: #6d5efc;
}

.members-dir-updated {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  white-space: nowrap;
}

.members-dir-updated__date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

.members-dir-updated__time {
  font-size: 0.72rem;
  color: #9ca3af;
}

.dark .members-dir-updated__date {
  color: #e5e7eb;
}

.members-dir-muted {
  color: #9ca3af;
}

/* Actions / Sort / row ⋮ menus — readable text+icons in light and dark */
.members-actions-menu,
.members-dropdown-menu {
  color: rgb(var(--color-neutral-800));
}

.dark .members-actions-menu,
.dark .members-dropdown-menu {
  color: rgb(var(--color-neutral-100));
}

.members-actions-menu .members-actions-heading,
.members-dropdown-menu .members-dropdown-heading {
  color: rgb(var(--color-neutral-900));
}

.dark .members-actions-menu .members-actions-heading,
.dark .members-dropdown-menu .members-dropdown-heading {
  color: rgb(var(--color-neutral-100));
}

.members-actions-menu .members-actions-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-size: 0.875rem;
  color: rgb(var(--color-neutral-800));
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dark .members-actions-menu .members-actions-item {
  color: rgb(var(--color-neutral-100));
}

.members-actions-menu .members-actions-item svg,
.members-dropdown-menu [data-slot='icon'],
.members-dropdown-menu svg {
  color: inherit;
}

.members-actions-menu .members-actions-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dark .members-actions-menu .members-actions-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.members-actions-menu .members-actions-item--sub {
  gap: 0.5rem;
}

.members-actions-menu .members-actions-flyout {
  margin: 0 0.35rem 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgb(var(--color-neutral-50));
}

.dark .members-actions-menu .members-actions-flyout {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgb(var(--color-neutral-900));
}

.members-actions-menu .members-actions-remove {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  border: 0;
  cursor: pointer;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: 500;
}

.dark .members-actions-menu .members-actions-remove {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* ==========================================================================
   Wizard / Create & Edit forms (MembersCreate, form fields, sticky footer)
   ========================================================================== */

/*
 * Sticky form action bar (Prev/Next + Save/Approve).
 * Tailwind bg-white/95 and dark:bg-neutral-900/95 are not scanned from Members
 * Vue files, so they never ship — bar looked border-only with content bleeding
 * through. Keep an opaque fill here (class + structural fallback for built JS).
 */
.members-form-footer,
.members-form > .sticky.bottom-0 {
  background-color: #fff;
  border-color: rgb(var(--color-neutral-200));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 2px rgb(28 25 23 / 0.04),
    0 10px 28px -14px rgb(28 25 23 / 0.2);
}

.dark .members-form-footer,
.dark .members-form > .sticky.bottom-0 {
  background-color: rgb(var(--color-neutral-900));
  border-color: rgb(var(--color-neutral-700));
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.55);
}

/* Section labels (Heading fields like “Work as”) — more space above inputs */
.members-form .mb-1.mt-3 {
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.15rem;
}

.members-form .mb-1.mt-3:first-child {
  margin-top: 0.35rem;
}

.members-form .mb-1.mt-3 > .text-lg\/6,
.members-form .mb-1.mt-3 > [class*='text-lg'] {
  letter-spacing: 0.01em;
}

.members-section-label {
  margin-bottom: 0.85rem;
}

/*
 * FormFields uses gap-x only; IFormGroup is mb-3 (~0.75rem).
 * Give wizard inputs clearly more vertical room (floating labels need air).
 */
.members-form .grid.grid-cols-12 {
  align-items: start;
  row-gap: 0.75rem;
}

.members-form .grid.grid-cols-12 > [class*='col-span'] > div > .mb-3 {
  margin-bottom: 1rem;
}

/*
 * Shared field chrome (Role & Market + custom Members fields).
 * One label class for every external field label — do not redeclare
 * per-section label typography (work-as / chips / radio / gender / …).
 *
 *   .members-field           wrapper
 *   .members-field__label    label row (font-weight: 500)
 *   .members-field__required asterisk
 *   .members-field__info     help (i) icon
 *   .members-field__control  control band (select / radio row)
 *   .members-field__help     secondary help under control
 */
.members-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.members-field__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  min-height: 1.25rem;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(var(--color-neutral-900));
}

.dark .members-field__label {
  color: rgb(var(--color-neutral-100));
}

/* Inline label (e.g. consent checkbox text) — same type, no block margin */
.members-field__label--inline {
  display: inline;
  min-height: 0;
  margin: 0;
  line-height: 1.35;
}

.members-field__required {
  margin-right: 0.1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--color-danger-600, 220 38 38));
}

.members-field__info {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: rgb(var(--color-neutral-500));
  cursor: help;
}

.members-field__info:hover {
  color: rgb(var(--color-neutral-700));
}

.dark .members-field__info {
  color: rgb(var(--color-neutral-400));
}

.dark .members-field__info:hover {
  color: rgb(var(--color-neutral-200));
}

.members-field__control {
  box-sizing: border-box;
  min-height: 2.75rem;
  margin-top: 0;
}

.members-field__help {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(var(--color-neutral-500));
}

/* Never let floating-label padding push external-label fields down */
.members-form .mb-3.members-field.members-float-field,
.members-form .members-field.members-float-field {
  padding-top: 0 !important;
}

.members-form .members-field .members-float-label {
  display: none !important;
}

/* Top wizard tabs: horizontal scroll only — no tiny vertical scrollbar */
.members-form .members-wizard-tabs,
.members-form [data-slot='list'] [role='tablist'] {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: 3.35rem;
  align-items: stretch;
  scrollbar-width: thin;
}

.members-form [data-slot='list'] [role='tablist'] [data-slot='tab'] {
  line-height: 1.25;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Edit chrome: 6-step stepper + Member Preview sidebar
   -------------------------------------------------------------------------- */

/* Stack: full-width stepper, then fields | preview */
.members-edit-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

.members-edit-layout > .members-edit-stepper {
  width: 100%;
  min-width: 0;
}

.members-edit-layout__body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.25rem;
  min-width: 0;
}

.members-edit-layout__main {
  min-width: 0;
}

@media (min-width: 1100px) {
  .members-edit-layout__body {
    /* Wider aside so 7.5rem×10rem avatar leaves room for name block */
    grid-template-columns: minmax(0, 1fr) 24rem;
  }

  /*
   * Sticky relative to #main (overflow-y-auto), which already sits below
   * Concord's fixed navbar/action bar (--navbar-height: 4rem). Using a
   * viewport-style offset (e.g. 5.5rem) left a grey gap under the toolbar.
   * top: 0 = flush under the action bar while sticky.
   */
  .members-edit-layout__aside {
    position: sticky;
    top: 16px;
    z-index: 2;
    align-self: start;
  }
}

.members-edit-section-title {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8ebf0;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.dark .members-edit-section-title {
  border-bottom-color: rgb(var(--color-neutral-700));
  color: rgb(var(--color-neutral-100));
}

.members-edit-stepper {
  --mes-accent: #5b5ce2;
  --mes-line: #d7dbe3;
  --mes-muted: #9aa3b2;
  --mes-text: #111827;
  --mes-surface: #ffffff;
  --mes-border: #eef0f4;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 80px;
  border-radius: 12px;
  background: var(--mes-surface);
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.04);
  border: 1px solid var(--mes-border);
  /* Horizontal padding only so step buttons can stretch to the border edge */
  padding: 0 1rem;
  overflow: visible;
}

.dark .members-edit-stepper {
  --mes-surface: rgb(var(--color-neutral-900));
  --mes-text: rgb(var(--color-neutral-50));
  --mes-muted: rgb(var(--color-neutral-400));
  --mes-line: rgb(var(--color-neutral-700));
  --mes-border: rgb(var(--color-neutral-700));
  border-color: var(--mes-border);
}

.members-edit-stepper__list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 0;
  width: 100%;
  min-width: max-content;
  min-height: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: visible;
}

.members-edit-stepper__item {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.members-edit-stepper__btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  margin: 0;
  /* Vertical centering via stretch + align-items; keep underline on bottom edge */
  padding: 0 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--mes-muted);
  position: relative;
}

.members-edit-stepper__item.is-active .members-edit-stepper__btn {
  color: var(--mes-text);
}

/*
 * Active indicator sits exactly on the container bottom border:
 * button stretches to content bottom; ::after overlaps the 1px border.
 */
.members-edit-stepper__item.is-active .members-edit-stepper__btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mes-accent);
  border-radius: 1px 1px 0 0;
  pointer-events: none;
}

.members-edit-stepper__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1.5px solid #cfd5df;
  background: #fff;
  color: #8b95a5;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
}

.dark .members-edit-stepper__circle {
  background: rgb(var(--color-neutral-800));
  border-color: rgb(var(--color-neutral-600));
  color: rgb(var(--color-neutral-400));
}

.members-edit-stepper__item.is-active .members-edit-stepper__circle {
  border-color: var(--mes-accent);
  background: var(--mes-accent);
  color: #fff;
}

.members-edit-stepper__item.is-complete .members-edit-stepper__circle {
  border-color: var(--mes-accent);
  color: var(--mes-accent);
}

.members-edit-stepper__label {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
}

.members-edit-stepper__item.is-active .members-edit-stepper__label {
  font-weight: 700;
  color: var(--mes-text);
}

/* Hairline path between steps, vertically centered with circle + label */
.members-edit-stepper__connector {
  flex: 1 1 1.25rem;
  align-self: center;
  height: 1px;
  margin: 0 0.55rem;
  min-width: 0.75rem;
  background: var(--mes-line);
}

.members-preview-card {
  --mpc-accent: #2563eb;
  --mpc-accent-soft: #eff6ff;
  --mpc-accent-text: #1d4ed8;
  border-radius: 16px;
  border: 1px solid #e8ebf0;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(17 24 39 / 0.04),
    0 14px 32px -20px rgb(17 24 39 / 0.35);
  padding: 1.15rem 1.2rem 1.25rem;
}

.dark .members-preview-card {
  background: rgb(var(--color-neutral-900));
  border-color: rgb(var(--color-neutral-700));
}

.members-preview-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.dark .members-preview-card__title {
  color: rgb(var(--color-neutral-50));
}

.members-preview-card__meter {
  margin-top: 0.95rem;
}

.members-preview-card__meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.members-preview-card__meter-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

.members-preview-card__meter-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mpc-accent-text);
}

.members-preview-card__meter-track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}

.dark .members-preview-card__meter-track {
  background: rgb(var(--color-neutral-700));
}

.members-preview-card__meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mpc-accent);
  transition: width 0.25s ease;
}

.members-preview-card__meter-hint {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}

.members-preview-card__identity {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  min-width: 0;
}

.members-preview-card__avatar-wrap {
  flex: 0 0 auto;
}

.members-preview-card__avatar {
  width: 7.5rem;
  height: 10rem;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

.members-preview-card__avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.5rem;
  font-weight: 700;
}

.members-preview-card__name-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.members-preview-card__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

.dark .members-preview-card__name {
  color: rgb(var(--color-neutral-50));
}

.members-preview-card__status {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: #ffedd5;
  color: #c2410c;
}

.members-preview-card__status[data-tone='success'] {
  background: #dcfce7;
  color: #166534;
}

.members-preview-card__status[data-tone='warning'] {
  background: #ffedd5;
  color: #c2410c;
}

.members-preview-card__status[data-tone='info'],
.members-preview-card__status[data-tone='danger'] {
  background: #fee2e2;
  color: #991b1b;
}

.members-preview-card__status[data-tone='neutral'] {
  background: #f3f4f6;
  color: #4b5563;
}

.members-preview-card__meta {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

.members-preview-card__meta-block {
  margin-top: 1.05rem;
  display: grid;
  gap: 0.85rem;
}

.members-preview-card__section-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.members-preview-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.members-preview-card__pill {
  display: inline-flex;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--mpc-accent-soft);
  color: var(--mpc-accent-text);
  font-size: 0.72rem;
  font-weight: 600;
}

.dark .members-preview-card__pill {
  background: rgba(37, 99, 235, 0.18);
  color: #93c5fd;
}

.members-preview-card__facts {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.members-preview-card__fact {
  display: grid;
  gap: 0.15rem;
}

.members-preview-card__fact dt {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.members-preview-card__fact dd {
  margin: 0;
  font-size: 0.9rem;
  color: #0f172a;
  font-weight: 650;
}

.dark .members-preview-card__fact dd {
  color: rgb(var(--color-neutral-100));
}

.members-preview-card__checklist {
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid #eef0f4;
}

.dark .members-preview-card__checklist {
  border-top-color: rgb(var(--color-neutral-700));
}

.members-preview-card__checklist-title {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}

.dark .members-preview-card__checklist-title {
  color: rgb(var(--color-neutral-200));
}

.members-preview-card__checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.members-preview-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.35;
}

.dark .members-preview-card__checklist li {
  color: rgb(var(--color-neutral-200));
}

.members-preview-card__check {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fbbf24;
  box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2);
}

.members-preview-card__check::after {
  content: '';
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(180 83 9 / 0.15);
}

.members-preview-card__checklist li.is-done .members-preview-card__check {
  /* Pale green (سبز کمرنگ) — softer than green-500 */
  background: #86efac;
  box-shadow: inset 0 0 0 1px rgb(134 239 172 / 0.35);
}

.members-preview-card__checklist li.is-done .members-preview-card__check::after {
  width: 0.28rem;
  height: 0.48rem;
  margin-top: -0.1rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  transform: rotate(45deg);
}

.members-preview-card__actions {
  display: grid;
  gap: 0.875rem;
  margin-top: 1.15rem;
}

.members-preview-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.65rem;
  border: 1px solid #d5dde8;
  background: #fff;
  color: #1e293b;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.members-preview-card__action:hover {
  background: #f8fafc;
  border-color: #c5d0e0;
}

.dark .members-preview-card__action {
  background: transparent;
  border-color: rgb(var(--color-neutral-600));
  color: rgb(var(--color-neutral-100));
}

.dark .members-preview-card__action:hover {
  background: rgba(148, 163, 184, 0.08);
}

.members-preview-card__action-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: inherit;
}

.members-preview-card__security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0 0;
  /* Match card bottom padding (1.25rem) so the block sits centered in the footer band */
  padding: 1.25rem 0 0;
  border-top: 1px solid #e8ecf1;
  background: #fff;
}

.dark .members-preview-card__security {
  border-top-color: rgb(var(--color-neutral-700));
  background: transparent;
}

.members-preview-card__lock-wrap {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  color: #3b82f6;
  background: #fff;
}

.dark .members-preview-card__lock-wrap {
  border-color: rgb(var(--color-neutral-600));
  background: transparent;
  color: #60a5fa;
}

.members-preview-card__lock {
  width: 1.95rem;
  height: 2.95rem;
}

.members-preview-card__security-copy {
  min-width: 0;
}

.members-preview-card__security-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.dark .members-preview-card__security-title {
  color: rgb(var(--color-neutral-100));
}

.members-preview-card__security-note {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  color: #64748b;
}

.dark .members-preview-card__security-note {
  color: rgb(var(--color-neutral-400));
}

/* --------------------------------------------------------------------------
   Floating labels (text / email / number / date / textarea / select)
   Resting: label looks like placeholder inside the control.
   Focused or filled: label floats on the top border. Real <label for> kept.
   -------------------------------------------------------------------------- */

.members-form {
  --members-float-label-bg: #ffffff;
  --members-float-label-muted: rgba(var(--color-neutral-500), 0.9);
  --members-float-label-active: rgb(var(--color-neutral-900));
}

.dark .members-form {
  --members-float-label-bg: rgb(var(--color-neutral-800));
  --members-float-label-muted: rgba(var(--color-neutral-300), 0.75);
  --members-float-label-active: rgb(var(--color-neutral-100));
}

.members-form .members-float-field {
  /* room for the floated chip on the top ring */
  padding-top: 0.55rem;
}

.members-form .members-float-field > div:first-child {
  position: relative;
}

.members-form .members-float-field .members-float-label {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.875rem;
  inset-inline-end: auto;
  top: 50%;
  max-width: calc(100% - 2.75rem);
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  transform: translateY(-50%);
  border-radius: 0.15rem;
  background: transparent;
  color: var(--members-float-label-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    top 0.15s ease,
    transform 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease,
    padding 0.15s ease,
    max-width 0.15s ease;
}

@media (min-width: 640px) {
  .members-form .members-float-field .members-float-label {
    inset-inline-start: 0.75rem;
    font-size: 0.875rem;
  }
}

/* Email / prepended icon fields */
.members-form .members-float-field--with-leading-icon .members-float-label {
  inset-inline-start: 2.6rem;
}

@media (min-width: 640px) {
  .members-form .members-float-field--with-leading-icon .members-float-label {
    inset-inline-start: 2.75rem;
  }
}

/* Textarea: resting label at top-left inside the box */
.members-form .members-float-field--textarea .members-float-label {
  top: 1.15rem;
  transform: none;
}

/* Select: leave room for chevron / clear */
.members-form .members-float-field--select .members-float-label {
  max-width: calc(100% - 3.25rem);
}

/* Empty selects: hide Concord's built-in placeholder so it does not stack
   under/over the floating label. */
.members-form .members-float-field--select:not(.is-floated) .cs__placeholder,
.members-form
  .members-float-field--select:not(.is-floated)
  [class*='placeholder'] {
  opacity: 0 !important;
  color: transparent !important;
}

.members-form .members-float-field.is-floated .members-float-label,
.members-form .members-float-field:focus-within .members-float-label {
  top: 0;
  inset-inline-start: 0.65rem;
  max-width: calc(100% - 1.25rem);
  padding: 0 0.3rem;
  transform: translateY(-50%);
  background-color: var(--members-float-label-bg);
  color: var(--members-float-label-active);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
}

.members-form
  .members-float-field--with-leading-icon.is-floated
  .members-float-label,
.members-form
  .members-float-field--with-leading-icon:focus-within
  .members-float-label {
  inset-inline-start: 0.65rem;
}

/* Social link inputs: static label above, icon + placeholder inside field */
.members-form .members-social-link-field .members-social-link-input {
  background-color: rgb(var(--color-neutral-100));
}

.dark .members-form .members-social-link-field .members-social-link-input {
  background-color: rgb(var(--color-neutral-800));
}

.members-form .members-social-link-field .members-social-link-input::placeholder {
  color: rgba(var(--color-neutral-500), 0.9);
}

.dark
  .members-form
  .members-social-link-field
  .members-social-link-input::placeholder {
  color: rgba(var(--color-neutral-400), 0.85);
}

/* Keep required asterisk visible and colored */
.members-form .members-float-field .members-float-label .text-danger-600 {
  color: rgb(var(--color-danger-600));
}

/* Slightly taller controls so resting label + value don't collide */
.members-form .members-float-field input:not(.cs__search),
.members-form .members-float-field textarea,
.members-form .members-float-field [role='button'].relative.w-full {
  min-height: 2.75rem;
}

/*
 * Multi-select chips sit top-heavy once min-height is raised above default
 * padding. Make the control a flex box so selected badges / search stay
 * vertically centered (light + dark share the same layout).
 */
.members-form .members-float-field--select [role='button'].relative.w-full {
  display: flex;
  align-items: center;
}

.members-form
  .members-float-field--select
  [role='button'].relative.w-full
  > .flex {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  align-items: center;
}

/* Selected-option chips row (ICustomSelect multi) */
.members-form
  .members-float-field--select
  [role='combobox']
  > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
}

/* Neutralize badge negative margin that pulls chips off-center */
.members-form
  .members-float-field--select
  [role='combobox']
  > div
  > * {
  margin-block: 0;
  align-self: center;
}

.members-form .members-float-field--textarea textarea {
  min-height: 5rem;
  padding-top: 0.85rem;
}

/*
 * Work as checkboxes: clear checkbox↔label pairing, wider gap between options.
 * (Core uses space-x-2 between every child — checkbox, label, next checkbox.)
 */
.members-form .mb-3:has(input[type='checkbox']) > div > div.flex {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem !important;
  column-gap: 1.75rem !important;
  row-gap: 0.75rem !important;
}

.members-form .mb-3:has(input[type='checkbox']) [data-slot='field'] {
  display: inline-grid !important;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.45rem;
  margin: 0;
  flex: 0 0 auto;
}

.members-form .mb-3:has(input[type='checkbox']) [data-slot='label'] {
  white-space: nowrap;
  margin: 0 !important;
}

/* Work as: keep option row visible under the section heading (label hidden). */
.members-form .mb-3:has(input[name='member_categories']) {
  display: block;
  width: 100%;
  min-height: 2.25rem;
}

.members-form .members-work-as-options,
.members-form .mb-3:has(input[name='member_categories']) > div > .members-work-as-options,
.members-form .mb-3:has(input[name='member_categories']) > div > div.flex {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 1.75rem;
  gap: 0.75rem 1.5rem !important;
}

.members-form .members-work-as-options > [data-slot='field'],
.members-form .mb-3:has(input[name='member_categories']) [data-slot='field'] {
  display: inline-grid !important;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.45rem;
  margin: 0;
  flex: 0 0 auto;
}

.dark .members-form .members-work-as-options [data-slot='label'],
.dark .members-form .mb-3:has(input[name='member_categories']) [data-slot='label'] {
  color: rgb(244 244 245);
}

.dark .members-form .members-work-as-options [data-slot='control'],
.dark .members-form .mb-3:has(input[name='member_categories']) [data-slot='control'] {
  border-color: rgb(163 163 163 / 0.95);
  background-color: rgb(39 39 42);
}

/*
 * Yes/No radio questions: label + radios on ONE line (Figma).
 * Label on the left, options to the right. Does not affect floating labels
 * (radios are skipped by useMembersFloatingLabels).
 * Excludes stacked labeled radios (Representation Type / Profile Visibility)
 * and gender/work-as cards — those keep label above options.
 */
.members-form
  .mb-3:has(input[type='radio']):not(.members-labeled-radio):not(
    .members-gender-field
  ):not(.members-work-as):not(:has(.members-labeled-radio)):not(
    :has(.members-gender-field)
  ):not(:has(.members-work-as))
  > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
}

.members-form
  .mb-3:has(input[type='radio']):not(.members-labeled-radio):not(
    .members-gender-field
  ):not(.members-work-as):not(:has(.members-labeled-radio)):not(
    :has(.members-gender-field)
  ):not(:has(.members-work-as))
  > div:first-child
  > p,
.members-form
  .mb-3:has(input[type='radio']):not(.members-labeled-radio):not(
    .members-gender-field
  ):not(.members-work-as):not(:has(.members-labeled-radio)):not(
    :has(.members-gender-field)
  ):not(:has(.members-work-as))
  > div:first-child
  > label,
.members-form
  .mb-3:has(input[type='radio']):not(.members-labeled-radio):not(
    .members-gender-field
  ):not(.members-work-as):not(:has(.members-labeled-radio)):not(
    :has(.members-gender-field)
  ):not(:has(.members-work-as))
  > div:first-child
  > [data-slot='label'] {
  margin-bottom: 0 !important;
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
}

.members-form
  .mb-3:has(input[type='radio']):not(.members-labeled-radio):not(
    .members-gender-field
  ):not(.members-work-as):not(:has(.members-labeled-radio)):not(
    :has(.members-gender-field)
  ):not(:has(.members-work-as))
  > div:first-child
  > div {
  flex: 0 0 auto;
}

/* ==========================================================================
   Labeled radios (Role & Market): bold label + (i) above, options below.
   Representation Type / Profile Visibility — not Yes/No inline layout.
   ========================================================================== */
.members-labeled-radio {
  width: 100%;
}

.members-labeled-radio__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.members-labeled-radio__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  color: rgb(var(--color-neutral-900));
}

.dark .members-labeled-radio__option {
  color: rgb(var(--color-neutral-100));
}

.members-labeled-radio__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/*
 * Custom radio face. Must beat @tailwindcss/forms:
 *   [type=radio] { color:#2563eb; … }
 *   [type=radio]:checked { background-color:currentColor; SVG center }
 *   [type=radio]:focus { blue ring via box-shadow }
 *   [type=radio]:checked:focus { background-color:currentColor } (0,3,0)
 * Without :checked:focus/:hover overrides, focus paints a periwinkle disc
 * + thick blue ring and wipes the inset center dot.
 */
.members-labeled-radio__input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 9999px;
  border: 1.5px solid rgb(var(--color-neutral-300));
  background-color: #ffffff;
  background-image: none;
  color: transparent;
  accent-color: transparent;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: transparent;
  --tw-ring-color: transparent;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  box-shadow: none;
}

.members-labeled-radio__input:hover {
  border-color: rgb(var(--color-neutral-400));
  background-color: #ffffff;
  background-image: none;
}

/*
 * Selected: purple outer ring, white face, medium purple center dot.
 * Use radial-gradient (not inset fill) so focus never paints a solid disc.
 */
.members-labeled-radio__input:checked,
.members-labeled-radio__input:checked:hover,
.members-labeled-radio__input:checked:focus,
.members-labeled-radio__input:checked:focus-visible {
  border-color: rgb(var(--color-primary-500));
  background-color: #ffffff;
  background-image: radial-gradient(
    circle at center,
    rgb(var(--color-primary-500)) 0,
    rgb(var(--color-primary-500)) 0.22rem,
    #ffffff 0.24rem
  );
  color: transparent;
  accent-color: transparent;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  box-shadow: none;
}

.members-labeled-radio__input:focus,
.members-labeled-radio__input:focus-visible {
  outline: none;
  background-image: none;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: transparent;
  --tw-ring-color: transparent;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

/* Unchecked focus: subtle outline only (no forms blue ring / fill) */
.members-labeled-radio__input:focus-visible {
  /* vars are "r, g, b" — use rgba(), not rgb(... / a) */
  outline: 2px solid rgba(var(--color-primary-500), 0.45);
  outline-offset: 2px;
  box-shadow: none;
}

/* Checked + keyboard focus: keep white face + center dot; outline outside */
.members-labeled-radio__input:checked:focus-visible {
  outline: 2px solid rgba(var(--color-primary-500), 0.45);
  outline-offset: 2px;
  box-shadow: none;
  background-image: radial-gradient(
    circle at center,
    rgb(var(--color-primary-500)) 0,
    rgb(var(--color-primary-500)) 0.22rem,
    #ffffff 0.24rem
  );
}

.members-labeled-radio__input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dark .members-labeled-radio__input {
  border-color: rgb(163 163 163 / 0.95);
  background-color: rgb(39 39 42);
}

.dark .members-labeled-radio__input:hover {
  border-color: rgb(212 212 216);
  background-color: rgb(39 39 42);
}

.dark .members-labeled-radio__input:checked,
.dark .members-labeled-radio__input:checked:hover,
.dark .members-labeled-radio__input:checked:focus,
.dark .members-labeled-radio__input:checked:focus-visible {
  border-color: rgb(var(--color-primary-500));
  background-color: rgb(var(--color-neutral-900));
  background-image: radial-gradient(
    circle at center,
    rgb(var(--color-primary-500)) 0,
    rgb(var(--color-primary-500)) 0.22rem,
    rgb(var(--color-neutral-900)) 0.24rem
  );
  color: transparent;
  box-shadow: none;
}

.members-labeled-radio__text {
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Don't apply Yes/No inline-radio layout to labeled radios */
.members-form .mb-3.members-labeled-radio,
.members-form .members-labeled-radio.mb-3 {
  display: block;
}

/*
 * Dark theme: unselected radio/checkbox borders must remain visible.
 * Core defaults use very low-opacity borders that disappear on navy UIs.
 * Skip custom Members radios (labeled / gender) — they own their own faces.
 */
.dark .members-form input[type='radio']:not(.members-labeled-radio__input):not(
    .members-gender-card__input
  ),
.dark .members-form input[type='checkbox']:not(.members-consent__input) {
  border-color: rgb(163 163 163 / 0.95);
  background-color: rgb(39 39 42);
}

.dark
  .members-form
  input[type='radio']:not(.members-labeled-radio__input):not(
    .members-gender-card__input
  ):hover,
.dark .members-form input[type='checkbox']:not(.members-consent__input):hover {
  border-color: rgb(212 212 216);
}

.dark
  .members-form
  input[type='radio']:not(.members-labeled-radio__input):not(
    .members-gender-card__input
  ):checked,
.dark
  .members-form
  input[type='checkbox']:not(.members-consent__input):checked {
  border-color: rgb(var(--color-primary-500));
  background-color: rgb(var(--color-primary-500));
}

/*
 * Birth section (Figma): Birthdate + Country full width; State half.
 * State must remain visible (not gated by yes/no dependsOn logic).
 */
.members-form [data-attribute='heading_birth'],
.members-form .mb-1.mt-3:has(+ * [name='birthday']),
.members-birth-block {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Color selects (Figma Face): solid circular swatch + label
   (Uses color_hex — not Concord IBadge / swatch_color tint chips.)
   ========================================================================== */
.members-color-swatch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
}

.members-color-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Stronger edge for pale fills (White, Fair, Blonde, Light) */
.members-color-swatch--light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Birth section (Figma): Birthdate + Country full width; State half.
   ========================================================================== */
.members-form .grid.grid-cols-12 > [class*='col-span']:has([name='state_of_birth']) {
  min-width: 0;
}

.members-form [name='state_of_birth'] {
  width: 100%;
}

/* ==========================================================================
   Gender cards: compact horizontal chips (icon | label | radio).
   Shared --members-gender-control-height keeps Pronouns select aligned.
   ========================================================================== */
.members-gender-field {
  --members-gender-control-height: 2.75rem; /* 44px — matches Pronouns select */
  width: 100%;
  height: 100%;
}

.members-gender-field__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .members-gender-field__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.members-gender-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  height: var(--members-gender-control-height);
  min-height: var(--members-gender-control-height);
  padding: 0 0.7rem 0 0.75rem;
  cursor: pointer;
  user-select: none;
  border-radius: 0.6875rem; /* 11px */
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: rgb(var(--color-neutral-900));
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.dark .members-gender-card {
  border-color: rgb(var(--color-neutral-600));
  background: rgb(var(--color-neutral-900) / 0.35);
  color: rgb(var(--color-neutral-100));
}

.members-gender-card__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.members-gender-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #9ca3af;
}

.members-gender-card__svg {
  width: 1.2rem;
  height: 1.2rem;
}

.members-gender-card__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
}

.members-gender-card__radio {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  border-radius: 9999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #d1d5db;
}

.dark .members-gender-card__radio {
  background: rgb(var(--color-neutral-900));
  box-shadow: inset 0 0 0 1.5px rgb(var(--color-neutral-500));
}

.members-gender-card:hover:not(.is-selected):not(.is-disabled) {
  border-color: #4f46e5;
}

.members-gender-card:focus-within:not(.is-selected) {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgb(79 70 229 / 0.2);
}

.members-gender-card.is-selected {
  border-color: #4f46e5;
  background: #fff;
  box-shadow: none;
}

.dark .members-gender-card.is-selected {
  border-color: #818cf8;
  background: rgb(var(--color-neutral-900) / 0.35);
}

.members-gender-card.is-selected .members-gender-card__radio {
  /* Purple fill with small white center */
  background: #fff;
  box-shadow: inset 0 0 0 5px #4f46e5;
}

.dark .members-gender-card.is-selected .members-gender-card__radio {
  background: #fff;
  box-shadow: inset 0 0 0 5px #818cf8;
}

.members-gender-card.is-selected .members-gender-card__icon {
  color: #4f46e5;
}

.dark .members-gender-card.is-selected .members-gender-card__icon {
  color: #818cf8;
}

.members-gender-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Don't apply Yes/No inline-radio layout to gender cards */
.members-form .mb-3.members-gender-field,
.members-form .members-gender-field.mb-3 {
  display: flex;
  flex-direction: column;
}

/*
 * Gender | Pronouns row: stretch wrappers; Pronouns select = gender card height.
 * Targets data-members-span 8/4 (Identity Gender + Pronouns only).
 */
@media (min-width: 640px) {
  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='8']),
  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='4']) {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='8'])
    > div,
  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='4'])
    > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100%;
  }

  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='8'])
    .members-gender-field,
  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='4'])
    .members-labeled-select {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
  }

  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='4'])
    .members-labeled-select
    .members-type-chips__select[role='button'].relative.w-full {
    box-sizing: border-box;
    height: var(--members-gender-control-height);
    min-height: var(--members-gender-control-height);
  }

  .members-form-section
    .grid.grid-cols-12
    > [class*='col-span']:has([data-members-span='4'])
    .members-labeled-select
    .members-type-chips__select
    > .flex {
    height: 100%;
    align-items: center;
  }
}

/* ==========================================================================
   Work as cards (Role & Market): square icon cards + check badge
   ========================================================================== */

.members-work-as {
  width: 100%;
}

.members-work-as__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
  width: 100%;
}

@media (max-width: 900px) {
  .members-work-as__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .members-work-as__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.members-work-as-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6.75rem;
  aspect-ratio: 1.35 / 1;
  max-height: 7.75rem;
  padding: 1.1rem 0.5rem 0.75rem;
  cursor: pointer;
  user-select: none;
  border-radius: 0.75rem;
  border: 1.5px solid rgb(var(--color-neutral-200));
  background: rgb(var(--color-neutral-0, 255 255 255));
  color: rgb(var(--color-neutral-700));
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.dark .members-work-as-card {
  border-color: rgb(var(--color-neutral-600));
  background: rgb(var(--color-neutral-900) / 0.35);
  color: rgb(var(--color-neutral-200));
}

.members-work-as-card__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.members-work-as-card__check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 9999px;
  background: rgb(var(--color-primary-500));
  color: #fff;
  pointer-events: none;
}

.members-work-as-card__check svg {
  width: 0.7rem;
  height: 0.7rem;
}

.members-work-as-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: rgb(var(--color-neutral-800));
}

.members-work-as-card__svg {
  width: 2.625rem;
  height: 2.625rem;
}

.members-work-as-card__text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: inherit;
  padding: 0 0.15rem;
}

.members-work-as-card:hover:not(.is-selected):not(.is-disabled) {
  border-color: rgb(var(--color-primary-400));
  color: rgb(var(--color-neutral-900));
}

.members-work-as-card:focus-within:not(.is-selected) {
  border-color: rgb(var(--color-primary-500));
  box-shadow: 0 0 0 1px rgb(var(--color-primary-500) / 0.2);
}

.members-work-as-card.is-selected {
  border-color: rgb(var(--color-primary-500));
  background: rgb(var(--color-primary-500) / 0.1);
  color: rgb(var(--color-primary-700));
}

.dark .members-work-as-card.is-selected {
  border-color: rgb(var(--color-primary-400));
  background: rgb(var(--color-primary-500) / 0.18);
  color: rgb(var(--color-primary-200));
}

.members-work-as-card.is-selected .members-work-as-card__check {
  display: inline-flex;
}

.members-work-as-card.is-selected .members-work-as-card__icon {
  color: rgb(var(--color-neutral-800));
}

.dark .members-work-as-card.is-selected .members-work-as-card__icon {
  color: rgb(var(--color-neutral-100));
}

.members-work-as-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Bypass generic checkbox / radio form layout for Work as cards */
.members-form .mb-3.members-work-as,
.members-form .members-work-as.mb-3 {
  display: block;
  width: 100%;
}

.members-form .mb-3:has(.members-work-as) > div > div.flex {
  display: contents !important;
}

/* ==========================================================================
   Type chips / labeled type selects (Model / Talent / Actor / Extra / Other)
   ========================================================================== */

.members-type-chips {
  width: 100%;
}

/*
 * Rounded container (~8px), thin light border.
 * IMPORTANT: do NOT set box-shadow: none — Concord ICustomSelect draws its
 * border via Tailwind ring (box-shadow). Wipe that and the control looks
 * borderless. Prefer a real border so floating-label / ring overrides cannot
 * strip the surface again.
 */
.members-type-chips__select[role='button'].relative.w-full {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgb(var(--color-neutral-300));
  border-radius: 0.5rem;
  background-color: #ffffff;
  /* Keep Concord's ring off so our border is the single visible edge */
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-inset: ;
  box-shadow: none;
}

/* Market meta selects (booker / availability / status / owner): ~4–6px radius */
.members-labeled-select .members-type-chips__select[role='button'].relative.w-full {
  border-radius: 0.375rem;
}

.members-type-chips__select[role='button'].relative.w-full:focus-within,
.members-type-chips__select[role='button'].relative.w-full[aria-expanded='true'] {
  border-color: rgb(var(--color-primary-500, 59 130 246));
}

.dark .members-type-chips__select[role='button'].relative.w-full {
  border-color: rgb(var(--color-neutral-600) / 0.7);
  background-color: rgb(var(--color-neutral-800));
}

.dark .members-type-chips__select[role='button'].relative.w-full:focus-within,
.dark
  .members-type-chips__select[role='button'].relative.w-full[aria-expanded='true'] {
  border-color: rgb(var(--color-primary-400, 96 165 250));
}

.members-type-chips__select > .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.members-type-chips__select [role='combobox'] {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 3.25rem);
}

.members-type-chips__select [role='combobox'] > div {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}

/* Selected chips: light grey/off-white + subtle border + remove x */
.members-type-chips__select [role='combobox'] [data-slot='badge'] {
  margin-block: 0 !important;
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  border-radius: 0.375rem;
  background: rgb(245 246 248);
  color: rgb(var(--color-neutral-800));
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-inset: ;
  border: 1px solid rgb(var(--color-neutral-200));
}

.dark .members-type-chips__select [role='combobox'] [data-slot='badge'] {
  background: rgb(var(--color-neutral-800));
  color: rgb(var(--color-neutral-100));
  border-color: rgb(var(--color-neutral-600));
}

.members-type-chips__select [role='combobox'] [data-slot='badge'] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.1rem;
  color: rgb(var(--color-neutral-400));
}

.members-type-chips__select [role='combobox'] [data-slot='badge'] button:hover {
  color: rgb(var(--color-neutral-600));
  opacity: 1;
}

.members-type-chips__select [role='combobox'] [data-slot='badge'] button svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Keep clear-all + chevron pinned on the right */
.members-type-chips__select > .flex > .grow {
  flex: 1 1 4rem;
  min-width: 2rem;
}

.members-type-chips__select > .flex > .flex.items-center {
  flex: 0 0 auto;
  margin-left: auto;
}

.members-form .mb-3.members-type-chips,
.members-form .members-type-chips.mb-3 {
  display: block;
  width: 100%;
}

/*
 * FormFields keeps displayNone fields in the 12-col grid (inner .hidden only —
 * Concord does not set display:none on the col-span wrapper). Collapse those
 * cells so hidden Work-as subtypes do not leave holes above Marketplace.
 *
 * Lone visible subtype → width:full via applyMemberDependentFields.
 * Marketplace is marked data-members-row="market" and always starts a new
 * 2-col row (paired with Representation Type), never beside a type select.
 */
.members-form .grid.grid-cols-12 > div:has(> .hidden) {
  display: none !important;
}

/* Market/meta band: Marketplace | Representation — always below type selects */
@media (min-width: 640px) {
  .members-form .grid.grid-cols-12 > div:has([data-members-row='market']),
  .members-form .grid.grid-cols-12 > div:has([name='marketplace']),
  .members-form .grid.grid-cols-12 > div:has([id$='-marketplace']),
  .members-form .grid.grid-cols-12 > div:has([for$='-marketplace']) {
    grid-column: 1 / span 6;
  }
}

/* Never apply floating-label select quirks to type-chip controls */
.members-form .members-type-chips .members-float-label,
.members-form .mb-3:has(.members-type-chips) .members-float-label {
  display: none !important;
}

.members-form .mb-3:has(.members-type-chips) > div > div.flex {
  display: contents !important;
}

/* Placeholder text when empty */
.members-type-chips__select .cs__search::placeholder {
  color: rgb(var(--color-neutral-400));
  opacity: 1;
}

/* Single downward chevron (mock) — size to match Concord select icons */
.members-type-chips__select .toggle-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(var(--color-neutral-400));
}

/*
 * Single-select labeled fields: show the chosen value as plain text (not a
 * chip badge). Multi type-chips keep badge styling above.
 */
.members-labeled-select .members-type-chips__select [role='combobox'] [data-slot='badge'] {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgb(var(--color-neutral-900));
  font-size: 0.925rem;
  font-weight: 500;
  box-shadow: none !important;
}

/* Clear lives on the trailing control (x + chevron), not on the value chip */
.members-labeled-select
  .members-type-chips__select
  [role='combobox']
  [data-slot='badge']
  button {
  display: none !important;
}

.dark
  .members-labeled-select
  .members-type-chips__select
  [role='combobox']
  [data-slot='badge'] {
  color: rgb(var(--color-neutral-100));
}

/* Consent checkbox (Role & Market) */
.members-consent {
  width: 100%;
  padding: 0.35rem 0 0.5rem;
}

.members-consent__row {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
}

.members-consent__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.members-consent__box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border-radius: 0.3rem;
  border: 1.5px solid rgb(var(--color-neutral-300));
  background: #fff;
  color: transparent;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.members-consent__box svg {
  width: 0.75rem;
  height: 0.75rem;
}

.members-consent__input:checked + .members-consent__box {
  border-color: rgb(var(--color-primary-500));
  background: rgb(var(--color-primary-500));
  color: #fff;
}

.members-consent__input:focus-visible + .members-consent__box {
  box-shadow: 0 0 0 2px rgb(var(--color-primary-500) / 0.25);
}

.members-consent .members-field__help {
  margin-left: 1.8rem;
}

.members-consent__link {
  margin-left: 0.25rem;
  font-weight: 600;
  color: rgb(var(--color-primary-600));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.members-consent__link:hover {
  color: rgb(var(--color-primary-700));
}

.members-form .mb-3.members-consent,
.members-form .members-consent.mb-3 {
  display: block;
}

/* Consent + Status|Owner grid pairing */
.members-form .grid.grid-cols-12 > div:has([data-members-row='consent']),
.members-form .grid.grid-cols-12 > div:has(.members-consent),
.members-form .grid.grid-cols-12 > div:has([name='consent_personal_data']) {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .members-form .grid.grid-cols-12 > div:has([data-members-row='status-owner']),
  .members-form .grid.grid-cols-12 > div:has([name='status']) {
    grid-column: 1 / span 6;
  }
}

/* ==========================================================================
   Profile header (MembersView)
   ========================================================================== */

.members-profile-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}

.members-profile-header__photo {
  flex: 0 0 7rem;
  width: 7rem;
  height: 10rem;
  max-width: 7rem;
  overflow: hidden;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

.members-profile-header__identity {
  flex: 1 1 14rem;
  min-width: 12rem;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Physical guide / panel (MemberPhysicalPanel)
   ========================================================================== */

/*
 * ICard ships with overflow:hidden (clips to radius). That makes the card the
 * sticky containing block — and since the card itself does not scroll (scroll
 * is on #main), position:sticky on the measurement guide never engages.
 * Keep radius via the card; do not clip descendants that need sticky.
 */
.members-form .members-wizard-card {
  overflow: visible;
}

/* Section cards: transparent shell; each .members-form-section is a white card */
.members-form .members-wizard-card--sections {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.members-edit-step-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Physical step shell ─────────────────────────────────────────────────── */
.members-physical {
  --members-physical-accent: rgb(var(--color-primary-500, 99 102 241));
  --members-physical-accent-soft: rgb(var(--color-primary-500, 99 102 241) / 0.08);
  --members-physical-callout: #3b82f6;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.members-physical__stack {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* Sub-tabs — mock: active = light purple fill + solid purple TOP border */
.members-physical-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.members-physical-subtabs__tab {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem 1.2rem 0.7rem;
  border: 0;
  border-top: 2.5px solid transparent;
  border-radius: 0.15rem 0.15rem 0 0;
  background: transparent;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.members-physical-subtabs__tab:hover {
  color: #374151;
  background: #f9fafb;
}

.members-physical-subtabs__tab.is-active {
  color: rgb(var(--color-primary-600, 79 70 229));
  font-weight: 600;
  background: var(--members-physical-accent-soft);
  border-top-color: var(--members-physical-accent);
}

.members-physical-subtabs__tab.is-active::after {
  display: none;
}

.dark .members-physical-subtabs__tab {
  color: rgb(var(--color-neutral-300));
}

.dark .members-physical-subtabs__tab:hover {
  background: rgb(var(--color-neutral-800));
}

.dark .members-physical-subtabs__tab.is-active {
  color: rgb(var(--color-primary-300));
  background: rgb(var(--color-primary-500) / 0.14);
}

/* Main measurements card: guide | inputs | BMI */
.members-physical-measure-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1.75rem 1.85rem 1.9rem;
  border: 1px solid #e8eaef;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(17 24 39 / 0.04),
    0 8px 24px -18px rgb(17 24 39 / 0.18);
}

.dark .members-physical-measure-card {
  border-color: rgb(var(--color-neutral-700));
  background: rgb(var(--color-neutral-900));
  box-shadow: 0 8px 24px -18px rgb(0 0 0 / 0.55);
}

@media (min-width: 900px) and (max-width: 1179px) {
  .members-physical-measure-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.75rem 2rem;
  }

  .members-physical-measure-card__status {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(10rem, 1fr) auto;
    align-items: start;
    gap: 1rem 1.5rem;
  }

  .members-physical-verify-btn {
    margin-top: 0;
    align-self: end;
    width: auto;
    min-width: 12rem;
  }
}

@media (min-width: 1180px) {
  .members-physical-measure-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr) minmax(10rem, 0.28fr);
    align-items: start;
    gap: 1.85rem 2.25rem;
  }
}

.members-physical-guide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.members-physical-guide-head__title {
  flex: 1 1 auto;
  min-width: max-content;
  margin: 0;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.dark .members-physical-guide-head__title {
  color: rgb(var(--color-neutral-50));
}

.members-physical-unit-toggle {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 0.18rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
  gap: 0.15rem;
}

.dark .members-physical-unit-toggle {
  background: rgb(var(--color-neutral-800));
}

.members-physical-unit-toggle__btn {
  margin: 0;
  padding: 0.42rem 0.75rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.members-physical-unit-toggle__btn.is-active {
  background: var(--members-physical-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(79 70 229 / 0.28);
}

.members-physical-guide-body {
  display: grid;
  /* Figure takes the column; legend stays compact beside it */
  grid-template-columns: minmax(0, 1fr) minmax(6.25rem, 8.5rem);
  gap: 0.65rem 0.55rem;
  align-items: start;
}

.members-physical-guide-body__figure {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.members-physical-measure-card__guide .members-physical-guide-figure {
  max-width: 100%;
  margin-inline: 0;
  /* Tight gutters so callouts stay usable without shrinking the art */
  --guide-label-left: 1.5rem;
  --guide-label-right: 2.1rem;
}

.members-physical-measure-card__guide .members-physical-guide-figure__img {
  max-height: min(48rem, 70vh);
}

.members-physical-guide-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(48rem, 70vh);
  overflow: auto;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #4b5563;
}

.members-physical-guide-legend__item {
  display: flex;
  gap: 0.35rem;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.members-physical-guide-legend__item:hover,
.members-physical-guide-legend__item.is-active {
  background: rgb(59 130 246 / 0.1);
  color: #1d4ed8;
}

.members-physical-guide-legend__n {
  flex: 0 0 auto;
  min-width: 1.15rem;
  font-weight: 700;
  color: var(--members-physical-callout);
}

.members-physical-guide-legend__name {
  min-width: 0;
  white-space: nowrap;
}

/* 2-col numbered inputs — label left (right-aligned) | input */
.members-physical-measure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem 1.35rem;
}

@media (min-width: 560px) {
  .members-physical-measure-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.members-physical-measure-grid__col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.members-physical-measure-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.85rem;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
  padding: 0.2rem 0.2rem;
  border-radius: 0.4rem;
  transition:
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    opacity 0.15s ease;
}

.members-physical-measure-field .members-field__label {
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  font-size: 0.625rem; /* 10px */
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
  color: #374151;
  white-space: nowrap;
}

.members-physical-measure-field .members-field__label > span:last-child {
  text-align: right;
  white-space: nowrap;
}

.members-physical-measure-field__input {
  box-sizing: border-box;
  width: 100%;
  height: 2.15rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.45rem;
  background: #fff;
  color: #111827;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

.members-physical-measure-field__input::-webkit-outer-spin-button,
.members-physical-measure-field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.members-physical-measure-field__input:focus {
  outline: none;
  border-color: rgb(var(--color-primary-400, 129 140 248));
  box-shadow: 0 0 0 3px rgb(var(--color-primary-500, 99 102 241) / 0.15);
}

.dark .members-physical-measure-field__input {
  border-color: rgb(var(--color-neutral-600));
  background: rgb(var(--color-neutral-800));
  color: rgb(var(--color-neutral-50));
}

.members-physical-measure-card__inputs.is-guide-targeting .members-physical-measure-field {
  opacity: 0.4;
}

.members-physical-measure-card__inputs .members-physical-guide-target,
.members-physical-measure-card__inputs.is-guide-targeting .members-physical-guide-target {
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.45);
  background: rgb(59 130 246 / 0.06);
}

/* BMI / status column */
.members-physical-measure-card__status {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
  height: 100%;
}

.members-physical-bmi {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid #eef0f4;
  border-radius: 0.65rem;
  background: #fafafa;
}

.dark .members-physical-bmi {
  border-color: rgb(var(--color-neutral-700));
  background: rgb(var(--color-neutral-800));
}

.members-physical-bmi__badge {
  display: inline-flex;
  margin-bottom: 0.5rem;
  padding: 0.14rem 0.5rem;
  border-radius: 0.3rem;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.members-physical-bmi__label {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
}

.members-physical-bmi__value {
  margin-top: 0.2rem;
  color: #111827;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.dark .members-physical-bmi__value {
  color: rgb(var(--color-neutral-50));
}

.members-physical-bmi__category {
  margin-top: 0.25rem;
  color: rgb(var(--color-primary-600, 79 70 229));
  font-size: 0.875rem;
  font-weight: 650;
}

.members-physical-measured {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #374151;
}

.members-physical-measured__icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: #9ca3af;
}

.members-physical-measured__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.members-physical-measured__date {
  margin-top: 0.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.dark .members-physical-measured__date {
  color: rgb(var(--color-neutral-100));
}

.members-physical-stale {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border: 1px solid #fdba74;
  border-radius: 0.5rem;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
}

.members-physical-stale__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.members-physical-stale__text {
  min-width: 0;
}

.members-physical-verify-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  width: 100%;
  min-height: 3.25rem;
  padding: 1.5rem .5rem;
  border: 1.5px solid var(--members-physical-accent);
  border-radius: 0.5rem;
  background: rgb(235, 235, 255);
  color: rgb(var(--color-primary-600, 79 70 229));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.members-physical-verify-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

.members-physical-verify-btn__line {
  display: block;
  white-space: normal;
}

@media (min-width: 900px) {
  .members-physical-stale,
  .members-physical-stale__text {
    white-space: nowrap;
  }
}

/* Bottom Sizing + Distinctive Features: side-by-side on desktop */
.members-physical-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .members-physical-bottom {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.75rem;
  }
}

.members-physical-bottom__card {
  min-width: 0;
}

/* Sizing: 3 fields per row on desktop (overrides half / col-span-6). */
#members-physical-sizing .grid.grid-cols-12 {
  column-gap: 0.75rem;
}

@media (min-width: 640px) {
  #members-physical-sizing .grid.grid-cols-12 > [class*='col-span'] {
    grid-column: span 4 / span 4;
  }
}

.members-physical .members-form-section__title {
  white-space: nowrap;
}

.members-physical-features__head {
  position: relative;
  margin-bottom: 1.15rem;
  /* Leave room for privacy at the true end edge; keep title group clear of lock */
  padding-inline-end: min(13.5rem, 46%);
  min-height: 1.5rem;
}

.members-physical-features__head .members-form-section__title,
.members-physical-features__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.members-physical-features__title-text {
  min-width: 0;
}

.members-physical-features__optional {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.dark .members-physical-features__optional {
  color: #9ca3af;
}

.members-physical-features__fields {
  min-width: 0;
}

/* Lock + privacy sentence flush to the card header end edge */
.members-physical-privacy {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.35rem;
  box-sizing: border-box;
  width: max-content;
  max-width: min(13rem, 44%);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #5b21b6;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: start;
}

.members-physical-privacy p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.members-physical-privacy__icon {
  flex: 0 0 auto;
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.05rem;
  color: #5b21b6;
}

.dark .members-physical-privacy {
  background: transparent;
  color: rgb(var(--color-primary-200));
}

.dark .members-physical-privacy__icon {
  color: rgb(var(--color-primary-200));
}

.members-form-section {
  /* Shared by Gender cards + Pronouns select in the Identity row */
  --members-gender-control-height: 2.75rem; /* 44px */
  box-sizing: border-box;
  padding: 1.5rem;
  border: 1px solid #eef0f4;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.04);
}

/* Physical step owns its own cards — unwrap the outer section chrome */
.members-form-section--flush {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dark .members-form-section {
  border-color: rgb(var(--color-neutral-700));
  background: rgb(var(--color-neutral-900));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.dark .members-form-section--flush {
  border: none;
  background: transparent;
  box-shadow: none;
}

.members-form-section__title {
  margin: 0 0 1.15rem;
  padding: 0;
  border: none;
  color: #111827;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.dark .members-form-section__title {
  color: rgb(var(--color-neutral-50));
}

/* Identity grid: 3-col / 4-col / gender+pronouns spans via data attrs */
@media (min-width: 640px) {
  .members-form-section .grid.grid-cols-12 > [class*='col-span']:has([data-members-cols='3']) {
    grid-column: span 4 / span 4;
  }

  .members-form-section .grid.grid-cols-12 > [class*='col-span']:has([data-members-cols='4']) {
    grid-column: span 3 / span 3;
  }

  .members-form-section .grid.grid-cols-12 > [class*='col-span']:has([data-members-span='8']) {
    grid-column: span 8 / span 8;
  }

  .members-form-section .grid.grid-cols-12 > [class*='col-span']:has([data-members-span='4']) {
    grid-column: span 4 / span 4;
  }
}

.members-unique-id__row {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
}

.members-unique-id__input {
  flex: 1 1 auto;
  min-width: 0;
}

.members-unique-id__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.members-display-name {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.25rem;
  align-items: end;
}

@media (min-width: 900px) {
  .members-display-name {
    grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 1fr);
  }
}

.members-display-name__main {
  min-width: 0;
}

.members-display-name__input {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
}

.dark .members-display-name__input {
  background: rgb(var(--color-neutral-800)) !important;
  color: rgb(var(--color-neutral-400)) !important;
}

.members-display-name__aside {
  margin: 0;
  padding-bottom: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #6b7280;
}

.dark .members-display-name__aside {
  color: rgb(var(--color-neutral-400));
}

.members-form .members-field .members-field__control,
.members-form .members-labeled-text .members-field__control,
.members-form .members-unique-id .members-field__control {
  border-radius: 0.375rem;
}

/*
 * Two-column layout lives in module CSS (not Tailwind arbitrary classes).
 * Concord's Tailwind build does not scan Members Vue files, so
 * lg:grid-cols-[minmax(...)] never ships — guide became full-width sticky
 * and covered the measurement fields while scrolling.
 */
.members-physical-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .members-physical-layout {
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  }
}

@media (min-width: 1280px) {
  .members-physical-layout {
    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
  }
}

/* Sticky within #main scrollport; parent grid uses items-start so the panel
   stays content-height while the row spans the fields column. */
.members-physical-guide-panel {
  align-self: start;
  min-width: 0;
}

.members-physical-fields {
  min-width: 0;
}

@media (min-width: 1024px) {
  .members-physical-guide-panel {
    position: sticky;
    top: 1rem;
    z-index: 2;
  }
}

.members-physical-guide-panel__card {
  overflow: hidden;
  border: 1px solid rgb(228 228 231 / 0.95);
  border-radius: 1.1rem;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(28 25 23 / 0.04),
    0 10px 28px -14px rgb(28 25 23 / 0.16);
}

.dark .members-physical-guide-panel__card {
  border-color: rgb(63 63 70 / 0.9);
  background: #18181b;
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.55);
}

.members-physical-guide-panel__header {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1.1rem 0.4rem;
}

.members-physical-guide-panel__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(113 113 122);
}

.dark .members-physical-guide-panel__eyebrow {
  color: rgb(161 161 170);
}

.members-physical-guide {
  position: relative;
  padding: 0.1rem 0.55rem 0.2rem;
  user-select: none;
}

.members-physical-guide__frame {
  line-height: 0;
  display: flex;
  justify-content: center;
}

.members-physical-guide-panel__help {
  margin: 0;
  padding: 0.15rem 1.1rem 1rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgb(113 113 122);
}

.dark .members-physical-guide-panel__help {
  color: rgb(161 161 170);
}

/*
 * Anatomy guide — Height gutter left; Shoulder Height right of #10 @ 8px.
 */
.members-physical-guide-figure {
  --guide-label-left: 2.25rem;
  --guide-label-right: 3.25rem;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  overflow: visible;
  border-radius: 0.65rem;
  background: #fff;
  user-select: none;
}

.dark .members-physical-guide-figure {
  background: #fafafa;
}

.members-physical-guide-figure__canvas {
  position: relative;
  margin-inline: var(--guide-label-left) var(--guide-label-right);
  overflow: visible;
  border-radius: 0.5rem;
  line-height: 0;
}

.members-physical-guide-figure__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: min(48rem, 70vh);
  object-fit: contain;
  object-position: center top;
  border-radius: 0.5rem;
  pointer-events: none;
  -webkit-user-drag: none;
}

.members-physical-guide-figure__rails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgb(120 120 128 / 0.95);
  pointer-events: none;
  z-index: 0;
}

.dark .members-physical-guide-figure__rails {
  color: rgb(100 100 110 / 0.95);
}

/* Height gutter label (men + women) — restored men styling */
.members-physical-guide-figure__rail-label {
  position: absolute;
  z-index: 2;
  padding: 0.05rem 0.1rem;
  color: rgb(63 63 70);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: normal;
  pointer-events: none;
  user-select: none;
  text-shadow:
    0 0 3px #fff,
    0 0 6px #fff;
}

.dark .members-physical-guide-figure__rail-label {
  color: rgb(82 82 91);
  text-shadow:
    0 0 3px #fafafa,
    0 0 6px #fafafa;
}

.members-physical-guide-figure__rail-label.is-left {
  left: 0;
  width: var(--guide-label-left);
  transform: translateY(-50%);
  text-align: left;
}

/* Shoulder Height — immediately right of #10 vertical rail (men + women) */
.members-physical-guide-figure__rail-label.is-shoulder {
  right: auto;
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  color: rgb(82 82 91);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  transform: translate(12px, -50%);
}

.members-physical-guide-figure__markers {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.members-physical-guide-figure__marker {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.members-physical-guide-figure__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid #3b82f6;
  border-radius: 9999px;
  background: #3b82f6;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(37 99 235 / 0.3);
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease,
    opacity 0.14s ease;
}

.members-physical-guide-figure__marker:hover .members-physical-guide-figure__ring,
.members-physical-guide-figure__marker:focus-visible .members-physical-guide-figure__ring,
.members-physical-guide-figure__marker.is-active .members-physical-guide-figure__ring {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgb(37 99 235 / 0.4);
}

.members-physical-guide-figure__marker:focus-visible .members-physical-guide-figure__ring {
  outline: 2px solid rgb(59 130 246 / 0.7);
  outline-offset: 2px;
}

/* Highlight the mapped measurement input while hovering/focusing a guide number */
.members-physical-fields.is-guide-targeting .mb-3,
.members-physical-fields.is-guide-targeting .members-float-field {
  opacity: 0.45;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.members-physical-fields .members-physical-guide-target,
.members-physical-fields.is-guide-targeting .members-physical-guide-target {
  opacity: 1 !important;
  position: relative;
  z-index: 1;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-500) / 0.55);
  background: rgb(var(--color-primary-500) / 0.06);
}

.dark .members-physical-fields .members-physical-guide-target,
.dark .members-physical-fields.is-guide-targeting .members-physical-guide-target {
  background: rgb(var(--color-primary-500) / 0.12);
}

/* ==========================================================================
   Tattoos table (Figma Physical → Tattoo)
   ========================================================================== */
.members-tattoos__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: rgb(var(--color-neutral-700));
  background: rgb(var(--color-neutral-100));
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 0.5rem;
  cursor: pointer;
}

.dark .members-tattoos__icon-btn {
  color: rgb(var(--color-neutral-100));
  background: rgb(var(--color-neutral-800));
  border-color: rgb(var(--color-neutral-600));
}

.members-tattoos__icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.members-tattoos__icon-btn--danger {
  color: rgb(var(--color-danger-600));
  background: rgb(var(--color-danger-50, 254 242 242));
  border-color: rgb(var(--color-danger-100, 254 226 226));
}

.dark .members-tattoos__icon-btn--danger {
  color: rgb(var(--color-danger-400));
  background: rgb(var(--color-danger-500) / 0.15);
  border-color: rgb(var(--color-danger-500) / 0.25);
}

.members-tattoos__add {
  background: rgb(var(--color-primary-500) / 0.12) !important;
  color: rgb(var(--color-primary-700)) !important;
  border-color: transparent !important;
}

.dark .members-tattoos__add {
  background: rgb(var(--color-primary-500) / 0.2) !important;
  color: rgb(var(--color-primary-300)) !important;
}

/* ==========================================================================
   Other Languages table (Figma Job → Language(s))
   ========================================================================== */
.members-languages__row {
  border-bottom: 1px solid rgb(var(--color-neutral-200));
}

.dark .members-languages__row {
  border-bottom-color: rgb(var(--color-neutral-700));
}

.members-languages__row--head {
  border-bottom-width: 1px;
}

.members-languages__icon-btn--edit {
  color: rgb(var(--color-primary-600));
}

.dark .members-languages__icon-btn--edit {
  color: rgb(var(--color-primary-400));
}

.members-languages__btn-cancel {
  background: rgb(var(--color-neutral-100)) !important;
  color: rgb(var(--color-neutral-800)) !important;
  border-color: transparent !important;
}

.dark .members-languages__btn-cancel {
  background: rgb(var(--color-neutral-700)) !important;
  color: rgb(var(--color-neutral-100)) !important;
}

/* Figma modal: solid green primary actions (Add & Exit / Add New) */
.members-languages__btn-action {
  background: rgb(var(--color-primary-500)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.members-languages__btn-action:hover:not(:disabled) {
  background: rgb(var(--color-primary-600)) !important;
}

.members-languages__btn-action:disabled {
  opacity: 0.55;
}

.members-languages-modal__fields {
  min-height: 5.5rem;
}

.members-languages-modal__footer {
  padding-top: 0.25rem;
}

/* ==========================================================================
   Skills table (Figma Job → Skill(s))
   ========================================================================== */
.members-skills__table {
  overflow: hidden;
  border: 1px solid rgb(var(--color-info-300, 147 197 253));
  border-radius: 0.5rem;
}

.dark .members-skills__table {
  border-color: rgb(var(--color-info-500, 59 130 246) / 0.45);
}

.members-skills__row {
  border-bottom: 1px dashed rgb(var(--color-info-300, 147 197 253));
}

.dark .members-skills__row {
  border-bottom-color: rgb(var(--color-info-500, 59 130 246) / 0.4);
}

.members-skills__row--head {
  border-bottom-style: dashed;
}

.members-skills__row:last-child {
  border-bottom: 0;
}

.members-skills__icon-btn--edit {
  color: rgb(var(--color-neutral-600));
}

.dark .members-skills__icon-btn--edit {
  color: rgb(var(--color-neutral-300));
}

/*
 * Skills modal multi-select: selected tags were overlapping because
 * ICustomSelect lays chips + search in a single non-wrapping flex row.
 * Target the select class directly (IModal may teleport / not keep modal class).
 */
.members-skills-tags-select[role='button'].relative.w-full {
  display: block;
  height: auto;
  min-height: 2.75rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.members-skills-tags-select > .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.members-skills-tags-select [role='combobox'] {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.members-skills-tags-select [role='combobox'] > div {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
}

.members-skills-tags-select [role='combobox'] [data-slot='badge'] {
  position: relative;
  z-index: 0;
  margin-block: 0 !important;
  max-width: 100%;
}

.members-skills-tags-select > .flex > .grow {
  flex: 1 1 6rem;
  min-width: 5rem;
}

/* ==========================================================================
   Education table (Figma Job → Education)
   ========================================================================== */
.members-educations__table {
  overflow: hidden;
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 0.5rem;
}

.dark .members-educations__table {
  border-color: rgb(var(--color-neutral-700));
}

.members-educations__row {
  border-bottom: 1px solid rgb(var(--color-neutral-200));
}

.dark .members-educations__row {
  border-bottom-color: rgb(var(--color-neutral-700));
}

.members-educations__row--head {
  border-bottom-width: 1px;
}

.members-educations__row:last-child {
  border-bottom: 0;
}

.members-educations__icon-btn--edit {
  color: rgb(var(--color-primary-600));
}

.dark .members-educations__icon-btn--edit {
  color: rgb(var(--color-primary-400));
}

/* ==========================================================================
   Job Experiences table (Figma Job → Job Experiences)
   ========================================================================== */
.members-job-exp__table {
  overflow: hidden;
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 0.5rem;
}

.dark .members-job-exp__table {
  border-color: rgb(var(--color-neutral-700));
}

.members-job-exp__row {
  border-bottom: 1px solid rgb(var(--color-neutral-200));
}

.dark .members-job-exp__row {
  border-bottom-color: rgb(var(--color-neutral-700));
}

.members-job-exp__row--head {
  border-bottom-width: 1px;
}

.members-job-exp__row:last-child {
  border-bottom: 0;
}

.members-job-exp__icon-btn--edit {
  color: rgb(var(--color-neutral-600));
}

.dark .members-job-exp__icon-btn--edit {
  color: rgb(var(--color-neutral-300));
}

/* Job Experiences modal — PDF uploaded file row (Figma Step 24) */
.members-job-exp__uploaded-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.members-job-exp__pdf-icon {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.members-job-exp__pdf-icon span {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  padding: 0 0.2rem;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  background: #e11d48;
  border-radius: 0.15rem;
}

.members-job-exp__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-neutral-700));
  background: rgb(var(--color-neutral-100));
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 0.375rem;
  cursor: pointer;
}

.dark .members-job-exp__edit-btn {
  color: rgb(var(--color-neutral-200));
  background: rgb(var(--color-neutral-800));
  border-color: rgb(var(--color-neutral-700));
}

.members-job-exp__edit-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 8rem;
  margin-top: 0.35rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 0.375rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.dark .members-job-exp__edit-menu {
  background: rgb(var(--color-neutral-900));
  border-color: rgb(var(--color-neutral-700));
}

.members-job-exp__edit-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  color: rgb(var(--color-neutral-700));
  background: transparent;
  border: 0;
  cursor: pointer;
}

.members-job-exp__edit-menu-item:hover:not(:disabled) {
  background: rgb(var(--color-neutral-50));
}

.dark .members-job-exp__edit-menu-item {
  color: rgb(var(--color-neutral-200));
}

.dark .members-job-exp__edit-menu-item:hover:not(:disabled) {
  background: rgb(var(--color-neutral-800));
}

.members-job-exp__edit-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.members-job-exp__edit-menu-item--danger {
  color: rgb(var(--color-danger-600));
}

/* ==========================================================================
   Awards modal (Figma Job → Award → Add New Award)
   ========================================================================== */
.members-awards__btn-cancel {
  background: #fff !important;
  color: rgb(var(--color-neutral-800)) !important;
  border: 1px solid rgb(var(--color-neutral-300)) !important;
}

.dark .members-awards__btn-cancel {
  background: rgb(var(--color-neutral-800)) !important;
  color: rgb(var(--color-neutral-100)) !important;
  border-color: rgb(var(--color-neutral-600)) !important;
}

.members-awards__btn-action {
  background: rgb(var(--color-primary-500)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.members-awards__btn-action:hover:not(:disabled) {
  background: rgb(var(--color-primary-600)) !important;
}

.members-awards__btn-action:disabled {
  opacity: 0.55;
}

.members-awards__dropzone {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  border: 1px dashed rgb(var(--color-neutral-300));
  border-radius: 0.5rem;
  background: rgb(var(--color-neutral-50));
}

.dark .members-awards__dropzone {
  border-color: rgb(var(--color-neutral-600));
  background: rgb(var(--color-neutral-800) / 0.45);
}

.members-awards__dropzone--active {
  border-color: rgb(var(--color-primary-500));
  background: rgb(var(--color-primary-500) / 0.06);
}

.members-awards__dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.members-awards__dropzone-icon {
  color: rgb(var(--color-neutral-400));
}

.members-awards__preview {
  min-height: 8.5rem;
  padding: 0.75rem;
  border: 1px dashed rgb(var(--color-neutral-300));
  border-radius: 0.5rem;
  background: #fff;
}

.dark .members-awards__preview {
  border-color: rgb(var(--color-neutral-600));
  background: rgb(var(--color-neutral-900) / 0.4);
}

.members-awards__preview-empty {
  min-height: 7rem;
}

.members-awards__preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.members-awards__thumb {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
  background: rgb(var(--color-neutral-100));
}

.members-awards__thumb-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: rgb(var(--color-neutral-700));
  background: #fff;
  border: 1px solid rgb(var(--color-neutral-200));
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  cursor: pointer;
}

.members-awards__thumb-edit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 2rem;
  height: 2rem;
  color: rgb(var(--color-neutral-700));
  background: rgb(255 255 255 / 0.92);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  cursor: pointer;
}

.members-awards__thumb-edit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Licences modal (Figma Job → Licence → Add New Licences)
   Reuses .members-awards__dropzone / preview / thumb / button styles.
   ========================================================================== */
.members-licences__tabs {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgb(var(--color-neutral-200));
}

.dark .members-licences__tabs {
  border-bottom-color: rgb(var(--color-neutral-700));
}

.members-licences__tab {
  position: relative;
  padding: 0.5rem 0.125rem 0.625rem;
  margin-bottom: -1px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: rgb(var(--color-neutral-400));
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.members-licences__tab:hover {
  color: rgb(var(--color-neutral-600));
}

.dark .members-licences__tab:hover {
  color: rgb(var(--color-neutral-300));
}

.members-licences__tab--active {
  color: rgb(var(--color-primary-500));
  border-bottom-color: rgb(var(--color-primary-500));
}

.dark .members-licences__tab--active {
  color: rgb(var(--color-primary-400));
  border-bottom-color: rgb(var(--color-primary-400));
}

/* ==========================================================================
   Skills modal (Figma Job → Skill(s) → Add New Skill)
   Reuses .members-awards__dropzone / preview / buttons and .members-licences__tabs.
   ========================================================================== */

/* ==========================================================================
   Media / albums / sheets (MemberMediaPanel, MediaZone, albums, sheets)
   ========================================================================== */

.members-media-zone__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.members-media-zone__dropzone {
  cursor: pointer;
  width: 100%;
  min-height: 8rem;
  align-self: flex-start;
  flex: 0 0 auto;
}

.members-media-zone__previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 6.5rem));
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.members-media-zone__previews li {
  width: 6.5rem;
  max-width: 6.5rem;
}

@media (min-width: 640px) {
  .members-media-zone__body {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .members-media-zone__dropzone {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }

  .members-media-zone__previews {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
}

/* Photo guide modal (MediaPhotoGuideModal + RichPhotoGuide) */
.dialog:has(.members-photo-guide) :is(.relative.w-full.transform, .bg-white.p-6) {
  background-color: #fff !important;
  color: rgb(var(--color-neutral-800));
}

.dark .dialog:has(.members-photo-guide) :is(.relative.w-full.transform, .bg-white.p-6) {
  background-color: #fff !important;
  color: rgb(var(--color-neutral-800));
}

.dark .dialog:has(.members-photo-guide) [class*='IDialogTitle'],
.dark .dialog:has(.members-photo-guide) h2,
.dark .dialog:has(.members-photo-guide) h3 {
  color: rgb(var(--color-neutral-900)) !important;
}

.members-photo-guide {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.members-photo-guide__visual {
  display: flex;
  justify-content: center;
}

.members-photo-guide__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 14rem;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.members-photo-guide__description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgb(var(--color-neutral-500));
}

.members-photo-guide__actions {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.members-photo-guide__ok {
  max-width: 12rem;
}

/* ==========================================================================
   Detail view / tabs / shared (MembersView, stub panel, misc)
   ========================================================================== */

/* Profile completion hover panel (teleported to body) */
.members-completion-fade-enter-active,
.members-completion-fade-leave-active {
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.members-completion-fade-enter-from,
.members-completion-fade-leave-to {
  opacity: 0;
  transform: translateY(0.25rem);
}

.members-completion-meter__panel {
  display: flex;
  flex-direction: column;
  /* max-height set inline from viewport; body scrolls inside */
}

.members-completion-meter__panel > div:last-child {
  min-height: 0;
  flex: 1 1 auto;
}