/*
 * Send Listy Core 0.717 — Group Canonical Axis Root Fix
 * Parent: Core 0.716
 *
 * Scope: Add/Edit List > Group & Assign Tasks only.
 * Presentation only. No group/member data, assignment, save/sync, or global Core CSS changes.
 */

/*
 * Canonical geometry shared with List Optional Fields:
 * outer edge + 14px inset + 24px icon column + 8px gap = one text start.
 */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel {
  --sl-group-edge:14px;
  --sl-group-icon:24px;
  --sl-group-gap:8px;
  --sl-group-text-start:46px;
  --sl-group-double-edge:28px;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #dfe7e2 !important;
  border-radius:10px !important;
  background:#fbfdfc !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* Primary row: icon is exactly on the same x-axis as List Optional Fields. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child {
  display:block !important;
  min-height:64px !important;
  margin:0 !important;
  padding:10px var(--sl-group-edge) !important;
  border:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div {
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-heading {
  display:grid !important;
  grid-template-columns:var(--sl-group-icon) minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:var(--sl-group-gap) !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  color:#24322b !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-align:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-icon {
  display:grid !important;
  place-items:center !important;
  width:var(--sl-group-icon) !important;
  height:var(--sl-group-icon) !important;
  min-width:var(--sl-group-icon) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:7px !important;
  background:#edf8ef !important;
  color:#239944 !important;
  font-size:16px !important;
  line-height:1 !important;
  overflow:hidden !important;
  justify-self:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-label {
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:start !important;
}

/* Subtitle begins exactly where the Group title text begins. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > small {
  display:block !important;
  margin:4px 0 0 calc(var(--sl-group-icon) + var(--sl-group-gap)) !important;
  padding:0 !important;
  color:#728079 !important;
  font-size:11px !important;
  line-height:1.35 !important;
  text-align:start !important;
}

.send-list-app[dir="rtl"] .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > small {
  margin-left:0 !important;
  margin-right:calc(var(--sl-group-icon) + var(--sl-group-gap)) !important;
}

/* Members level: all heading copy starts on the exact same text axis as Group copy. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-title {
  display:block !important;
  margin:0 !important;
  padding:12px var(--sl-group-edge) 0 var(--sl-group-text-start) !important;
  border-top:1px solid #e4eae6 !important;
  box-sizing:border-box !important;
}

.send-list-app[dir="rtl"] .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-title {
  padding-left:var(--sl-group-edge) !important;
  padding-right:var(--sl-group-text-start) !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading {
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading-row {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  padding:0 !important;
  color:#24322b !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-align:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading > small {
  display:block !important;
  margin:5px 0 0 !important;
  padding:0 !important;
  color:#78847e !important;
  font-size:11px !important;
  line-height:1.35 !important;
  text-align:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-count-badge {
  min-width:24px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  line-height:24px !important;
  font-size:12px !important;
  flex:0 0 auto !important;
}

/* Add Member and the members content use one common inner width. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide {
  width:calc(100% - var(--sl-group-double-edge)) !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:12px var(--sl-group-edge) 10px !important;
  padding:0 14px !important;
  border:1px dashed #8cc9a0 !important;
  border-radius:12px !important;
  background:#f7fcf8 !important;
  color:#218f43 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide > span {
  font-size:24px !important;
  line-height:1 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide > strong {
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

/* Member cards/empty state sit on the same left/right rails as Add Member. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-members-scroll-shell {
  width:calc(100% - var(--sl-group-double-edge)) !important;
  max-width:calc(100% - var(--sl-group-double-edge)) !important;
  min-width:0 !important;
  margin:0 var(--sl-group-edge) 14px !important;
  box-sizing:border-box !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-members {
  margin:0 !important;
  gap:10px !important;
  box-sizing:border-box !important;
}

/* Empty members state: exact same width/height/radius as Add Member. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-members-scroll-shell:has(.sl-team-empty) .sl-team-members {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-members-scroll-shell:has(.sl-team-empty) .sl-members-scroll-arrow {
  display:none !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-empty {
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px dashed #c8d2cc !important;
  border-radius:12px !important;
  background:#f8faf9 !important;
  color:#78847e !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  line-height:1.2 !important;
  text-align:center !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-card {
  border-color:#e0e7e3 !important;
  background:#ffffff !important;
  box-shadow:none !important;
}

/* Team Summary uses the same content rails as Add Member/member cards. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary {
  width:calc(100% - var(--sl-group-double-edge)) !important;
  margin:0 var(--sl-group-edge) 14px !important;
  padding:11px !important;
  border:1px solid #e2e9e4 !important;
  border-radius:12px !important;
  background:#f7faf8 !important;
  box-sizing:border-box !important;
}

/*
 * 0.717 root fix — legacy Core CSS still targets `.sl-team-title strong` and adds
 * horizontal padding to every strong inside the Group panel. That rule shifts the
 * icon/title and Members heading while leaving their descriptions on the intended
 * axis. Neutralize that inherited padding at the exact Add/Edit List surface, then
 * reassert the canonical grid. No global CSS is changed.
 */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > strong.sl-group-primary-heading {
  display:grid !important;
  grid-template-columns:var(--sl-group-icon) minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:var(--sl-group-gap) !important;
  width:100% !important;
  min-width:0 !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > strong.sl-group-primary-heading > .sl-group-primary-icon {
  width:var(--sl-group-icon) !important;
  min-width:var(--sl-group-icon) !important;
  height:var(--sl-group-icon) !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:start !important;
  align-self:center !important;
  box-sizing:border-box !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > strong.sl-group-primary-heading > .sl-group-primary-label {
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:start !important;
}

/* The subtitle begins exactly at the title text start: icon slot + canonical gap. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > small {
  margin-block-start:4px !important;
  margin-block-end:0 !important;
  margin-inline-start:calc(var(--sl-group-icon) + var(--sl-group-gap)) !important;
  margin-inline-end:0 !important;
  padding:0 !important;
  text-align:start !important;
}

/* Members heading and description use the same text axis; remove the same legacy
   strong padding from the nested Members heading. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-group-members-title > .sl-group-members-heading > strong.sl-group-members-heading-row {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  text-align:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-group-members-title > .sl-group-members-heading > small {
  margin:5px 0 0 !important;
  padding:0 !important;
  text-align:start !important;
}

/* Dark mode: all visible copy is white; hierarchy comes from opacity, not hue changes. */
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel {
  border-color:#34434d !important;
  background:#1b2834 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-heading,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-label,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > small,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading-row,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading > small,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide > strong,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-empty,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary > strong,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary-grid small,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary-grid b,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-name-input,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-stats {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child > div > small,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-heading > small,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-stats,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary-grid small {
  opacity:.72 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-primary-icon {
  background:#213629 !important;
  color:#79df97 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-group-members-title {
  border-top-color:#34434d !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide {
  border-color:#3f7652 !important;
  background:#20302d !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-add-wide > span {
  color:#79df97 !important;
  -webkit-text-fill-color:#79df97 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-empty {
  border-color:#465863 !important;
  background:#18242f !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-card {
  border-color:#3a4b56 !important;
  background:#202e3a !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-avatar {
  background:#213629 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-stats {
  background:#263642 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-member-card-actions button {
  border-color:#455864 !important;
  background:#263642 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary {
  border-color:#384a55 !important;
  background:#1d2b36 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-group-panel .sl-team-summary-grid > div {
  background:#233440 !important;
  color:#ffffff !important;
}

@media(max-width:767px){
  .send-list-app .sl-modal.is-create-list-modal
  .sl-create-list-settings-host > .sl-group-panel {
    --sl-group-edge:14px;
    --sl-group-icon:24px;
    --sl-group-gap:8px;
    --sl-group-text-start:46px;
    --sl-group-double-edge:28px;
  }

  .send-list-app .sl-modal.is-create-list-modal
  .sl-create-list-settings-host > .sl-group-panel > .sl-team-title:first-child {
    padding:10px var(--sl-group-edge) !important;
  }
}