.candidate-picker {
  position: relative;
  width: 100%;
}

.people-picker {
  margin-bottom: 20px;
}

.candidate-picker [hidden] {
  display: none !important;
}

.candidate-picker .search {
  display: grid;
  gap: 0;
  margin-bottom: 0;
  width: 100%;
}

.candidate-search-heading {
  margin-bottom: 12px;
}

.candidate-search-label {
  color: #edf3ef;
  display: block;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  margin-bottom: 5px;
}

.candidate-search-help {
  color: #adb8b3;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
  max-width: 44rem;
}

.candidate-combobox-shell {
  min-width: 0;
  position: relative;
  width: 100%;
}

.candidate-search-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  position: relative;
  width: 100%;
}

.candidate-search-control input {
  appearance: none;
  background: #202a26;
  border: 1px solid #53635b;
  border-radius: 12px;
  color: #edf3ef;
  font: inherit;
  font-size: 1rem;
  height: 52px;
  min-width: 0;
  padding: 0 46px;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}

.candidate-search-control input::placeholder {
  color: #87938d;
  opacity: 1;
}

.candidate-search-control input:hover {
  background: #25312c;
  border-color: #7a9186;
}

.candidate-search-control input:focus-visible {
  background: #202a26;
  border-color: #9ce2c8;
  box-shadow: 0 0 0 4px rgb(131 200 176 / 20%);
  outline: 3px solid #f2c66d;
  outline-offset: 2px;
}

.candidate-search-control > button {
  min-height: 52px;
  padding-inline: 18px;
}

.candidate-search-icon {
  border: 2px solid #94a49c;
  border-radius: 50%;
  height: 16px;
  left: 18px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-58%);
  width: 16px;
  z-index: 1;
}

.candidate-search-icon::after {
  background: #94a49c;
  border-radius: 2px;
  bottom: -3px;
  content: "";
  height: 2px;
  position: absolute;
  right: -6px;
  transform: rotate(45deg);
  transform-origin: left center;
  width: 8px;
}

.js .candidate-picker [data-candidate-search] button {
  display: none;
}

.candidate-dropdown {
  background: #17211d;
  border: 1px solid #506058;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 30px rgb(0 0 0 / 35%);
  left: 0;
  max-height: min(28rem, 60vh);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 100%;
  z-index: 20;
}

.candidate-option {
  border-bottom: 1px solid #39473f;
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 14px 16px;
}

.candidate-option > * {
  min-width: 0;
}

.candidate-option:last-child {
  border-bottom: 0;
}

.candidate-option[aria-selected="true"],
.candidate-option:hover {
  background: #285646;
  outline: 2px solid #8bd7bc;
  outline-offset: -2px;
}

.candidate-option span,
.candidate-option small {
  color: #b8c2bd;
}

.candidate-option em {
  color: #8bd7bc;
  font-style: normal;
  font-weight: 700;
}

.candidate-loading,
.candidate-status,
.candidate-fragment-message,
.candidate-refine {
  color: #c8d0cc;
  margin: 0;
  padding: 12px 16px;
}

.candidate-status:empty {
  display: none;
}

.candidate-selection {
  align-items: center;
  border: 1px solid #506058;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 16px;
}

.candidate-selection p {
  margin: 0;
}

.candidate-selection .subtle {
  flex-basis: 100%;
}

.js .candidate-fallback {
  display: none;
}

.decision-current {
  font-size: 1rem;
  margin-top: 8px;
}

.decision-choices button[aria-pressed="true"] {
  border: 2px solid #d8fff0;
  box-shadow: 0 0 0 2px #285646;
  font-weight: 800;
}

.decision-choices button:focus-visible,
.candidate-picker button:focus-visible {
  outline: 3px solid #f2c66d;
  outline-offset: 3px;
}

.organization-browser-heading {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 16px;
}

.manage-mappings-link,
.management-close {
  align-items: center;
  border: 1px solid #53635b;
  border-radius: 10px;
  display: inline-flex;
  font-weight: 700;
  gap: 9px;
  min-height: 42px;
  padding: 9px 13px;
}

.manage-mappings-link:hover,
.manage-mappings-link:focus-visible,
.management-close:hover,
.management-close:focus-visible {
  border-color: #9ce2c8;
  outline: 3px solid #f2c66d;
  outline-offset: 2px;
}

.settings-icon {
  border: 2px solid #94a49c;
  border-radius: 4px;
  display: inline-block;
  height: 17px;
  position: relative;
  transform: rotate(45deg);
  width: 17px;
}

.settings-icon::after {
  background: #101714;
  border: 2px solid #94a49c;
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 5px;
}

.management-backdrop {
  background: rgb(0 0 0 / 60%);
  inset: 0;
  position: fixed;
  z-index: 30;
}

.management-drawer {
  background: #18211d;
  border-left: 1px solid #53635b;
  bottom: 0;
  box-shadow: -20px 0 50px rgb(0 0 0 / 55%);
  max-width: 100%;
  outline: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 28px;
  position: fixed;
  right: 0;
  top: 0;
  width: min(760px, 88vw);
  z-index: 31;
}

.management-heading {
  align-items: flex-start;
  background: #18211d;
  border-bottom: 1px solid #394740;
  margin: -28px -28px 0;
  padding: 28px;
  position: sticky;
  top: -28px;
  z-index: 2;
}

.management-heading p:last-child {
  margin-bottom: 0;
}

.management-drawer input,
.management-drawer select {
  background: #26302c;
  border: 1px solid #394740;
  border-radius: 8px;
  color: inherit;
  padding: 9px;
}

.management-filters {
  align-items: stretch;
  background: #1c2521;
  border: 1px solid #46564e;
  border-radius: 14px;
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding: 16px;
}

.management-filters label,
.management-filter-grid > * {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 100%;
  min-width: 0;
}

.management-filters label {
  max-inline-size: 100%;
  min-width: 0;
}

.management-filters select {
  max-inline-size: 100%;
  min-width: 0;
}

.management-search,
.management-search input,
.management-filter-grid,
.management-filter-grid select {
  width: 100%;
}

.management-search input,
.management-filters select {
  max-inline-size: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.management-filter-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.management-filter-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.management-filter-actions a {
  color: #9fdac5;
  padding: 9px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.local-organizations,
.bulk-mapping,
.calling-management-row,
.calling-actions,
.secondary-actions,
.assignment-exceptions,
.assignment-actions,
.rename-organization {
  min-width: 0;
}

.local-organizations,
.bulk-mapping,
.calling-management-row {
  background: #1c2521;
  border: 1px solid #46564e;
  border-radius: 14px;
  margin: 14px 0;
  overflow: hidden;
}

.local-organizations > summary,
.bulk-mapping > summary,
.calling-actions > summary,
.secondary-actions > summary,
.assignment-exceptions > summary,
.assignment-actions > summary,
.rename-organization > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  overflow-wrap: anywhere;
  padding: 11px 14px;
}

.local-organizations > summary,
.bulk-mapping > summary,
.calling-actions > summary {
  font-weight: 750;
}

.local-organizations > summary span,
.bulk-mapping > summary span,
.assignment-summary span,
.management-helper {
  color: #adb8b3;
}

.local-organizations-body,
.bulk-mapping-body,
.calling-actions-body,
.secondary-actions > div,
.assignment-exceptions > div,
.assignment-actions > div {
  border-top: 1px solid #394740;
  padding: 14px;
}

.local-organizations-body section + section {
  border-top: 1px solid #394740;
  margin-top: 18px;
  padding-top: 18px;
}

.management-drawer .inline-create,
.rename-organization form,
.calling-actions form,
.assignment-actions form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.custom-org-editor {
  display: grid;
  gap: 8px;
  overflow: visible;
  padding: 0;
}

.rename-organization {
  background: #202a26;
  border: 1px solid #394740;
  border-radius: 10px;
}

.custom-organization-actions,
.delete-organization > div {
  padding: 0 14px 14px;
}

.delete-organization {
  border-top: 1px solid #394740;
  margin-top: 12px;
}

.delete-organization > summary {
  color: #ffc09b;
  cursor: pointer;
  min-height: 44px;
  padding: 11px 0;
}

.bulk-mapping-body > p {
  color: #adb8b3;
  margin-top: 0;
}

.bulk-preview-form,
.bulk-apply-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.bulk-preview-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.bulk-preview-form label,
.bulk-preview-form input,
.bulk-preview-form select {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.bulk-preview {
  border-top: 1px solid #394740;
  margin-top: 18px;
  padding-top: 16px;
}

.bulk-match-list {
  border: 1px solid #394740;
  border-radius: 10px;
  margin: 12px 0;
  overflow: hidden;
}

.bulk-match {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow-wrap: anywhere;
  padding: 11px 12px;
}

.bulk-match + .bulk-match {
  border-top: 1px solid #394740;
}

.bulk-match div,
.bulk-match span {
  display: grid;
  gap: 3px;
}

.bulk-match span {
  color: #adb8b3;
}

.bulk-apply-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bulk-apply-form .check {
  align-items: start;
  display: flex;
  gap: 9px;
}

.management-drawer .bulk-apply-form input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 0;
  width: auto;
}

.calling-management > .calling-management-row {
  align-items: stretch;
  display: grid;
  gap: 0;
  padding: 0;
}

.calling-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 16px;
}

.calling-summary h3,
.calling-summary p {
  margin: 0;
}

.calling-actions {
  border-top: 1px solid #394740;
}

.calling-actions-body > section,
.assignment-mapping,
.assignment-summary {
  min-width: 0;
}

.calling-actions-body h4 {
  margin: 0 0 8px;
}

.secondary-actions,
.assignment-exceptions,
.assignment-actions {
  background: #202a26;
  border: 1px solid #394740;
  border-radius: 10px;
  margin-top: 12px;
  overflow: hidden;
}

.calling-management .assignment-mapping {
  align-items: stretch;
  border: 0;
  display: grid;
  gap: 8px;
  padding: 12px 0;
}

.calling-management .assignment-mapping + .assignment-mapping {
  border-top: 1px solid #394740;
}

.assignment-summary {
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.management-empty {
  border: 1px dashed #53635b;
  border-radius: 14px;
  margin-top: 16px;
  padding: 24px;
  text-align: center;
}

.management-empty a {
  color: #9fdac5;
  text-decoration: underline;
}

.management-drawer summary:focus-visible,
#management-title:focus-visible {
  outline: 3px solid #f2c66d;
  outline-offset: -3px;
}

.proposal-disclosure {
  background: #202a26;
  border: 1px solid #394740;
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
}

.proposal-disclosure summary {
  cursor: pointer;
  font-weight: 750;
  padding: 11px 13px;
}

.proposal-disclosure summary:focus-visible {
  outline: 3px solid #f2c66d;
  outline-offset: -3px;
}

.proposal-disclosure > div {
  border-top: 1px solid #394740;
  padding: 0 13px;
}

.proposal-row {
  overflow-wrap: anywhere;
  padding: 10px 0;
}

.proposal-row + .proposal-row {
  border-top: 1px solid #394740;
}

@media (max-width: 700px) {
  .candidate-picker {
    max-width: 100%;
  }

  .candidate-search-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .candidate-search-control > button {
    width: 100%;
  }

  .candidate-dropdown {
    max-height: 50vh;
  }

  .candidate-selection,
  .candidate-selection form,
  .candidate-selection button {
    width: 100%;
  }

  .management-drawer {
    border-left: 0;
    padding: 20px 14px;
    width: 100%;
  }

  .management-heading {
    display: flex;
    margin: -20px -14px 0;
    padding: 20px 14px;
    top: -20px;
  }

  .management-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-preview-form,
  .bulk-apply-form,
  .bulk-match {
    grid-template-columns: minmax(0, 1fr);
  }

  .management-filters label {
    flex: 1 1 100%;
  }

  .management-filters label,
  .management-filters select {
    width: 100%;
  }

  .management-filters label,
  .management-filters input,
  .management-filters select,
  .management-filter-actions,
  .management-filter-actions button,
  .management-drawer .inline-create,
  .management-drawer .inline-create label,
  .management-drawer .inline-create input,
  .management-drawer .inline-create button,
  .rename-organization form,
  .rename-organization label,
  .rename-organization input,
  .rename-organization button,
  .bulk-preview-form,
  .bulk-preview-form label,
  .bulk-preview-form input,
  .bulk-preview-form select,
  .bulk-preview-form button,
  .bulk-apply-form,
  .bulk-apply-form button,
  .calling-actions form,
  .calling-actions label,
  .calling-actions select,
  .calling-actions button,
  .assignment-actions form,
  .assignment-actions label,
  .assignment-actions select,
  .assignment-actions button {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

.import-summary {
  margin-top: 18px;
}

.imports-panel {
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}

.import-row,
.import-change,
.attention-item {
  border-top: 1px solid #394740;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 10px 0;
}

.import-change small {
  color: #adb8b3;
  flex-basis: 100%;
}

.import-group {
  margin: 10px 0;
}

.import-group summary {
  cursor: pointer;
  font-weight: 750;
}

.import-apply,
.attention-ack {
  margin: 8px 0 14px;
}

.login-panel {
  margin: 24px auto;
  max-width: 420px;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 6px;
}

.login-form input {
  background: #26302c;
  border: 1px solid #394740;
  border-radius: 8px;
  color: inherit;
  min-height: 44px;
  padding: 9px;
}

.logout {
  margin-top: 18px;
  overflow-wrap: anywhere;
}

.page-subtitle {
  color: #adb8b3;
  margin: 6px 0 0;
}

.header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.header-actions > a,
.overview-close {
  border: 1px solid #53635b;
  border-radius: 11px;
  font-weight: 700;
  min-height: 44px;
  padding: 11px 15px;
}

.header-actions > a:hover,
.header-actions > a:focus-visible,
.overview-close:hover,
.overview-close:focus-visible {
  border-color: #9ce2c8;
  outline: 3px solid #f2c66d;
  outline-offset: 2px;
}

.header-actions > .primary-action {
  background: #83c8b0;
  border-color: #83c8b0;
  color: #10251e;
}

.overview-metrics > a {
  background: #1c2521;
  border: 1px solid #394740;
  border-radius: 18px;
  display: grid;
  gap: 11px;
  min-height: 166px;
  padding: 22px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.overview-metrics > a:hover,
.overview-metrics > a:focus-visible,
.overview-metrics > a.selected {
  background: #23312b;
  border-color: #83c8b0;
  transform: translateY(-2px);
}

.overview-metrics > a:focus-visible {
  outline: 3px solid #f2c66d;
  outline-offset: 3px;
}

.overview-metrics > a > span,
.overview-metrics > a > small {
  color: #adb8b3;
}

.overview-metrics > a > strong {
  color: #edf3ef;
  font-size: 2.35rem;
  line-height: 1;
}

.overview-stat {
  margin: -10px 0 28px;
}

.overview-stat > .section-heading,
.overview-review > .section-heading,
.overview-import > .section-heading {
  padding: 20px 22px;
}

.overview-stat .section-heading h2,
.overview-review .section-heading h2,
.overview-import .section-heading h2,
.overview-stat .section-heading p,
.overview-review .section-heading p,
.overview-import .section-heading p {
  margin-bottom: 0;
}

.overview-stat .section-heading > a,
.overview-review .section-heading > a,
.overview-import .section-heading > a {
  color: #83c8b0;
}

.overview-grid {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr);
}

.overview-row {
  align-items: center;
  border-top: 1px solid #394740;
  display: grid;
  gap: 14px;
  grid-template-columns: 44px minmax(150px, 1fr) minmax(180px, 1.2fr) auto auto;
  min-height: 86px;
  padding: 14px 22px;
}

.overview-row:hover,
.overview-row:focus-visible {
  background: #222d28;
}

.overview-row:focus-visible {
  outline: 3px solid #f2c66d;
  outline-offset: -3px;
}

.overview-row > div:nth-child(2) {
  display: grid;
  gap: 4px;
}

.overview-row > div:nth-child(2) > span,
.overview-row > small {
  color: #adb8b3;
}

.overview-row > b:last-child {
  color: #adb8b3;
  font-size: 1.6rem;
}

.overview-avatar {
  background: #245143;
  border-radius: 50%;
  height: 44px;
  position: relative;
  width: 44px;
}

.overview-avatar::before,
.overview-avatar::after {
  border: 2px solid #83c8b0;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.overview-avatar::before {
  border-radius: 50%;
  height: 9px;
  top: 10px;
  width: 9px;
}

.overview-avatar::after {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  height: 10px;
  top: 25px;
  width: 18px;
}

.overview-review .pill {
  white-space: nowrap;
}

.overview-import .import-fact {
  border-top: 1px solid #394740;
  display: grid;
  gap: 5px;
  padding: 20px 22px;
}

.overview-import .import-fact span {
  color: #adb8b3;
  font-size: 0.86rem;
}

.overview-import .import-fact a {
  color: #83c8b0;
  font-weight: 750;
}

.source-organizations-heading {
  display: grid;
  gap: 8px;
  margin: 22px 8px 8px;
}

.source-organizations-heading h2 {
  margin: 0;
}

.source-organizations-heading .source-visibility-toggle {
  align-items: center;
  color: #b8c5bf;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 7px;
  justify-self: start;
  padding: 3px 0;
}

.source-organizations-heading .source-visibility-toggle:hover {
  color: #83c8b0;
}

.source-toggle-track {
  background: #303c36;
  border: 1px solid #56675f;
  border-radius: 999px;
  display: inline-flex;
  padding: 2px;
  transition: background 120ms ease;
  width: 28px;
}

.source-toggle-track > span {
  background: #aebbb5;
  border-radius: 50%;
  display: block;
  height: 10px;
  transition: transform 120ms ease;
  width: 10px;
}

.source-visibility-toggle[aria-checked="true"] .source-toggle-track {
  background: #245143;
  border-color: #83c8b0;
}

.source-visibility-toggle[aria-checked="true"] .source-toggle-track > span {
  background: #a9ead3;
  transform: translateX(12px);
}

.source-visibility-manager {
  border-bottom: 1px solid #34433c;
  margin: 0 8px 10px;
  padding-bottom: 9px;
}

.source-visibility-manager > summary {
  color: #83c8b0;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 750;
  list-style-position: inside;
  padding: 5px 0;
}

.source-visibility-list {
  background: #17221d;
  border: 1px solid #3a4a42;
  border-radius: 12px;
  display: grid;
  gap: 0;
  margin-top: 7px;
  max-height: 310px;
  overflow: auto;
  padding: 6px 10px;
}

.source-visibility-list > p {
  color: #9faca6;
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 5px 2px 8px;
}

.source-visibility-row {
  align-items: center;
  border-top: 1px solid #303e37;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 2px;
}

.source-visibility-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.source-visibility-row strong {
  font-size: 0.76rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.source-visibility-row small {
  color: #95a39c;
  font-size: 0.68rem;
}

.source-visibility-row form {
  margin: 0;
}

.source-visibility-action {
  background: transparent;
  border: 1px solid #506159;
  border-radius: 8px;
  color: #c7d2cd;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 8px;
}

.source-visibility-action:hover {
  border-color: #83c8b0;
  color: #9be0c7;
}

.org-nav > a {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.org-nav > a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.org-nav > a > b {
  justify-self: end;
  min-width: 1.25em;
  text-align: right;
}

@media (min-width: 1051px) {
  .three-panel {
    align-items: stretch;
    height: calc(100vh - 185px);
    height: calc(100dvh - 185px);
    min-height: 480px;
  }

  .three-panel > .panel {
    min-height: 0;
  }

  .three-panel > .org-nav,
  .three-panel > .roster,
  .three-panel > .impact {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .three-panel > .roster > .section-heading {
    background: #1c2521;
    border-bottom: 1px solid #394740;
    box-shadow: 0 8px 18px #101714cc;
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

@media (max-width: 1050px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .header-actions > a {
    display: none;
  }

  .overview-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 14px;
  }

  .overview-avatar {
    height: 38px;
    width: 38px;
  }

  .overview-avatar::before {
    top: 8px;
  }

  .overview-avatar::after {
    top: 22px;
  }

  .overview-row > small,
  .overview-row > .pill {
    grid-column: 2 / -1;
  }
}

.sync-panel {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
}

.sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sync-sources {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
}

.sync-sources > div {
  background: var(--panel2);
  border-radius: 12px;
  padding: 12px 14px;
}

.sync-sources dt {
  color: var(--muted);
  font-size: .8rem;
}

.sync-sources dd {
  font-weight: 650;
  margin: 4px 0 0;
}

.sync-preview {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.sync-changes,
.sync-warnings {
  margin: 0;
  padding-left: 20px;
}

.sync-warnings li {
  color: var(--amber);
}

.sync-status {
  color: var(--muted);
  margin: 0;
}

[data-sync-root] [hidden] {
  display: none;
}

/* Prose cards. `.panel` has no padding of its own because the workspace
   panels (organization navigation, roster, impact, people list, overview
   cards) pad their own children. Cards whose headings and text sit directly
   inside the panel need the same 20px 22px inset, or their content touches
   (and, with the rounded overflow clip, loses its first letter at) the
   border. */
.imports-panel,
.login-panel {
  padding: 20px 22px;
}

.imports-panel > h2,
.imports-panel h3 {
  margin-bottom: 8px;
}

.imports-panel h3 {
  margin-top: 22px;
}

.imports-panel .section-heading {
  align-items: flex-start;
  flex-wrap: wrap;
}

.imports-panel .section-heading > div {
  flex: 1 1 320px;
  min-width: 0;
}

.imports-panel .empty {
  padding: 10px 0;
}

.imports-panel code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.import-row > span {
  flex: 1 1 280px;
  min-width: 0;
}

/* Change rows read as one line of text: a flex container with
   space-between would split "<strong>value</strong> · label" into items
   pushed to opposite edges. */
.import-change {
  display: block;
}

.import-change small {
  display: block;
  margin-top: 4px;
}

.attention-item {
  align-items: baseline;
  justify-content: flex-start;
}

/* Count statistics: value and label side by side, label wrapping. */
.import-stat {
  align-items: baseline;
  border-top: 1px solid #394740;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: minmax(3.5rem, max-content) minmax(0, 1fr);
  padding: 10px 0;
}

.import-stat .stat-value {
  color: #83c8b0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.import-stat .stat-label {
  color: #edf3ef;
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-stat em {
  color: #adb8b3;
}

/* The sign-in notice (for example "You are signed out.") is centered with
   the sign-in card instead of spanning the full workspace width far from it. */
.login-notice {
  margin-left: auto;
  margin-right: auto;
  max-width: 420px;
}

@media (max-width: 760px) {
  .imports-panel,
  .login-panel,
  .sync-panel {
    padding: 16px;
  }

  .import-stat {
    grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr);
  }
}

/* Replacement-plan entry points (2026-10-19). Start actions and View plan
   links are 44px targets that wrap at narrow widths. */
.plan-entry {
  margin-top: 8px;
}

.plan-entry form {
  margin: 0;
}

.plan-entry button,
.plan-entry-link,
.board-toolbar .primary-action {
  align-items: center;
  display: inline-flex;
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
}

.plan-entry-link {
  border: 1px solid #394740;
  border-radius: 9px;
  padding: 9px 12px;
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.drawer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.plan-search-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.plan-search-form label {
  color: #adb8b3;
  display: grid;
  flex: 1 1 240px;
  gap: 6px;
  min-width: 0;
}

.plan-search-form input {
  background: #26302c;
  border: 1px solid #394740;
  border-radius: 8px;
  color: inherit;
  min-height: 44px;
  min-width: 0;
  padding: 9px;
  width: 100%;
}

.plan-search-form button {
  min-height: 44px;
}

.plan-search-row {
  align-items: center;
  border-top: 1px solid #394740;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 12px 0;
}

.plan-search-text {
  display: grid;
  flex: 1 1 240px;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.plan-search-text span {
  color: #adb8b3;
}

.plan-search-row .plan-entry {
  margin-top: 0;
}