/* Service Providers index. Layout mirrors the Customers index (same shell,
   same panel-4 slot); the grid and the Usability column are its own. */

.providers-page {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: var(--surface-0);
}

.providers-page .provider-index {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* min-width is the grid's own intrinsic total (name minimum + the fixed
     columns + gaps + padding). Set it lower and the last column is clipped
     instead of the wrapper scrolling; set it higher and the table scrolls when
     it did not need to. */
  --provider-grid-cols: minmax(220px, 1fr) 90px 84px 110px 156px 90px 64px 76px;
  --provider-table-min-width: 1025px;
}
/* Panel 4 takes 380px out of the row, so the name column gives ground first —
   every other column carries a value that cannot be truncated. */
.providers-page:has(.panel4.is-open) .provider-index {
  --provider-grid-cols: minmax(120px, 1fr) 90px 84px 110px 156px 90px 64px 76px;
  --provider-table-min-width: 925px;
}

.providers-page .provider-index__table-wrap {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
}
/* With no rows the table is just its header — stop it absorbing the column's
   free height, which would push the empty state to the bottom of the page. */
.providers-page .provider-index:has(.provider-index__empty:not([hidden])) .provider-index__table-wrap {
  flex: none;
}

/* app.css sets `.btn { display: inline-flex }`, which outranks the UA's
   `[hidden] { display: none }` — so anything hidden inside the page needs an
   explicit rule or it still renders. */
.providers-page .provider-index__empty[hidden] { display: none !important; }
.providers-page .provider-index__empty:not([hidden]) { display: flex; }

/* ------------------------------------------------------------- tabs --- */

.providers-page .provider-index__tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  padding: 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.providers-page .provider-index__tab {
  appearance: none;
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  padding: 13px 4px;
  margin-right: 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: none;
}
.providers-page .provider-index__tab:hover { color: var(--fg-1); }
.providers-page .provider-index__tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.providers-page .provider-index__tab-label {
  flex: none;
  white-space: nowrap;
}
.providers-page .provider-index__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--fg-3);
  box-sizing: border-box;
}
.providers-page .provider-index__tab--active .provider-index__tab-count {
  background: var(--primary-tint);
  color: var(--primary);
}

/* ---------------------------------------------------------- toolbar --- */

.providers-page .provider-index__toolbar {
  --provider-toolbar-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 16px;
}
.providers-page .provider-index__title {
  margin: 0;
  flex: none;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  line-height: 1.2;
}
.providers-page .provider-index__spacer { flex: 1; }

/* The Customers index's collapsed search: a magnifier that reveals the field.
   app.css sets `.btn { display: inline-flex }` and these two carry their own
   display, both of which outrank the UA's `[hidden] { display: none }` — so
   each state needs an explicit rule or the hidden one still renders. */
.providers-page .search-toggle[hidden],
.providers-page .search-box[hidden] { display: none !important; }
.providers-page .search-toggle:not([hidden]) { display: inline-flex; }
.providers-page .search-box:not([hidden]) { display: flex; }

.providers-page .search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--provider-toolbar-height);
  height: var(--provider-toolbar-height);
  flex: none;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--fg-2);
}
.providers-page .search-toggle:hover { background: var(--surface-2); }
.providers-page .search-toggle svg { width: 15px; height: 15px; }

.providers-page .search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  width: 268px;
  height: var(--provider-toolbar-height);
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  padding: 0 9px;
  color: var(--fg-label);
}
.providers-page .search-box__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--fg-1);
}
.providers-page .search-box__input::-webkit-search-cancel-button {
  appearance: none;
}
.providers-page .search-box__input:focus,
.providers-page .search-box__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.providers-page .search-box__input::placeholder { color: var(--fg-label); }
.providers-page .search-box svg { width: 14px; height: 14px; flex: none; }

.providers-page .provider-index__filter {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: var(--provider-toolbar-height);
}

.providers-page .tool-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--fg-label);
  background: var(--surface-0);
  box-sizing: border-box;
  height: var(--provider-toolbar-height);
  min-height: var(--provider-toolbar-height);
  cursor: pointer;
  text-align: center;
}
.providers-page .tool-chip:hover { background: var(--surface-2); }
.providers-page .tool-chip .icon,
.providers-page .tool-chip .icon.icon--sm {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--fg-label);
}
.providers-page .tool-chip__label {
  flex: none;
  line-height: 1;
  white-space: nowrap;
}
.providers-page .tool-chip--filter {
  min-width: 5.5rem;
  width: auto;
}
.providers-page .tool-chip--filter-active,
.providers-page .tool-chip--filter-open {
  border-color: var(--primary);
  color: var(--fg-1);
  background: var(--surface-2);
}
.providers-page .tool-chip--filter-open { box-shadow: var(--shadow-focus); }

.providers-page .billable-filter-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  z-index: 20;
  min-width: 260px;
  padding: var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-panel);
}
.providers-page .billable-filter-popover__title {
  margin: 0 0 8px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.providers-page .billable-filter-popover__title:not(:first-child) { margin-top: 14px; }
.providers-page .billable-filter-popover__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-2xs);
  color: var(--fg-label);
}
.providers-page .billable-filter-popover__input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--fg-1);
  background: var(--surface-0);
}
.providers-page .billable-filter-popover__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.providers-page .billable-filter-popover__clear {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.providers-page .provider-filter-field {
  display: block;
  margin-bottom: 8px;
}
.providers-page .provider-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  color: var(--fg-2);
  cursor: pointer;
}
.providers-page .provider-filter-check input { margin: 0; }

.providers-page .billable-filter-popover[hidden] { display: none !important; }

/* Always present, unlike the old inline clear: on the Customers index this X
   both clears the query and collapses the field back to the magnifier. */
.providers-page .search-box__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}
.providers-page .search-box__close:hover { color: var(--fg-1); }
.providers-page .search-box__close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.providers-page .search-box__close svg { width: 11px; height: 11px; }

.providers-page .provider-index__toolbar .btn {
  height: var(--provider-toolbar-height);
  min-height: var(--provider-toolbar-height);
  box-sizing: border-box;
  padding: 0 14px;
  font-size: var(--text-xs);
}
.providers-page .btn svg { width: 14px; height: 14px; }
.providers-page .btn--primary {
  background: var(--primary);
  color: var(--fg-on-accent);
  border-color: var(--primary);
}
.providers-page .btn--primary:hover { background: var(--primary-hover); }
.providers-page .btn--full { width: 100%; }
.providers-page .btn--icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  color: var(--fg-label);
}
.providers-page .btn--icon svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ table --- */

.providers-page .provider-index__table-head {
  display: grid;
  grid-template-columns: var(--provider-grid-cols);
  align-items: center;
  column-gap: 13px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-1);
  min-width: var(--provider-table-min-width);
}
.providers-page .provider-index__head-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .provider-index__head-label--center { text-align: center; }

.providers-page .provider-index__row {
  display: grid;
  grid-template-columns: var(--provider-grid-cols);
  align-items: center;
  column-gap: 13px;
  width: 100%;
  min-width: var(--provider-table-min-width);
  border-bottom: 1px solid var(--border-faint);
  padding: 9px 22px;
}
.providers-page .provider-index__row:hover { background: var(--surface-2); }
.providers-page .provider-index__row { cursor: pointer; }
.providers-page .provider-index__row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.providers-page .provider-index__cell--name { min-width: 0; overflow: hidden; }
.providers-page .provider-index__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.providers-page .provider-index__sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.providers-page .provider-index__cell--requests,
.providers-page .provider-index__cell--warnings,
.providers-page .provider-index__cell--usability,
.providers-page .provider-index__cell--standing,
.providers-page .provider-index__cell--state,
.providers-page .provider-index__cell--owner,
.providers-page .provider-index__cell--updated {
  text-align: center;
}

.providers-page .provider-index__cell--requests {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

/* Unresolved account warnings read in the danger tone, like the Customers
   index's own Warnings column — the count is a problem, not a statistic. */
.providers-page .provider-index__number {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.providers-page .provider-index__number--warning { color: var(--danger); }

.providers-page .provider-index__cell--usability {
  font-size: var(--text-xs);
  white-space: nowrap;
}
/* Usability is a readiness reading, not an alert — it stays typographic so the
   Standing pill remains the only coloured chip in the row. */
.providers-page .usability--usable { color: var(--fg-1); font-weight: var(--fw-medium); }
.providers-page .usability--needs-review { color: var(--fg-2); }
.providers-page .usability--not-usable { color: var(--fg-3); }

.providers-page .provider-index__cell--standing .pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  background: transparent;
}
.providers-page .provider-index__cell--standing .pill--good {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .provider-index__cell--standing .pill--review {
  background: var(--neutral-bg);
  color: var(--neutral);
  border-color: var(--neutral-border);
}
.providers-page .provider-index__cell--standing .pill--hold {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.providers-page .state-text {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.providers-page .state-text--pending { color: var(--review); font-style: italic; }
.providers-page .state-text--active { color: var(--fg-2); font-weight: var(--fw-semibold); }
.providers-page .state-text--inactive { color: var(--fg-label); }

.providers-page .provider-index__owner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.providers-page .provider-index__dash {
  font-size: var(--text-xs);
  color: var(--fg-label);
}
.providers-page .provider-index__cell--updated {
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ states --- */

.providers-page .provider-index__rows .eko-state {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 22px;
  color: var(--fg-3);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: left;
}
.providers-page .provider-index__rows .eko-state__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.providers-page .provider-index__rows .eko-state__msg { display: block; max-width: none; }
.providers-page .provider-index__rows .eko-state--error { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .providers-page .provider-index__rows .eko-state__spinner { animation: none; }
}

.providers-page .provider-index__empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 22px;
  text-align: center;
}
.providers-page .provider-index__empty-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.providers-page .provider-index__empty-sub {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .provider-index__search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- panel 4 --- */

.providers-page .panel4 {
  width: 380px;
  flex: none;
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  background: var(--surface-1);
  box-shadow: var(--shadow-panel);
  border-left: 1px solid var(--border);
}
.providers-page .panel4.is-open { display: flex; }

.providers-page .panel4__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 12px;
}
.providers-page .panel4__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  line-height: 1.2;
}
.providers-page .panel4__subtitle {
  font-size: var(--text-xs);
  color: var(--fg-label);
  margin-top: 3px;
  line-height: 1.2;
}
.providers-page .panel4__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 18px 16px;
  border-top: 1px solid var(--border);
}
.providers-page .panel4__foot {
  flex: none;
  padding: 12px 18px 20px;
  border-top: 1px solid var(--border);
}
.providers-page .panel4__section { display: none; }
.providers-page .panel4__section.is-visible { display: block; }

.providers-page .callout {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  margin-bottom: var(--space-16);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.providers-page .callout__icon {
  flex: none;
  margin-top: 1px;
  color: var(--info);
}
.providers-page .callout__icon svg { display: block; }
.providers-page .callout__body { flex: 1; color: var(--fg-2); }
.providers-page .callout--info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
}

.providers-page .field { margin-bottom: var(--space-16); }
/* The New Provider panel hides its subtype picker until a service type is
   chosen. app.css gives `.field` a display, which outranks the UA's
   `[hidden] { display: none }` — see the note above .provider-index__empty. */
.providers-page .field[hidden] { display: none !important; }
.providers-page .field__optional {
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg-label);
}
.providers-page .field__row {
  display: grid;
  grid-template-columns: 1fr 72px 88px;
  gap: 10px;
}
.providers-page .panel4__foot-note {
  margin: 10px 0 0;
  font-size: var(--text-2xs);
  color: var(--fg-label);
  text-align: center;
  line-height: 1.4;
}
.providers-page .field__label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 6px;
}
.providers-page .field__input {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--text-sm);
  color: var(--fg-1);
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}
.providers-page .field__input::placeholder { color: var(--fg-label); }

/* ------------------------------------------------ account surface --- */

.providers-page .provider-account-surface {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--surface-canvas);
}
.providers-page .provider-account-surface[hidden] { display: none !important; }
.providers-page:has(.provider-account-surface:not([hidden])) .provider-index,
.providers-page:has(.provider-account-surface:not([hidden])) .panel4 {
  display: none;
}
.providers-page .provider-surface {
  padding: var(--space-20) var(--space-24) var(--space-32);
}
.providers-page .provider-surface__loading {
  padding: var(--space-24);
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.providers-page .provider-surface__crumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.providers-page .provider-surface__crumb button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.providers-page .provider-surface__crumb-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.providers-page .provider-surface__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-16);
}
.providers-page .provider-surface__main { min-width: 0; }
.providers-page .provider-surface__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}
.providers-page .provider-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.providers-page .provider-chip--success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .provider-chip--warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.providers-page .provider-chip--neutral {
  background: var(--neutral-bg);
  color: var(--neutral);
  border-color: var(--neutral-border);
}
.providers-page .provider-chip--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.providers-page .provider-surface h1 {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.providers-page .provider-surface__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  margin-top: var(--space-12);
}
.providers-page .provider-surface__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.providers-page .provider-surface__fact span {
  color: var(--fg-label);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.providers-page .provider-surface__fact strong {
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.providers-page .provider-surface__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-12);
}
.providers-page .provider-surface__side-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.providers-page .provider-owner-chip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.providers-page .provider-owner-chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 10px;
  font-weight: var(--fw-bold);
}
.providers-page .provider-owner-chip__name {
  color: var(--fg-2);
  font-size: var(--text-sm);
}
.providers-page .provider-owner-chip:hover .provider-owner-chip__name {
  color: var(--fg-1, var(--fg-2));
}
.providers-page .provider-owner-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.providers-page .provider-surface__side small { color: var(--fg-label); }
.providers-page .provider-actions {
  position: relative;
}
.providers-page .provider-actions__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-label);
  cursor: pointer;
}
.providers-page .provider-actions__button:hover {
  background: var(--surface-2);
  color: var(--fg-2);
}
.providers-page .provider-actions__button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.providers-page .provider-actions__drop {
  position: absolute;
  top: calc(100% + var(--space-6));
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12);
}
.providers-page .provider-actions__drop[hidden] {
  display: none !important;
}
.providers-page .provider-actions__item {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.providers-page .provider-actions__item:hover {
  background: var(--surface-2);
}
.providers-page .provider-lifecycle-slot:empty {
  display: none;
}
.providers-page .provider-lifecycle-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border);
  border-right: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(17, 24, 39, 0.06));
}
.providers-page .provider-lifecycle-card__head {
  color: var(--fg-label);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.providers-page .provider-lifecycle-card__note {
  color: var(--fg-label);
  font-size: var(--text-xs);
}
.providers-page .provider-lifecycle-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--fg-1);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}
.providers-page .provider-standing-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
}
.providers-page .provider-standing-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--fg-1);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}
.providers-page .provider-lifecycle-confirm__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: var(--radius-xs, 3px);
  background: var(--surface-0);
  color: #fff;
}
.providers-page .provider-lifecycle-confirm__box svg {
  display: none;
}
.providers-page .provider-lifecycle-confirm.is-on .provider-lifecycle-confirm__box,
.providers-page .provider-standing-pick.is-on .provider-lifecycle-confirm__box {
  border-color: var(--primary);
  background: var(--primary);
}
.providers-page .provider-lifecycle-confirm.is-on .provider-lifecycle-confirm__box svg,
.providers-page .provider-standing-pick.is-on .provider-lifecycle-confirm__box svg {
  display: block;
}
.providers-page .provider-lifecycle-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}
.providers-page .provider-surface__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .provider-section-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.providers-page .provider-section {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--primary-tint-2);
  border-radius: var(--radius-lg);
  background: var(--primary-tint);
  color: var(--fg-1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.providers-page .provider-section:hover {
  background: var(--primary-tint-2);
}
.providers-page .provider-section:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.providers-page .provider-section[aria-expanded="true"] {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.providers-page .provider-section strong {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.providers-page .provider-section svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--fg-label);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 0.15s var(--ease-standard);
}
.providers-page .provider-section[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.providers-page .provider-section__body {
  min-height: 96px;
  border: 1px solid var(--primary-tint-2);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-0);
}
.providers-page .provider-section__body[hidden] {
  display: none;
}

/* ------------------------------ section 1: identity & account integrity --- */

.providers-page .provider-section__chip {
  flex: none;
  padding: var(--space-2) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.providers-page .provider-section__chip--complete {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .provider-section__chip--incomplete {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.providers-page .provider-section__chip--neutral {
  background: var(--neutral-bg);
  color: var(--neutral);
  border-color: var(--neutral-border);
}
.providers-page .provider-section__chip--success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

.providers-page .identity-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24) var(--space-24);
}
.providers-page .identity-empty {
  padding: var(--space-20) var(--space-24);
  color: var(--fg-3);
  font-size: var(--text-sm);
}

.providers-page .identity-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-faint);
}
.providers-page .identity-group__title {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .identity-group__edit {
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  padding: var(--space-4) var(--space-8);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  cursor: pointer;
}
.providers-page .identity-group__edit:hover { background: var(--surface-2); }

/* Two columns of label→value rows, filled column-first so a group reads down
   its left column then down its right — the order the fields are listed in. */
.providers-page .identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-32);
  grid-auto-flow: row;
}
.providers-page .identity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px dotted var(--border);
  min-width: 0;
}
.providers-page .identity-row__label {
  flex: none;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.providers-page .identity-row__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--fg-1);
  text-align: right;
  overflow-wrap: anywhere;
}
.providers-page .identity-row__value--empty { color: var(--fg-label); }
/* A value that carries a detail line stacks them instead of sitting them side
   by side — the detail qualifies the value above it, it is not another value. */
.providers-page .identity-row__value--stacked {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}
.providers-page .identity-row__detail {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .identity-row__action {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--primary);
  cursor: pointer;
}
.providers-page .identity-row__action:hover { text-decoration: underline; }
.providers-page .identity-row__action:disabled {
  color: var(--fg-muted);
  cursor: default;
  text-decoration: none;
}
.providers-page .identity-row__error {
  flex-basis: 100%;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--danger);
}
.providers-page .identity-verified {
  flex: none;
  padding: 1px var(--space-8);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-full);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}

.providers-page .identity-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(17, 24, 39, 0.06));
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-8);
}
.providers-page .identity-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}
.providers-page .identity-form .field { margin: 0; }
.providers-page .identity-form .field__label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-medium);
}
.providers-page .identity-form .field__input {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--text-xs);
  color: var(--fg-1);
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}
.providers-page .identity-check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-xs);
  color: var(--fg-2);
  align-self: end;
  padding-bottom: 9px;
}
.providers-page .identity-form__error {
  margin-top: var(--space-12);
  color: var(--danger);
  font-size: var(--text-xs);
}

/* A section's advisory conflicts — the save that produced them succeeded, so
   this is the warning palette, not the danger one .identity-form__error uses.
   .schedule-warning is section 3's and .group-warning section 2's: they render
   the SAME delivery conflict, so they are styled together and cannot drift. */
.providers-page .schedule-warning,
.providers-page .group-warning {
  margin: 0 0 var(--space-12);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-callout);
}
.providers-page .schedule-warning__item,
.providers-page .group-warning__item {
  margin: 0;
  color: var(--warning);
  font-size: var(--text-xs);
}
.providers-page .schedule-warning__item + .schedule-warning__item,
.providers-page .group-warning__item + .group-warning__item {
  margin-top: var(--space-4);
}

.providers-page .identity-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}
.providers-page .identity-form__actions .btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-6) var(--space-12);
}

/* ------------------------------------ activation blockers (header) ---
   One home for the account's activation blockers: the header block. Sections
   render their own Complete chips, but nothing else states what stands between
   this account and Active. */

.providers-page .provider-blockers { margin-top: var(--space-16); }
.providers-page .provider-blockers__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.providers-page .provider-blockers__title {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .provider-blockers__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}
.providers-page .provider-blockers__count.is-blocked {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.providers-page .provider-blockers__summary {
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .provider-blockers__note {
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.providers-page .provider-blockers__note--warn { color: var(--danger); }
.providers-page .provider-blockers__pending {
  margin: var(--space-8) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-label);
}
.providers-page .provider-blockers__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.providers-page .provider-blockers__area {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.providers-page .provider-blockers__area-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .provider-blocker {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
}
.providers-page .provider-blocker__icon {
  flex: none;
  display: inline-flex;
  margin-top: 1px;
  color: var(--danger);
}
.providers-page .provider-blocker__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.providers-page .provider-blocker__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .provider-blocker__detail {
  font-size: var(--text-xs);
  color: var(--fg-2);
}
.providers-page .provider-blocker__fix {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .provider-blocker__where {
  flex: none;
  font-size: var(--text-2xs);
  color: var(--fg-label);
  white-space: nowrap;
}
.providers-page .provider-lifecycle-blockers {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.providers-page .provider-lifecycle-card__note--warn { color: var(--danger); }

/* ------------------------ section 2 — Engagement & Work Eligibility --- */
/* Reuses section 1's identity-* value rows and form chrome; everything below
   is the shapes section 1 has no equivalent for: the Service Type cards, the
   multi-value checkbox groups and the language-pair editor. */

.providers-page .engagement-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .engagement-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}
.providers-page .engagement-card--editing { border-color: var(--primary); }
.providers-page .engagement-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
}
.providers-page .engagement-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.providers-page .engagement-card__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .engagement-card__sub {
  font-size: var(--text-xs);
  color: var(--fg-3);
  overflow-wrap: anywhere;
}
.providers-page .engagement-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}
.providers-page .engagement-card__actions .btn--icon {
  width: 28px;
  height: 28px;
  color: var(--fg-3);
}
.providers-page .engagement-card__actions .btn--icon:hover { color: var(--fg-1); }
.providers-page .engagement-card__actions svg { width: 15px; height: 15px; }
.providers-page .engagement-card__form {
  border-top: 1px solid var(--border);
  padding: var(--space-16);
}

.providers-page .engagement-role {
  flex: none;
  padding: var(--space-2) var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}
.providers-page .engagement-role--primary {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .engagement-role--additional {
  background: var(--surface-2);
  color: var(--fg-2);
  border-color: var(--border);
}

.providers-page .engagement-add {
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: var(--space-16);
  margin-bottom: var(--space-12);
}
.providers-page .engagement-add .field { margin: 0 0 var(--space-12); }
.providers-page .engagement-add .field:last-of-type { margin-bottom: 0; }

.providers-page .engagement-form__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.providers-page .engagement-form__narrow { max-width: 240px; }
.providers-page .engagement-hint {
  margin: var(--space-8) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.providers-page .engagement-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}
.providers-page .engagement-roles {
  display: flex;
  gap: var(--space-16);
}
.providers-page .engagement-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.providers-page .engagement-pairs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
/* One boxed unit per pair: the pair and the environments it allows read as one
   thing, which is the whole point of them no longer being two fields.

   Carries `.identity-form`'s treatment — white ground, 3px primary rules down
   the sides — because it is the same KIND of thing: an editable card nested in
   a form. It read as a grey inert panel against every other edit surface on the
   account, which is what the review asked to fix. Any change to the edit-card
   look belongs in both places. */
.providers-page .engagement-pair-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 640px;
  padding: var(--space-12);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(17, 24, 39, 0.06));
}
.providers-page .engagement-pair {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}
.providers-page .engagement-pair .field__input { flex: 1 1 0; min-width: 0; }
.providers-page .engagement-pair__type { flex: 1 1 40%; }
.providers-page .engagement-pair__envs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.providers-page .field__label--sub {
  font-size: var(--text-2xs);
  color: var(--fg-3);
}

/* Read view: one line per pair, its environments right-aligned opposite it. */
.providers-page .engagement-pair-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.providers-page .engagement-pair-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  min-width: 0;
}
.providers-page .engagement-pair-line__pair {
  font-size: var(--text-sm);
  color: var(--fg-1);
  min-width: 0;
}
.providers-page .engagement-pair-line__type {
  display: block;
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.providers-page .engagement-pair-line__envs {
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-align: right;
  min-width: 0;
}
.providers-page .identity-row--pairs { align-items: start; }

/* Rendered, never edited — section 3 owns the value. */
.providers-page .engagement-derived {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.providers-page .engagement-derived__note {
  display: block;
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.providers-page .engagement-pair__arrow {
  flex: none;
  color: var(--fg-3);
}
.providers-page .engagement-pair__remove {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--fg-3);
}
.providers-page .engagement-pair__remove:hover { color: var(--danger); }
.providers-page .engagement-pair__remove svg { width: 15px; height: 15px; }
.providers-page .engagement-pairs__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-label);
}
.providers-page .engagement-link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  cursor: pointer;
}
.providers-page .engagement-link:hover { text-decoration: underline; }

/* ---------------- section 3 — Schedule, Availability & Service Calendar --- */

/* The seven-day editor: one row per day, checkbox then two time inputs. Fixed
   rows rather than a list of the days that are on, so the week always reads as
   a week. */
.providers-page .schedule-days {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .schedule-day {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
}
.providers-page .schedule-day--off .field__input {
  background: var(--surface-2);
  color: var(--fg-label);
}
.providers-page .schedule-day__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.providers-page .schedule-week {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-32);
}
.providers-page .schedule-week__day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px dotted var(--border);
}
.providers-page .schedule-week__day span {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.providers-page .schedule-week__day strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .schedule-summary {
  margin: var(--space-12) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .schedule-summary span { color: var(--fg-label); }

/* --- section 3: service calendar -----------------------------------------
   One row: the status chip, the calendar's name, then the detail sentence.
   The tone modifiers reuse the token vocabulary the section-1 chips already
   use (tokens.css is the single source) rather than introducing new colours,
   so the calendar's Connected reads identically to a Complete elsewhere on
   the page. */
.providers-page .service-calendar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.providers-page .service-calendar__chip {
  flex: none;
  padding: var(--space-2) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.providers-page .service-calendar__chip--ok {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .service-calendar__chip--warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.providers-page .service-calendar__chip--error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.providers-page .service-calendar__chip--info {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}
.providers-page .service-calendar__chip--neutral {
  background: var(--neutral-bg);
  color: var(--neutral);
  border-color: var(--neutral-border);
}
.providers-page .service-calendar__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .service-calendar__detail {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Three ceilings across, matching the read row they replace. */
.providers-page .schedule-form__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12) var(--space-16);
}
.providers-page .identity-grid--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.providers-page .schedule-number {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.providers-page .schedule-number .field__input { min-width: 0; }
.providers-page .schedule-number__suffix {
  flex: none;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* ------------------------------ section 7 — Provider Rate Plan --------- */

.providers-page .rate-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.providers-page .rate-plan-head__actions {
  display: inline-flex;
  gap: var(--space-16);
  flex: none;
}
.providers-page .identity-group__edit--danger { color: var(--danger); }
.providers-page .rate-plan-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* The four facts across the head of the section, as the mock reads them. */
.providers-page .rate-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
  margin-bottom: var(--space-16);
}
.providers-page .rate-plan-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.providers-page .rate-plan-summary__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .rate-plan-summary__value {
  font-size: var(--text-sm);
  color: var(--fg-1);
}

.providers-page .rate-plan-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px dotted var(--border);
}
.providers-page .rate-plan-line__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .rate-plan-line__scope {
  font-size: var(--text-2xs);
  color: var(--fg-label);
}
.providers-page .rate-plan-line__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  flex: none;
  font-size: var(--text-sm);
  color: var(--fg-1);
}
/* The published rate, struck through beside the adjusted one: an adjustment is
   only legible next to the number it was adjusted from. */
.providers-page .rate-plan-line__was {
  color: var(--fg-label);
  text-decoration: line-through;
  font-size: var(--text-xs);
}

.providers-page .rate-plan-preview,
.providers-page .rate-plan-history__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-12);
  background: var(--surface-0);
}
.providers-page .rate-plan-preview__row,
.providers-page .rate-plan-history__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--fg-2);
}

.providers-page .rate-plan-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.providers-page .rate-plan-edit__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: var(--space-16);
}
.providers-page .rate-plan-edit__label {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .rate-plan-edit__currency {
  flex: none;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.providers-page .rate-plan-history {
  margin-top: var(--space-16);
  font-size: var(--text-xs);
}
.providers-page .rate-plan-history summary {
  cursor: pointer;
  color: var(--fg-3);
}

/* ------------------------------------------------------- responsive --- */

@media (min-width: 1280px) {
  .providers-page .provider-index__toolbar,
  .providers-page .provider-index__table-head,
  .providers-page .provider-index__row {
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 1023px) {
  .providers-page .panel4 { width: 340px; }
  .providers-page .search-box { width: 220px; }
}
@media (max-width: 767px) {
  .providers-page .panel4 {
    position: fixed;
    inset: 0;
    width: auto;
    z-index: 10;
  }
  .providers-page .provider-surface__header { flex-direction: column; }
  .providers-page .provider-surface__side { align-items: flex-start; }
  .providers-page .provider-blocker { flex-wrap: wrap; }
  .providers-page .provider-blocker__where { padding-left: var(--space-20); }
  .providers-page .identity-grid,
  .providers-page .identity-form__grid { grid-template-columns: minmax(0, 1fr); }
  .providers-page .identity-body { padding: var(--space-16); }
  .providers-page .engagement-card__row { flex-wrap: wrap; }
  .providers-page .engagement-pair { flex-wrap: wrap; }
  .providers-page .engagement-pair .field__input { flex-basis: 100%; }
  .providers-page .schedule-week,
  .providers-page .schedule-form__grid,
  .providers-page .identity-grid--thirds { grid-template-columns: minmax(0, 1fr); }
  .providers-page .schedule-day { grid-template-columns: 80px minmax(0, 1fr); }
  .providers-page .schedule-day__toggle { grid-column: 1 / -1; }
  .providers-page .rate-plan-head { flex-direction: column; }
  .providers-page .rate-plan-edit__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .providers-page .provider-index__toolbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .providers-page .search-box { width: 100%; }
}

/* ---- section 8 — Provider Performance & Operational History (read-only) --- */

.providers-page .provider-history {
  display: flex;
  flex-direction: column;
  gap: calc(var(--text-sm) * var(--lh-normal) * 2);
  padding: var(--space-20) var(--space-24) var(--space-24);
  min-width: 0;
  box-sizing: border-box;
}
.providers-page .provider-history-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}
.providers-page .provider-history-heading {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .provider-history-list,
.providers-page .provider-history-empty,
.providers-page .provider-history-metrics {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
  box-sizing: border-box;
  min-width: 0;
}
.providers-page .provider-history-list {
  display: flex;
  flex-direction: column;
}
/* Fixed leading columns so the two lists read as one table even though they are
   separate blocks; the customer takes the slack and the band sits hard right. */
.providers-page .provider-history-row {
  display: grid;
  grid-template-columns: 110px 120px 190px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  font-size: var(--text-sm);
  color: var(--fg-1);
  min-width: 0;
}
.providers-page .provider-history-row__code {
  font-weight: var(--fw-medium);
  color: var(--primary);
  text-decoration: none;
}
.providers-page .provider-history-row__code:hover { text-decoration: underline; }
.providers-page .provider-history-row__code--plain {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}
.providers-page .provider-history-row__date,
.providers-page .provider-history-row__time,
.providers-page .provider-history-row__customer {
  min-width: 0;
}
.providers-page .provider-history-row__band {
  font-size: var(--text-xs);
  color: var(--fg-3);
  text-align: right;
  white-space: nowrap;
}
.providers-page .provider-history-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.providers-page .provider-section__body > .provider-history-empty {
  padding: var(--space-20) var(--space-24) var(--space-24);
}

/* Two columns of label/value with a dotted leader, as the mock reads them. */
.providers-page .provider-history-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-32);
}
.providers-page .provider-history-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px dotted var(--border);
  font-size: var(--text-sm);
  min-width: 0;
}
.providers-page .provider-history-metric__label {
  min-width: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.providers-page .provider-history-metric__value {
  flex: none;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-align: right;
}

@media (max-width: 1023px) {
  .providers-page .provider-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-12);
  }
  .providers-page .provider-history-metrics { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Section 9 — Activity & Audit. An append-only log, so every rule here is
   presentational: there is no edit affordance to style.

   The renderer emits .matching-status-dot--<tone>, whose rules live in the
   legacy custom.css. providers.html is deliberately OFF that stylesheet
   (design-system migration), so port just those few rules here rather than
   pulling the whole legacy sheet back in — the same thing
   customer-account-surface.css did for the customer feed. Tone values mirror
   provider_activity_events.TONE_*.
   ------------------------------------------------------------------------- */
.providers-page .provider-account-surface .matching-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex: 0 0 auto;
}
.providers-page .provider-account-surface .matching-status-dot--green { background: #4cc96b; }
.providers-page .provider-account-surface .matching-status-dot--orange { background: #f5b84c; }
.providers-page .provider-account-surface .matching-status-dot--info { background: #375f8b; }
.providers-page .provider-account-surface .matching-status-dot--neutral { background: #9ca3af; }

.providers-page .provider-activity {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24) var(--space-24);
}
.providers-page .provider-activity-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .provider-activity-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The dot column is fixed so every headline starts on the same rule, however
   long the previous entry's summary ran. */
.providers-page .provider-activity-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--border);
}
.providers-page .provider-activity-row:last-child { border-bottom: none; }
.providers-page .provider-activity-row__dot { margin-top: 7px; }
.providers-page .provider-activity-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.providers-page .provider-activity-row__headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.providers-page .provider-activity-row__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .provider-activity-row__summary {
  font-size: var(--text-sm);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
/* The previous → new pair. Monospace-ish weight rather than a box, so a long
   transition wraps instead of overflowing the panel. */
.providers-page .provider-activity-row__change {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-xs);
}
.providers-page .provider-activity-row__from {
  color: var(--fg-3);
  text-decoration: line-through;
}
.providers-page .provider-activity-row__arrow { color: var(--fg-3); }
.providers-page .provider-activity-row__to {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}
.providers-page .provider-activity-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-xs);
}
.providers-page .provider-activity-row__related {
  font-weight: var(--fw-medium);
  color: var(--primary);
  text-decoration: none;
}
.providers-page .provider-activity-row__related:hover { text-decoration: underline; }
.providers-page .provider-activity-row__related--plain {
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}
.providers-page .provider-activity-row__notes {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--fg-3);
  overflow-wrap: anywhere;
}
.providers-page .provider-activity-row__meta {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .provider-activity-empty {
  margin: 0;
  padding: var(--space-20) var(--space-24) var(--space-24);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* ------ section 4: qualifications, work & customer qualifications ---
   Three blocks in one accordion body. Only the first can hold an activation
   up, so it is the only one that carries the "Required to staff" tag and the
   blocking line — the other two are deliberately visually identical, because
   they are the same kind of record with a different consequence. */

.providers-page .qual-body { gap: var(--space-24); }

.providers-page .qual-summary {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .qual-blocking {
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-callout);
  color: var(--warning);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.providers-page .qual-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .qual-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}
.providers-page .qual-block__title {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .qual-block__add {
  flex: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  cursor: pointer;
}
.providers-page .qual-block__add:hover { text-decoration: underline; }

.providers-page .qual-form {
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}
.providers-page .qual-form__expires { margin-top: var(--space-12); display: block; }

.providers-page .qual-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .qual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}
/* An unresolved required-to-staff row is the reason an account cannot go
   Active, so it is marked here as well as in the header's blocker list. */
.providers-page .qual-row--blocking { border-color: var(--warning-border); }
.providers-page .qual-row__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.providers-page .qual-row__tag {
  padding: 1px var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-3);
}
.providers-page .qual-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: none;
}
.providers-page .qual-row__expires {
  font-size: var(--text-xs);
  color: var(--fg-3);
  white-space: nowrap;
}
.providers-page .qual-row__delete {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  color: var(--fg-3);
  cursor: pointer;
}
.providers-page .qual-row__delete:hover { color: var(--danger); }

.providers-page .qual-chip {
  flex: none;
  padding: var(--space-2) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
.providers-page .qual-chip--button { cursor: pointer; }
.providers-page .qual-chip--button:hover { filter: brightness(0.97); }
.providers-page .qual-chip--success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .qual-chip--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.providers-page .qual-chip--warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}

.providers-page .qual-customers {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .qual-customer {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  padding: var(--space-12) var(--space-16);
}
.providers-page .qual-customer__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.providers-page .qual-customer__spacer { flex: 1; }
.providers-page .qual-customer__code {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .qual-customer__empty { margin-top: var(--space-4); }
.providers-page .qual-customer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.providers-page .qual-customer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.providers-page .qual-customer__req {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .qual-customer__context {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* --- Section 6 — Relationships & Provider Restrictions ---------------------
   Reuses the section-4 block/row/chip vocabulary so the two accordions read as
   one surface; only the pairing card's stacked body is new. A pairing needs
   three lines (counterpart, window, scope) where a qualification needs one. */

.providers-page .rel-signal .qual-row__name { gap: var(--space-8); }

.providers-page .rel-row__detail {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .rel-row__reason { font-style: italic; }

.providers-page .rel-pairing { align-items: flex-start; }
.providers-page .rel-pairing__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.providers-page .rel-pairing__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .rel-pairing__meta { align-items: flex-start; }
.providers-page .rel-pairing__owner {
  font-size: var(--text-xs);
  color: var(--fg-3);
  white-space: nowrap;
}
/* A pairing whose window has closed is history, not a rule in force — it stays
   listed (an owner should see that a restriction has lapsed) but must not read
   like something Matching is still applying. */
.providers-page .rel-pairing--lapsed { opacity: 0.65; }

.providers-page .rel-pairing__editing {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .rel-form__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

/* ------------------------------ section 10: provider information request --- */

.providers-page .provider-pir {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24) var(--space-24);
}
.providers-page .provider-pir-empty {
  padding: var(--space-20) var(--space-24);
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.providers-page .provider-pir-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
}
.providers-page .provider-pir-meta__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 5.5rem;
}
.providers-page .provider-pir-meta__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .provider-pir-meta__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.providers-page .provider-pir-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-2) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.providers-page .provider-pir-pill--neutral {
  background: var(--neutral-bg);
  color: var(--neutral);
  border-color: var(--neutral-border);
}
.providers-page .provider-pir-pill--success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.providers-page .provider-pir-pill--info {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}
.providers-page .provider-pir-description {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .provider-pir-callout {
  margin-bottom: 0;
}
.providers-page .provider-pir-email {
  font-weight: var(--fw-semibold);
  color: var(--info);
}
.providers-page .provider-pir-email--missing {
  font-weight: var(--fw-medium);
  font-style: italic;
}
.providers-page .provider-pir-send {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
.providers-page .provider-pir-send__trigger {
  width: auto;
  align-self: flex-start;
}
.providers-page .provider-pir-send--confirming .provider-pir-send__trigger {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.providers-page .provider-pir-send > [id="provider-pir-confirm-panel"] {
  width: 100%;
}
.providers-page .provider-pir-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-16) var(--space-16) var(--space-20);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(17, 24, 39, 0.06));
}
.providers-page .provider-pir-send--confirming .provider-pir-confirm {
  border-top-left-radius: 0;
}
.providers-page .provider-pir-confirm__head {
  color: var(--fg-label);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.providers-page .provider-pir-confirm__note {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.providers-page .provider-pir-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.providers-page .provider-pir-footnote {
  margin: var(--space-4) 0 0;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  line-height: 1.45;
}

/* --- Section 5 — Competency & Situation Readiness ---------------------------
   Reuses section 4's block heading and form vocabulary so the two accordions
   read as one surface. What is new is the card body: a readiness row carries
   THREE numbers — what the provider said, what the company said, and which of
   them is in force — and only the third is ever acted on. So Effective is the
   one rendered in the accent colour, and the other two sit beside it as the
   working the answer was derived from.

   Modality and Adaptability use the same card with `--compact`, laying the
   title and metrics on one line: they carry one number about the provider as a
   whole, and a full card would be mostly empty. */

.providers-page .readiness-body { gap: var(--space-24); }

.providers-page .readiness-summary {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.providers-page .readiness-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.providers-page .readiness-block__title {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.providers-page .readiness-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.providers-page .readiness-card {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* A scope nobody has answered is the section's whole point — it is what the
   activation blocker names — so it is marked, but quietly: it is an outstanding
   question, not an error. */
.providers-page .readiness-card--outstanding { border-style: dashed; }

.providers-page .readiness-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}
.providers-page .readiness-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.providers-page .readiness-card__confidence {
  flex: none;
  font-size: var(--text-xs);
  color: var(--fg-3);
  white-space: nowrap;
}
.providers-page .readiness-card__meta,
.providers-page .readiness-card__attribution {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.providers-page .readiness-card__attribution { margin-top: var(--space-8); }

.providers-page .readiness-card__body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-top: var(--space-8);
}

.providers-page .readiness-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.providers-page .readiness-metric__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.providers-page .readiness-metric__value {
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.providers-page .readiness-metric--effective .readiness-metric__value {
  color: var(--primary);
  font-weight: var(--fw-medium);
}

.providers-page .readiness-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: auto;
}
.providers-page .readiness-card__edit {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}
.providers-page .readiness-card__edit:hover { text-decoration: underline; }

.providers-page .readiness-card--compact .readiness-card__body {
  align-items: center;
  margin-top: 0;
}
.providers-page .readiness-card--compact .readiness-card__title {
  min-width: 7rem;
}

.providers-page .readiness-form {
  margin-top: var(--space-12);
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}
.providers-page .readiness-form__field {
  display: block;
  margin-top: var(--space-12);
}

/* The account WARNINGS block — the same rows as the blockers, in the warning
   tone. A blocker is a precondition of going live; a warning is about an
   account that already is, so they read alike and sit apart. */
.providers-page .provider-blockers--warnings {
  margin-top: var(--space-12);
  margin-bottom: var(--space-16);
}
.providers-page .provider-blockers__count.is-warned {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.providers-page .provider-blockers--warnings .provider-blocker {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
.providers-page .provider-blockers--warnings .provider-blockers__icon {
  color: var(--warning);
}

/* Section 7 — a history row expands into its own before/after (8.B). */
.providers-page .rate-plan-history__item { border-bottom: 1px solid var(--border); }
.providers-page .rate-plan-history__item:last-child { border-bottom: none; }
.providers-page .rate-plan-history__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-8) 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.providers-page .rate-plan-history__row:hover { color: var(--fg-1); }
.providers-page .rate-plan-history__item.is-open .rate-plan-history__name {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.providers-page .rate-plan-history__window {
  flex: none;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.providers-page .rate-plan-diff {
  padding: var(--space-8) 0 var(--space-16);
}
.providers-page .rate-plan-diff__basis {
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.providers-page .rate-plan-diff__head,
.providers-page .rate-plan-diff__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 96px;
  gap: var(--space-8);
  align-items: baseline;
  padding: var(--space-6) 0;
}
.providers-page .rate-plan-diff__head {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-label);
  border-bottom: 1px solid var(--border);
}
.providers-page .rate-plan-diff__head span:not(:first-child),
.providers-page .rate-plan-diff__was,
.providers-page .rate-plan-diff__now {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.providers-page .rate-plan-diff__row { font-size: var(--text-sm); color: var(--fg-2); }
.providers-page .rate-plan-diff__row--unchanged .rate-plan-diff__was,
.providers-page .rate-plan-diff__row--unchanged .rate-plan-diff__now {
  color: var(--fg-3);
}
.providers-page .rate-plan-diff__row--changed .rate-plan-diff__now,
.providers-page .rate-plan-diff__row--added .rate-plan-diff__now {
  font-weight: var(--fw-semibold);
  color: var(--success);
}
.providers-page .rate-plan-diff__row--changed .rate-plan-diff__was,
.providers-page .rate-plan-diff__row--removed .rate-plan-diff__was {
  color: var(--fg-3);
  text-decoration: line-through;
}
.providers-page .rate-plan-diff__row--removed .rate-plan-diff__label {
  color: var(--fg-3);
}