.sp-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
  color: var(--ink, #172235);
}

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

.sp-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px 24px;
  align-items: start;
}

.sp-kicker {
  color: var(--purple, #642b8c);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.sp-page-head h1 {
  margin: 5px 0 4px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.sp-page-head > div:first-child > p {
  max-width: 760px;
  margin: 0;
  color: var(--slate, #717a86);
  font-size: 12px;
  line-height: 1.55;
}

.sp-page-actions,
.sp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.sp-btn,
.sp-text-btn,
.sp-icon-btn,
.sp-modal-close {
  font: inherit;
  cursor: pointer;
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #d5dae1;
  border-radius: 8px;
  background: #fff;
  color: #3e4958;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 34, 53, .04);
}

.sp-btn:hover:not(:disabled) {
  border-color: #bfc6d0;
  background: #f7f8fa;
  color: #222d3c;
}

.sp-btn.primary {
  border-color: var(--purple, #642b8c);
  background: var(--purple, #642b8c);
  color: #fff;
}

.sp-btn.primary:hover:not(:disabled) {
  border-color: #4f1f72;
  background: #4f1f72;
  color: #fff;
}

.sp-btn.green {
  border-color: #a9d7c0;
  background: #e7f6ee;
  color: #16714a;
}

.sp-btn.warning {
  border-color: #ecd39d;
  background: #fff7df;
  color: #8d5c04;
}

.sp-btn.ghost-danger {
  border-color: transparent;
  background: transparent;
  color: #a84449;
  box-shadow: none;
}

.sp-btn.small {
  min-height: 29px;
  padding: 6px 9px;
  font-size: 9px;
}

.sp-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.sp-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.sp-metric {
  position: relative;
  min-width: 0;
  padding: 11px 13px 12px;
  overflow: hidden;
  border: 1px solid var(--border, #d8dce2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 11px rgba(23, 34, 53, .045);
}

.sp-metric::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #aeb6c1;
  content: '';
}

.sp-metric.green::after { background: #24a36a; }
.sp-metric.amber::after { background: #dc9b26; }
.sp-metric.purple::after { background: var(--purple, #642b8c); }

.sp-metric span,
.sp-metric strong,
.sp-metric small {
  display: block;
}

.sp-metric span {
  color: #77818e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sp-metric strong {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.15;
}

.sp-metric small {
  margin-top: 3px;
  overflow: hidden;
  color: #7b8591;
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-boundary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #dac9e6;
  border-radius: 9px;
  background: #f7f1fb;
  color: #61446f;
}

.sp-boundary strong {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e6d5f0;
  color: #5d287f;
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sp-boundary span {
  font-size: 9px;
  line-height: 1.5;
}

.sp-toolbar {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 145px 175px 165px auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border, #d8dce2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(23, 34, 53, .035);
}

.sp-toolbar > label:not(.sp-search) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sp-toolbar > label:not(.sp-search) > span {
  color: #737e8c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .03em;
}

.sp-toolbar select,
.sp-search {
  height: 35px;
  border: 1px solid #d6dbe2;
  border-radius: 7px;
  background: #fbfcfd;
}

.sp-toolbar select {
  width: 100%;
  padding: 0 28px 0 9px;
  color: #344050;
  font-size: 9px;
  font-weight: 650;
}

.sp-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 10px;
}

.sp-search > span:not(.sp-sr-only) {
  color: #7d8793;
  font-size: 17px;
  line-height: 1;
}

.sp-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #273241;
  font-size: 10px;
}

.sp-text-btn {
  min-height: 35px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--purple, #642b8c);
  font-size: 9px;
  font-weight: 800;
}

.sp-directory-layout {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sp-list-panel,
.sp-detail-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border, #d8dce2);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(23, 34, 53, .045);
}

.sp-list-panel {
  position: sticky;
  top: 10px;
}

.sp-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border-bottom: 1px solid #e5e8ec;
  background: #fafbfc;
}

.sp-panel-head h2,
.sp-panel-head p {
  margin: 0;
}

.sp-panel-head h2 { font-size: 12px; }
.sp-panel-head p { margin-top: 2px; color: #7a8490; font-size: 8px; }

.sp-list {
  display: grid;
  max-height: 750px;
  overflow-y: auto;
}

.sp-supplier-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 11px 10px;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sp-supplier-row:last-child { border-bottom: 0; }

.sp-supplier-row:hover { background: #faf8fc; }

.sp-supplier-row.active {
  background: #f5eff9;
  box-shadow: inset 3px 0 var(--purple, #642b8c);
}

.sp-row-avatar,
.sp-detail-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d8c8e4;
  border-radius: 9px;
  background: #efe6f5;
  color: var(--purple, #642b8c);
  font-weight: 850;
  letter-spacing: -.02em;
}

.sp-row-avatar {
  width: 34px;
  height: 34px;
  font-size: 10px;
}

.sp-row-main,
.sp-row-side,
.sp-row-title {
  min-width: 0;
}

.sp-row-main > span,
.sp-row-main > small,
.sp-row-side > span,
.sp-row-side > small {
  display: block;
}

.sp-row-title {
  display: flex !important;
  align-items: center;
  gap: 5px;
}

.sp-row-title strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-title em,
.sp-contact-list em {
  padding: 2px 5px;
  border-radius: 999px;
  background: #f2e7c9;
  color: #866009;
  font-size: 6px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sp-row-main > span:nth-child(2) {
  margin-top: 3px;
  overflow: hidden;
  color: #586474;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-main > small {
  margin-top: 2px;
  overflow: hidden;
  color: #8b939d;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-side {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.sp-row-side small {
  color: #6b7480;
  font-size: 7px;
  font-weight: 750;
}

.sp-badge,
.sp-compliance,
.sp-capacity,
.sp-stage {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.sp-badge {
  padding: 4px 6px;
  border: 1px solid #d8dde3;
  background: #f1f3f5;
  color: #626d7a;
  font-size: 7px;
}

.sp-badge.approved {
  border-color: #b9ddca;
  background: #eaf7f0;
  color: #1a754e;
}

.sp-badge.pending-review {
  border-color: #ead59e;
  background: #fff7dd;
  color: #8b620c;
}

.sp-badge.suspended {
  border-color: #e7b6b8;
  background: #fceced;
  color: #a14449;
}

.sp-badge.archived {
  border-color: #d7dce2;
  background: #eff1f4;
  color: #6f7884;
}

.sp-compliance {
  gap: 4px;
  color: #5f6a76;
  font-size: 7px;
}

.sp-compliance i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8e98a4;
}

.sp-compliance.current { color: #1b7951; }
.sp-compliance.current i { background: #21a16a; }
.sp-compliance.pending { color: #2f6f9e; }
.sp-compliance.pending i { background: #3f91c8; }
.sp-compliance.expiring { color: #9a670a; }
.sp-compliance.expiring i { background: #dfa32f; }
.sp-compliance.expired,
.sp-compliance.incomplete,
.sp-compliance.unverified { color: #a44046; }
.sp-compliance.expired i,
.sp-compliance.incomplete i,
.sp-compliance.unverified i { background: #d45b61; }

.sp-detail-panel {
  display: grid;
  min-height: 560px;
}

.sp-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid #e3e7eb;
}

.sp-detail-identity {
  display: flex;
  min-width: 0;
  gap: 11px;
}

.sp-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 13px;
}

.sp-detail-identity > div {
  min-width: 0;
}

.sp-detail-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.sp-detail-title h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.02em;
}

.sp-preferred {
  padding: 3px 6px;
  border: 1px solid #ead7a0;
  border-radius: 999px;
  background: #fff7df;
  color: #8a610a;
  font-size: 7px;
  font-weight: 850;
}

.sp-detail-identity p {
  margin: 3px 0 0;
  color: #78828f;
  font-size: 8px;
}

.sp-detail-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
}

.sp-detail-badges > span:last-child {
  color: #697482;
  font-size: 7px;
  font-weight: 700;
}

.sp-preference {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 15px;
  border-bottom: 1px solid #e8ebee;
  background: #fbfcfd;
}

.sp-preference p {
  margin: 0;
  color: #818a95;
  font-size: 8px;
}

.sp-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  cursor: pointer;
}

.sp-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sp-switch > span {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #cbd1d8;
  transition: background .15s ease;
}

.sp-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 34, 53, .2);
  content: '';
  transition: transform .15s ease;
}

.sp-switch input:checked + span { background: var(--purple, #642b8c); }
.sp-switch input:checked + span::after { transform: translateX(12px); }
.sp-switch input:disabled + span { opacity: .45; }
.sp-switch b { font-size: 8px; }

.sp-tabs {
  display: flex;
  gap: 3px;
  padding: 6px 9px 0;
  overflow-x: auto;
  border-bottom: 1px solid #e2e6ea;
  background: #f7f8fa;
}

.sp-tabs button {
  flex: 0 0 auto;
  padding: 9px 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6d7783;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.sp-tabs button.active {
  border-bottom-color: var(--purple, #642b8c);
  color: var(--purple, #642b8c);
}

.sp-detail-body {
  min-width: 0;
  padding: 12px;
  background: #f7f8fa;
}

.sp-tab-grid,
.sp-performance-grid,
.sp-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.sp-card,
.sp-rating-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dde1e6;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(23, 34, 53, .025);
}

.sp-card.sp-wide,
.sp-performance-grid .sp-wide,
.sp-people-grid .sp-wide {
  grid-column: 1 / -1;
}

.sp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border-bottom: 1px solid #e8ebee;
}

.sp-card-head h3,
.sp-card-head p {
  margin: 0;
}

.sp-card-head h3 { font-size: 10px; }
.sp-card-head p { margin-top: 2px; color: #87909b; font-size: 7px; }

.sp-card-body { padding: 11px; }

.sp-abn,
.sp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  min-height: 21px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
}

.sp-abn.valid {
  background: #e8f6ef;
  color: #1d7751;
}

.sp-abn.invalid {
  background: #fcecee;
  color: #a34248;
}

.sp-count {
  background: #ece3f2;
  color: var(--purple, #642b8c);
}

.sp-info-list {
  display: grid;
  padding: 0;
}

.sp-info-row {
  display: grid;
  grid-template-columns: minmax(92px, .65fr) minmax(0, 1.35fr);
  gap: 8px;
  align-items: start;
  padding: 8px 11px;
  border-bottom: 1px solid #eef0f2;
}

.sp-info-row:last-child { border-bottom: 0; }

.sp-info-row > span {
  color: #7d8793;
  font-size: 7px;
  font-weight: 750;
}

.sp-info-row > strong {
  min-width: 0;
  color: #364150;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}

.sp-info-row strong small {
  display: block;
  margin-top: 2px;
  color: #8a939d;
  font-size: 7px;
  font-weight: 500;
}

.sp-info-row a,
.sp-business-grid a {
  color: var(--purple, #642b8c);
  text-decoration: none;
}

.sp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sp-capacity {
  padding: 4px 6px;
  background: #eef2f5;
  color: #65707d;
  font-size: 7px;
}

.sp-capacity.available { background: #e8f6ef; color: #19744c; }
.sp-capacity.limited { background: #fff6da; color: #91620a; }
.sp-capacity.at-capacity { background: #fbeaec; color: #a03f46; }

.sp-field-label {
  display: block;
  margin: 0 0 6px;
  color: #808a96;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sp-field-label:not(:first-child) { margin-top: 11px; }

.sp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sp-tags span {
  padding: 4px 6px;
  border: 1px solid #dbc9e7;
  border-radius: 999px;
  background: #f4edf8;
  color: #64317f;
  font-size: 7px;
  font-weight: 750;
}

.sp-tags.subtle span {
  border-color: #dfe3e7;
  background: #f5f6f8;
  color: #697480;
}

.sp-service-grid,
.sp-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.sp-service-grid > div,
.sp-business-grid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e4e7eb;
  border-radius: 7px;
  background: #fafbfc;
}

.sp-service-grid span,
.sp-business-grid span,
.sp-service-grid strong,
.sp-business-grid strong,
.sp-business-grid a {
  display: block;
}

.sp-service-grid span,
.sp-business-grid span {
  color: #818b97;
  font-size: 7px;
  font-weight: 750;
}

.sp-service-grid strong,
.sp-business-grid strong,
.sp-business-grid a {
  margin-top: 3px;
  color: #3e4957;
  font-size: 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sp-emergency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px solid #e1e5e9;
  border-radius: 7px;
  background: #f8f9fa;
  color: #6f7985;
}

.sp-emergency.active {
  border-color: #c8b3d8;
  background: #f4edf8;
  color: #5f2f7a;
}

.sp-emergency b { font-size: 8px; }
.sp-emergency span { font-size: 7px; }

.sp-work-table {
  display: grid;
  min-width: 0;
}

.sp-work-table > div {
  display: grid;
  grid-template-columns: minmax(115px, 1.25fr) 75px minmax(85px, 1fr) 85px;
  gap: 8px;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px solid #eceff2;
  font-size: 8px;
}

.sp-work-table > div:last-child { border-bottom: 0; }

.sp-work-table .sp-work-head {
  padding-top: 1px;
  color: #7f8994;
  font-size: 7px;
  font-weight: 800;
}

.sp-work-table strong,
.sp-work-table small {
  display: block;
}

.sp-work-table small { margin-top: 2px; color: #8c959f; font-size: 7px; }
.sp-work-table > div > span:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

.sp-stage {
  padding: 4px 6px;
  background: #eef1f4;
  color: #65717e;
  font-size: 7px;
}

.sp-stage.control { background: #e8f2fb; color: #2f6591; }
.sp-stage.measure { background: #f0e9f5; color: #64327f; }
.sp-stage.resolve { background: #e7f5ed; color: #28724f; }

.sp-notes {
  margin: 0;
  color: #4c5765;
  font-size: 9px;
  line-height: 1.6;
}

.sp-stack {
  display: grid;
  gap: 10px;
}

.sp-portal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid #d8c8e4;
  border-radius: 10px;
  background: linear-gradient(135deg, #f6f0fa, #fff 68%);
}

.sp-portal-hero span,
.sp-portal-hero h3,
.sp-portal-hero p { display: block; margin: 0; }
.sp-portal-hero span { color: var(--purple, #642b8c); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.sp-portal-hero h3 { margin-top: 3px; font-size: 14px; }
.sp-portal-hero p { max-width: 620px; margin-top: 4px; color: #6f7986; font-size: 8px; line-height: 1.55; }

.sp-portal-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid #ecd09c;
  border-left: 4px solid #dfa32f;
  border-radius: 8px;
  background: #fff9e9;
}

.sp-portal-boundary strong { color: #845a0d; font-size: 8px; }
.sp-portal-boundary span { color: #726650; font-size: 8px; line-height: 1.5; }

.sp-portal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sp-portal-metrics article {
  padding: 10px 11px;
  border: 1px solid #dde1e6;
  border-radius: 8px;
  background: #fff;
}

.sp-portal-metrics span,
.sp-portal-metrics strong { display: block; }
.sp-portal-metrics span { color: #7b8591; font-size: 7px; }
.sp-portal-metrics strong { margin-top: 3px; color: #263343; font-size: 16px; }

.sp-portal-user-list { display: grid; }

.sp-portal-user {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1fr) minmax(150px, 1.15fr) minmax(155px, 1.15fr) auto;
  gap: 9px;
  align-items: center;
  padding: 11px;
  border-bottom: 1px solid #ebedf0;
}

.sp-portal-user:last-child { border-bottom: 0; }
.sp-portal-user.is-revoked { opacity: .72; }
.sp-portal-person,
.sp-portal-role,
.sp-portal-state { min-width: 0; }
.sp-portal-person strong,
.sp-portal-person a,
.sp-portal-person small,
.sp-portal-role strong,
.sp-portal-role small,
.sp-portal-state small,
.sp-portal-state em { display: block; }
.sp-portal-person strong,
.sp-portal-role strong { color: #344151; font-size: 8px; }
.sp-portal-person a { overflow-wrap: anywhere; margin-top: 2px; color: var(--purple, #642b8c); font-size: 8px; }
.sp-portal-person small,
.sp-portal-role small,
.sp-portal-state small,
.sp-portal-state em { margin-top: 3px; color: #87919c; font-size: 7px; font-style: normal; line-height: 1.4; }
.sp-portal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 210px; }

.sp-portal-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px;
  cursor: pointer;
  list-style: none;
}
.sp-portal-history > summary::-webkit-details-marker { display: none; }
.sp-portal-history > summary span,
.sp-portal-history > summary strong,
.sp-portal-history > summary small { display: block; }
.sp-portal-history > summary strong { font-size: 9px; }
.sp-portal-history > summary small { margin-top: 2px; color: #87919c; font-size: 7px; }
.sp-portal-history > summary b { color: var(--purple, #642b8c); font-size: 8px; }
.sp-portal-history[open] > summary { border-bottom: 1px solid #e8ebee; }

.sp-portal-role-guide {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid #e0d7e7;
  border-radius: 8px;
  background: #fbf8fd;
}
.sp-portal-role-guide div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.sp-portal-role-guide strong { color: #573071; font-size: 7px; }
.sp-portal-role-guide span { color: #78828e; font-size: 7px; line-height: 1.4; }

.sp-portal-modal-boundary {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: #fff7df;
  color: #75654a;
  font-size: 8px;
  line-height: 1.5;
}
.sp-portal-modal-boundary strong { color: #845a0d; }

.sp-invite-success,
.sp-invite-person {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #b9ddca;
  border-radius: 9px;
  background: #eef8f3;
}

.sp-invite-success > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: #2e8464;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.sp-invite-success strong,
.sp-invite-success p,
.sp-invite-person strong,
.sp-invite-person small { display: block; margin: 0; }
.sp-invite-success strong,
.sp-invite-person strong { color: #2b3a48; font-size: 11px; }
.sp-invite-success p,
.sp-invite-person small { margin-top: 3px; color: #667482; font-size: 9px; line-height: 1.45; }
.sp-invite-result .sp-field + .sp-field { margin-top: 12px; }
.sp-invite-result .sp-modal-foot > div { flex-wrap: wrap; }

.sp-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #dce1e5;
  border-radius: 9px;
  background: #fff;
}

.sp-alert.current { border-color: #b9ddca; background: #eef8f3; }
.sp-alert.expiring { border-color: #ead59d; background: #fff9e9; }
.sp-alert.expired,
.sp-alert.incomplete { border-color: #e8bfc1; background: #fdf1f2; }

.sp-alert strong,
.sp-alert span { display: block; }
.sp-alert strong { font-size: 9px; }
.sp-alert span { margin-top: 2px; color: #737e8a; font-size: 8px; }

.sp-record-table {
  min-width: 0;
  overflow-x: auto;
}

.sp-record-head,
.sp-record-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.35fr) minmax(130px, 1fr) 90px 85px 27px;
  gap: 9px;
  align-items: center;
  min-width: 610px;
  padding: 9px 11px;
}

.sp-record-head {
  border-bottom: 1px solid #e5e8eb;
  background: #fafbfc;
  color: #7d8793;
  font-size: 7px;
  font-weight: 800;
}

.sp-record-row {
  border-bottom: 1px solid #edf0f2;
  color: #4a5664;
  font-size: 8px;
}

.sp-record-row:last-child { border-bottom: 0; }
.sp-record-row strong,
.sp-record-row small { display: block; }
.sp-record-row strong { font-size: 8px; }
.sp-record-row small { margin-top: 2px; color: #89929c; font-size: 7px; }

.sp-icon-btn {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #dde1e5;
  border-radius: 6px;
  background: #fff;
  color: #687380;
}

.sp-icon-btn.danger:hover {
  border-color: #e2b4b7;
  background: #fbecee;
  color: #a33f45;
}

.sp-rating-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 210px;
  padding: 22px;
  background: linear-gradient(145deg, #5a277e, #7b3aa5);
  color: #fff;
  text-align: center;
}

.sp-rating-card > span {
  color: rgba(255,255,255,.7);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-rating-card > strong {
  margin-top: 5px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.05em;
}

.sp-rating-card > strong small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.sp-stars {
  display: flex;
  gap: 2px;
  margin-top: 9px;
}

.sp-stars i {
  color: rgba(255,255,255,.28);
  font-size: 13px;
  font-style: normal;
}

.sp-stars i.on { color: #ffd875; }

.sp-rating-card p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.7);
  font-size: 7px;
}

.sp-scores {
  display: grid;
  gap: 14px;
}

.sp-score > div:first-child,
.sp-capacity-meter > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.sp-score span,
.sp-capacity-meter span { color: #66717e; font-size: 8px; font-weight: 700; }
.sp-score strong,
.sp-capacity-meter strong { font-size: 8px; }

.sp-score-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ebee;
}

.sp-score-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b3aa5, #9a5bbc);
}

.sp-capacity-meter p {
  margin: 7px 0 0;
  color: #7b8591;
  font-size: 7px;
}

.sp-contact-list,
.sp-document-list {
  display: grid;
  gap: 7px;
}

.sp-contact-list article,
.sp-document-list article {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e3e7ea;
  border-radius: 7px;
  background: #fafbfc;
}

.sp-contact-list article { grid-template-columns: 34px minmax(0, 1fr) auto; }
.sp-document-list article { grid-template-columns: 34px minmax(0, 1fr) auto auto; }

.sp-contact-list article > div,
.sp-document-list article > div { min-width: 0; }

.sp-contact-list strong,
.sp-contact-list span,
.sp-contact-list a,
.sp-contact-list small,
.sp-document-list strong,
.sp-document-list span,
.sp-document-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-contact-list strong,
.sp-document-list strong { font-size: 8px; }
.sp-contact-list strong { display: flex; align-items: center; gap: 5px; }
.sp-contact-list span,
.sp-document-list span { margin-top: 2px; color: #687481; font-size: 7px; }
.sp-contact-list a { margin-top: 3px; color: var(--purple, #642b8c); font-size: 7px; text-decoration: none; }
.sp-contact-list small,
.sp-document-list small { margin-top: 2px; color: #8a939e; font-size: 7px; }

.sp-doc-icon {
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #e9edf1;
  color: #63707e !important;
  font-size: 7px !important;
  font-weight: 850;
}

.sp-business-grid { margin-top: 0; }

.sp-audit-list {
  display: grid;
  padding: 5px 11px 12px;
}

.sp-audit-list article {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #ebedef;
}

.sp-audit-list article:last-child { border-bottom: 0; }

.sp-audit-list article > i {
  width: 8px;
  height: 8px;
  margin-top: 2px;
  border: 2px solid #bc9bd0;
  border-radius: 50%;
  background: #fff;
}

.sp-audit-list strong,
.sp-audit-list p,
.sp-audit-list span { display: block; margin: 0; }
.sp-audit-list strong { font-size: 8px; }
.sp-audit-list p { margin-top: 3px; color: #596573; font-size: 8px; line-height: 1.45; }
.sp-audit-list span { margin-top: 4px; color: #89929d; font-size: 7px; }

.sp-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 20px;
  color: #7c8692;
  text-align: center;
}

.sp-empty.large { min-height: 430px; }
.sp-empty.compact { min-height: 85px; padding: 12px; }
.sp-empty strong { color: #596573; font-size: 10px; }
.sp-empty span { margin-top: 4px; font-size: 8px; line-height: 1.5; }

.sp-modal-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(19, 27, 39, .52);
  backdrop-filter: blur(3px);
}

html.sp-modal-open {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.sp-modal-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.sp-modal {
  width: min(610px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  border: 1px solid #d8dde3;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(12, 19, 29, .3);
  animation: sp-modal-in .16s ease-out;
}

.sp-modal.large { width: min(980px, 100%); }
.sp-modal form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
  min-height: 0;
  overflow: hidden;
}

.sp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border-bottom: 1px solid #e1e5e9;
}

.sp-modal-head span {
  color: var(--purple, #642b8c);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
}

.sp-modal-head h2 {
  margin: 3px 0 0;
  font-size: 15px;
}

.sp-modal-head p {
  margin: 3px 0 0;
  color: #7e8894;
  font-size: 8px;
}

.sp-modal-close {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #dce1e5;
  border-radius: 8px;
  background: #f6f7f9;
  color: #68727e;
  font-size: 18px;
}

.sp-modal-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: #f8f9fa;
}

.sp-modal fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  background: #fff;
}

.sp-modal legend {
  padding: 0 5px;
  color: #3d4856;
  font-size: 9px;
  font-weight: 850;
}

.sp-fieldset-note {
  margin: -2px 0 10px;
  color: #7e8894;
  font-size: 8px;
}

.sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sp-field {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.sp-field.wide { grid-column: 1 / -1; }

.sp-coverage-picker.wide {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dfe3e7;
  border-radius: 8px;
  background: #fafbfc;
}

.sp-coverage-picker > legend {
  color: #65707e;
  font-size: 8px;
  font-weight: 750;
}

.sp-coverage-picker > legend b {
  margin-left: 2px;
  color: #bc474e;
}

.sp-coverage-picker > small {
  color: #89939e;
  font-size: 7px;
  line-height: 1.4;
}

.sp-coverage-group {
  display: grid;
  gap: 5px;
}

.sp-coverage-group > strong {
  color: #465260;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sp-coverage-group .sp-check-grid small {
  color: #8b95a0;
  font-size: inherit;
}

.sp-coverage-state-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}

.sp-coverage-state {
  overflow: hidden;
  border: 1px solid #dfe3e7;
  border-radius: 7px;
  background: #fff;
}

.sp-coverage-state > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  color: #465260;
}

.sp-coverage-state > summary::-webkit-details-marker { display: none; }

.sp-coverage-state > summary::after {
  content: '⌄';
  flex: 0 0 auto;
  color: #7f8a96;
  font-size: 10px;
  transition: transform .16s ease;
}

.sp-coverage-state[open] > summary::after { transform: rotate(180deg); }
.sp-coverage-state > summary > span { min-width: 0; }
.sp-coverage-state > summary strong,
.sp-coverage-state > summary small { display: block; }
.sp-coverage-state > summary strong { font-size: 8px; }
.sp-coverage-state > summary small { margin-top: 2px; color: #89939e; font-size: 7px; }
.sp-coverage-state > summary em { margin-left: auto; color: #6f3e91; font-size: 7px; font-style: normal; white-space: nowrap; }

.sp-coverage-state-body {
  display: grid;
  gap: 7px;
  padding: 0 8px 8px;
  border-top: 1px solid #edf0f2;
}

.sp-coverage-state-body > p {
  margin: 8px 2px 1px;
  color: #89939e;
  font-size: 7px;
}

.sp-statewide-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #d9c9e5;
  border-radius: 6px;
  background: #f8f3fb;
  color: #4f3c5d;
  font-size: 7px;
}

.sp-statewide-choice input { accent-color: var(--purple, #642b8c); }
.sp-statewide-choice strong,
.sp-statewide-choice small { display: block; }
.sp-statewide-choice small { margin-top: 1px; color: #887793; font-size: 7px; }

.sp-coverage-state .sp-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-field > span {
  color: #65707e;
  font-size: 8px;
  font-weight: 750;
}

.sp-field > span > b {
  margin-left: 2px;
  color: #bc474e;
}

.sp-field input:not([type="checkbox"]),
.sp-field select,
.sp-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d4dae0;
  border-radius: 7px;
  background: #fff;
  color: #293544;
  font: inherit;
  font-size: 9px;
  outline: 0;
}

.sp-field input:not([type="checkbox"]),
.sp-field select { height: 35px; padding: 0 9px; }
.sp-field textarea { min-height: 68px; padding: 8px 9px; resize: vertical; line-height: 1.45; }

.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus,
.sp-toolbar select:focus,
.sp-search:focus-within {
  border-color: #9d70b8;
  box-shadow: 0 0 0 3px rgba(100, 43, 140, .1);
}

.sp-field input.is-valid { border-color: #57a87f; background: #f5fbf8; }
.sp-field input.is-invalid { border-color: #ca676d; background: #fff7f7; }

.sp-field > small {
  color: #89939e;
  font-size: 7px;
  line-height: 1.35;
}

.sp-check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid #dfe3e7;
  border-radius: 7px;
  background: #fafbfc;
}

.sp-check-field input { accent-color: var(--purple, #642b8c); }
.sp-check-field b,
.sp-check-field small { display: block; }
.sp-check-field b { color: #465260; font-size: 8px; }
.sp-check-field small { margin-top: 2px; color: #89939e; font-size: 7px; }

.sp-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.sp-check-grid label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  background: #fafbfc;
  color: #5f6a77;
  font-size: 7px;
}

.sp-check-grid input { accent-color: var(--purple, #642b8c); }

.sp-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 17px;
  border-top: 1px solid #e1e5e9;
  background: #fff;
}

.sp-modal-foot > span {
  color: #838d98;
  font-size: 7px;
  line-height: 1.4;
}

.sp-modal-foot > div {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

/* The supplier editor is intentionally a single scroll surface. This avoids
   nested-scroll failures in embedded browsers while keeping actions available. */
.sp-modal.large {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.sp-modal.large > form {
  display: block;
  max-height: none;
  overflow: visible;
}

.sp-modal.large .sp-modal-head {
  position: sticky;
  z-index: 3;
  top: 0;
  background: #fff;
}

.sp-modal.large .sp-modal-body {
  min-height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
  touch-action: auto;
}

.sp-modal.large .sp-modal-foot {
  position: sticky;
  z-index: 3;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -8px 18px rgba(12, 19, 29, .08);
}

.sp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sp-shell button:focus-visible,
.sp-shell input:focus-visible,
.sp-shell select:focus-visible,
.sp-shell textarea:focus-visible,
.sp-shell summary:focus-visible {
  outline: 2px solid #8c58ad;
  outline-offset: 2px;
}

@keyframes sp-modal-in {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .sp-toolbar {
    grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(130px, .55fr));
  }

  .sp-toolbar .sp-text-btn { grid-column: 1 / -1; min-height: 25px; justify-self: end; }

  .sp-directory-layout { grid-template-columns: 1fr; }
  .sp-list-panel { position: static; }
  .sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 340px; }
  .sp-supplier-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

@media (max-width: 820px) {
  .sp-page-head { grid-template-columns: 1fr; }
  .sp-page-actions { justify-content: flex-start; }
  .sp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sp-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-search { grid-column: 1 / -1; }
  .sp-toolbar .sp-text-btn { grid-column: 1 / -1; }

  .sp-detail-head { flex-direction: column; }
  .sp-detail-actions { justify-content: flex-start; }
  .sp-tab-grid,
  .sp-performance-grid,
  .sp-people-grid { grid-template-columns: 1fr; }
  .sp-card.sp-wide,
  .sp-performance-grid .sp-wide,
  .sp-people-grid .sp-wide { grid-column: auto; }

  .sp-portal-user {
    grid-template-columns: 34px minmax(0, 1fr) minmax(150px, .85fr);
    align-items: start;
  }
  .sp-portal-role { grid-column: 2; }
  .sp-portal-state { grid-column: 3; grid-row: 1 / span 2; }
  .sp-portal-actions { grid-column: 2 / -1; justify-content: flex-start; max-width: none; }

  .sp-form-grid { grid-template-columns: 1fr; }
  .sp-field.wide { grid-column: auto; }
  .sp-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-coverage-state-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .sp-shell { gap: 10px; }
  .sp-page-head h1 { font-size: 22px; }
  .sp-metrics { gap: 7px; }
  .sp-metric { padding: 9px 10px; }
  .sp-boundary { display: grid; }

  .sp-toolbar { grid-template-columns: 1fr; }
  .sp-search,
  .sp-toolbar .sp-text-btn { grid-column: auto; }

  .sp-list { grid-template-columns: 1fr; max-height: 390px; }
  .sp-supplier-row { border-bottom: 1px solid #edf0f3 !important; }

  .sp-detail-head { padding: 12px; }
  .sp-detail-identity { width: 100%; }
  .sp-detail-actions { width: 100%; }
  .sp-detail-actions .sp-btn { flex: 1; }
  .sp-preference { align-items: flex-start; flex-direction: column; }
  .sp-detail-body { padding: 8px; }

  .sp-info-row { grid-template-columns: 88px minmax(0, 1fr); }
  .sp-service-grid,
  .sp-business-grid { grid-template-columns: 1fr; }
  .sp-emergency { align-items: flex-start; flex-direction: column; }

  .sp-work-table { overflow-x: auto; }
  .sp-work-table > div { min-width: 500px; }

  .sp-alert { align-items: flex-start; flex-direction: column; }
  .sp-alert .sp-btn { width: 100%; }

  .sp-portal-hero { align-items: stretch; flex-direction: column; }
  .sp-portal-hero .sp-btn { min-height: 44px; width: 100%; }
  .sp-portal-boundary { grid-template-columns: 1fr; }
  .sp-portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-portal-user { grid-template-columns: 34px minmax(0, 1fr); }
  .sp-portal-person { grid-column: 2; }
  .sp-portal-role,
  .sp-portal-state,
  .sp-portal-actions { grid-column: 1 / -1; grid-row: auto; }
  .sp-portal-role,
  .sp-portal-state { padding-left: 43px; }
  .sp-portal-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .sp-portal-actions .sp-btn { min-height: 44px; width: 100%; }
  .sp-portal-role-guide div { grid-template-columns: 1fr; gap: 2px; }

  .sp-contact-list article { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sp-document-list article { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sp-document-list article > .sp-compliance { grid-column: 2; }
  .sp-document-list article > .sp-icon-btn { grid-column: 3; grid-row: 1; }

  .sp-modal-backdrop { align-items: end; padding: 8px; }
  .sp-modal {
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: 13px 13px 4px 4px;
  }
  .sp-modal-head,
  .sp-modal-body,
  .sp-modal-foot { padding-left: 12px; padding-right: 12px; }
  .sp-modal-foot { align-items: stretch; flex-direction: column; }
  .sp-modal-foot > div { width: 100%; }
  .sp-modal-foot .sp-btn { flex: 1; }
  .sp-check-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-modal,
  .sp-switch > span,
  .sp-switch > span::after { animation: none; transition: none; }
}

.sp-import-table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
.sp-import-table th,.sp-import-table td { padding:8px; border-bottom:1px solid #e2e8f0; vertical-align:top; }
.sp-import-table th { position:sticky; top:0; background:#fff; }
.sp-import-table td:first-child { width:50px; }