/* Customer Account Surface — scoped under customers page */

.customers-page .customer-account-surface {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--surface-canvas);
}

.customers-page .customer-account-surface[hidden] {
  display: none !important;
}

.customers-page:has(.customer-account-surface:not([hidden])) .customer-index {
  display: none;
}

.customers-page:has(.customer-account-surface:not([hidden])) .panel4 {
  display: none;
}

.customers-page .customer-account-surface .account-surface {
  padding: var(--space-20) var(--space-24) var(--space-32);
}

.customers-page .customer-account-surface .account-surface__crumbbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.customers-page .customer-account-surface .account-surface__crumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.customers-page .customer-account-surface .account-surface__crumb-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;
}

.customers-page .customer-account-surface .account-surface__crumb-sep {
  color: var(--border-strong);
}

.customers-page .customer-account-surface .account-surface__crumb-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.customers-page .customer-account-surface .account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-16);
}

.customers-page .customer-account-surface .account-header__main {
  min-width: 0;
}

.customers-page .customer-account-surface .account-header__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.customers-page .customer-account-surface .account-header__name {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}

.customers-page .customer-account-surface .account-header__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  margin-top: var(--space-12);
  font-size: var(--text-sm);
}

.customers-page .customer-account-surface .account-header__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

.customers-page .customer-account-surface .account-header__fact-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .account-header__fact-value {
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

.customers-page .customer-account-surface .account-header__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-12);
}

.customers-page .customer-account-surface .account-header__side-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .account-header__side-row .btn[hidden] {
  display: none !important;
}

.customers-page .customer-account-surface .actions-menu {
  position: relative;
}

.customers-page .customer-account-surface .actions-menu__drop {
  position: absolute;
  top: calc(100% + var(--space-6));
  right: 0;
  z-index: 20;
  min-width: 190px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customers-page .customer-account-surface .actions-menu__drop[hidden] {
  display: none !important;
}

.customers-page .customer-account-surface .actions-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-2);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.customers-page .customer-account-surface .actions-menu__item:hover {
  background: var(--surface-2);
}

.customers-page .customer-account-surface .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-label);
  cursor: pointer;
}

.customers-page .customer-account-surface .icon-btn:hover {
  background: var(--surface-2);
  color: var(--fg-2);
}

.customers-page .customer-account-surface .account-header__updated {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .account-header__updated svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.customers-page .customer-account-surface .owner-chip[hidden] {
  display: none !important;
}

.customers-page .customer-account-surface .owner-chip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.customers-page .customer-account-surface .owner-chip:hover .owner-chip__name {
  color: var(--fg-1, var(--fg-2));
}

.customers-page .customer-account-surface .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);
}

.customers-page .customer-account-surface .owner-chip__name {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.customers-page .customer-account-surface .action-card-slot {
  margin-bottom: var(--space-8);
}

.customers-page .customer-account-surface .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.customers-page .customer-account-surface .chip--neutral {
  background: var(--surface-2);
  color: var(--fg-3);
}

.customers-page .customer-account-surface .chip--success {
  background: var(--success-bg);
  color: var(--success);
}

.customers-page .customer-account-surface .chip--warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.customers-page .customer-account-surface .chip--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.customers-page .customer-account-surface .chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

/* Section accordions (handoff .section) */
.customers-page .customer-account-surface .section {
  border: 1px solid var(--primary-tint-2);
  background: var(--primary-tint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-12);
}

.customers-page .customer-account-surface .section__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--space-12) var(--space-20);
  font-family: inherit;
}

.customers-page .customer-account-surface .section__toggle:hover {
  background: var(--primary-tint-2);
}

.customers-page .customer-account-surface .section__icon {
  flex: none;
  width: 15px;
  height: 15px;
  display: block;
}

.customers-page .customer-account-surface .section__title {
  flex: 1;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .section__meta {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .section__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-label);
  transition: transform 0.15s var(--ease-standard);
}

.customers-page .customer-account-surface .section__chevron.is-open {
  transform: rotate(180deg);
}

.customers-page .customer-account-surface .section__body {
  display: none;
  background: var(--surface-0);
  border-top: 1px solid var(--primary-tint-2);
  padding: var(--space-8) var(--space-20) var(--space-20);
}

.customers-page .customer-account-surface .section__body.is-open {
  display: block;
}

.customers-page .customer-account-surface .section__subhead {
  margin: var(--space-16) 0 var(--space-6);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .section__subhead:first-child {
  margin-top: 0;
}

.customers-page .customer-account-surface .group-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-16) 0 var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .group-header:first-child {
  margin-top: 0;
}

.customers-page .customer-account-surface .group-header__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .group-header__hint {
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .group-header__spacer {
  flex: 1;
}

.customers-page .customer-account-surface .value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-32);
}

.customers-page .customer-account-surface .value-grid--tight {
  gap: 2px var(--space-24);
}

.customers-page .customer-account-surface .value-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-4) 0;
  border-bottom: 1px dotted var(--border-faint);
}

.customers-page .customer-account-surface .value-row__label {
  font-size: var(--text-sm);
  color: var(--fg-label);
  flex: none;
}

.customers-page .customer-account-surface .value-row__value {
  text-align: right;
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

.customers-page .customer-account-surface .value-grid--tight .value-row {
  font-size: var(--text-xs);
  padding: var(--space-2) 0;
}

.customers-page .customer-account-surface .value-grid--tight .value-row__label {
  font-size: var(--text-xs);
}

.customers-page .customer-account-surface .empty-note {
  padding: var(--space-12) 0;
  font-size: var(--text-sm);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .billing-group {
  background: var(--surface-0);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-12) var(--space-4);
  margin-bottom: var(--space-8);
}

.customers-page .customer-account-surface .billing-group:last-child {
  margin-bottom: 0;
}

.customers-page .customer-account-surface .billing-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .billing-group__title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .billing-group__spacer {
  flex: 1;
}

.customers-page .customer-account-surface .billing-group__summary {
  margin-top: var(--space-8);
}

.customers-page .customer-account-surface .form-card + .value-grid--identity {
  margin-top: var(--space-4);
}

.customers-page .customer-account-surface .value-grid--identity {
  padding-top: var(--space-4);
}

.customers-page .customer-account-surface .btn--text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  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;
}

.customers-page .customer-account-surface .btn--text:hover {
  background: var(--surface-2);
}

.customers-page .customer-account-surface .btn--text svg {
  flex: none;
}

.customers-page .customer-account-surface .activation-blockers-slot {
  margin-bottom: var(--space-16);
}

.customers-page .customer-account-surface .activation-blockers-slot:empty,
.customers-page .customer-account-surface .activation-blockers-slot[hidden] {
  display: none;
}

/* Account alerts — the Account Warning and Review Needed panels. Tinted rather
   than outlined like a form card: they are the one thing on the surface that is
   not a section, and they have to read as such from the top of the page.
   Colours come straight from the danger/warning token pairs, so the panels and
   the header chips that count them are the same red and the same amber. */
.customers-page .customer-account-surface .account-alerts-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.customers-page .customer-account-surface .account-alerts-slot:empty,
.customers-page .customer-account-surface .account-alerts-slot[hidden] {
  display: none;
}

.customers-page .customer-account-surface .account-alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
}

.customers-page .customer-account-surface .account-alert--warning {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.customers-page .customer-account-surface .account-alert--review {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.customers-page .customer-account-surface .account-alert__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: inherit;
}

.customers-page .customer-account-surface .account-alert__icon {
  display: inline-flex;
  flex: none;
}

/* One dashed rule under the head and between items, so several warnings read as
   one panel rather than as a stack of separate cards. */
.customers-page .customer-account-surface .account-alert__item {
  border-top: 1px dashed currentColor;
  padding-top: var(--space-8);
}

.customers-page .customer-account-surface .account-alert__item + .account-alert__item {
  margin-top: var(--space-8);
}

.customers-page .customer-account-surface .account-alert__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .account-alert__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .account-alert__text {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--fg-1);
}

/* What to do about it, kept quieter than what is wrong — the same relationship
   .activation-row__fix has to its own title. */
.customers-page .customer-account-surface .account-alert__fix {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: inherit;
}

.customers-page .customer-account-surface .account-alert__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px dashed currentColor;
}

.customers-page .customer-account-surface .account-alert__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

.customers-page .customer-account-surface .account-alert__row::before {
  content: "\2022";
  align-self: flex-start;
  color: inherit;
}

.customers-page .customer-account-surface .account-alert__row-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .account-alert__action {
  flex: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 2px var(--space-8);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: inherit;
  cursor: pointer;
}

.customers-page .customer-account-surface .account-alert__action:hover {
  background: var(--surface-0);
}

.customers-page .customer-account-surface .account-alert__action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .customers-page .customer-account-surface .account-alert__item-head,
  .customers-page .customer-account-surface .account-alert__row {
    flex-wrap: wrap;
  }
}

.customers-page .customer-account-surface .form-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: var(--radius-md);
  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);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.customers-page .customer-account-surface .form-card__head {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .form-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.customers-page .customer-account-surface .form-card__actions {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
}

.customers-page .customer-account-surface .form-card__note {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .form-card__checks {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.customers-page .customer-account-surface .checkbox-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--fg-1);
  user-select: none;
}

.customers-page .customer-account-surface .checkbox-pick__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs, 3px);
  border: 1.5px solid var(--border-strong, var(--border));
  background: var(--surface-0);
  flex: none;
  color: #fff;
}

.customers-page .customer-account-surface .checkbox-pick__box svg {
  display: none;
}

.customers-page .customer-account-surface .checkbox-pick.is-on .checkbox-pick__box {
  background: var(--primary);
  border-color: var(--primary);
}

.customers-page .customer-account-surface .checkbox-pick.is-on .checkbox-pick__box svg {
  display: block;
}

.customers-page .customer-account-surface .field {
  margin-bottom: 0;
}

.customers-page .customer-account-surface .btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-6) var(--space-12);
}

.customers-page .customer-account-surface .btn--secondary {
  background: var(--surface-0);
  color: var(--fg-2);
  border: 1px solid var(--border-strong);
}

.customers-page .customer-account-surface .btn--secondary:hover {
  background: var(--surface-2);
}

/* Section 2 — People and Rosters */
.customers-page .customer-account-surface .roster-list {
  display: flex;
  flex-direction: column;
}

.customers-page .customer-account-surface .roster-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .roster-row:last-child {
  border-bottom: none;
}

.customers-page .customer-account-surface .roster-row__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

.customers-page .customer-account-surface .roster-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.customers-page .customer-account-surface .roster-row__body--action {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.customers-page .customer-account-surface .roster-row__body--action:hover .roster-row__name {
  color: var(--primary);
}

.customers-page .customer-account-surface .roster-row__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-page .customer-account-surface .roster-row__sub {
  font-size: var(--text-xs);
  color: var(--fg-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-page .customer-account-surface .icon-btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.customers-page .customer-account-surface .checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.customers-page .customer-account-surface .checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--fg-2);
  cursor: pointer;
}

.customers-page .customer-account-surface .checkbox input {
  margin: 0;
  cursor: pointer;
}

/* Section 3 — Service delivery setup and requirements */
.customers-page .customer-account-surface .roster-row__avatar--icon {
  background: var(--surface-2);
  color: var(--fg-3);
}

.customers-page .customer-account-surface .roster-row__detail {
  flex: none;
  max-width: 45%;
  font-size: var(--text-sm);
  color: var(--fg-label);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-page .customer-account-surface .offering-card {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-8);
}

.customers-page .customer-account-surface .offering-card__content {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.customers-page .customer-account-surface .offering-card__content:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.customers-page .customer-account-surface .offering-card:last-child {
  margin-bottom: 0;
}

.customers-page .customer-account-surface .offering-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .offering-card__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .offering-card__spacer {
  flex: 1;
}

.customers-page .customer-account-surface .offering-card__sub {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .offering-form__top {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.customers-page .customer-account-surface .offering-form__top .field {
  flex: 1;
  min-width: 220px;
}

.customers-page .customer-account-surface .offering-form__modes {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-8);
}

.customers-page .customer-account-surface .requirement-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 calc(var(--space-8) + 3px);
  border-radius: var(--radius-full);
  background: var(--primary);
}

.customers-page .customer-account-surface .signal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
  padding-top: var(--space-4);
  max-width: 20rem;
}

.customers-page .customer-account-surface .signal-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.customers-page .customer-account-surface .signal-field__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .signal-field__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

/* Section 5 — Documents and expirations */
.customers-page .customer-account-surface .file-picker {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .file-picker .field__input {
  flex: 1;
  min-width: 0;
  cursor: default;
}

.customers-page .customer-account-surface .file-picker .btn {
  flex: none;
}

.customers-page .customer-account-surface .form-card__note--warn {
  color: var(--warning);
}

.customers-page .customer-account-surface .roster-row [data-action="cas-edit-document"] {
  color: var(--fg-label);
}

.customers-page .customer-account-surface .roster-row [data-action="cas-edit-document"]:hover {
  background: var(--surface-2);
  color: var(--primary);
}

/* Status dots + chips for the shared RequestStatusUI / BillingStatusUI markup.
   Those renderers emit .request-status-chip and .matching-status-dot--<tone>,
   whose rules live in the legacy custom.css. customers.html is deliberately OFF
   that stylesheet (design-system migration), so port just these few rules here
   rather than pulling the whole legacy sheet back in. Tone values mirror
   purpose_descriptors.StatusDef.tone. */
.customers-page .customer-account-surface .matching-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex: 0 0 auto;
}

.customers-page .customer-account-surface .matching-status-dot--teal { background: #4fd1ff; }
.customers-page .customer-account-surface .matching-status-dot--orange { background: #f5b84c; }
.customers-page .customer-account-surface .matching-status-dot--red { background: #ff5d5d; }
.customers-page .customer-account-surface .matching-status-dot--green { background: #4cc96b; }
.customers-page .customer-account-surface .matching-status-dot--blue { background: #3a7afe; }
.customers-page .customer-account-surface .matching-status-dot--neutral { background: #9ca3af; }
.customers-page .customer-account-surface .matching-status-dot--info { background: #375f8b; }

.customers-page .customer-account-surface .request-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--fg-2);
  white-space: nowrap;
}

/* Section 6 — Operational history (read-only feeds) */
.customers-page .customer-account-surface .activity-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .activity-row:last-child {
  border-bottom: none;
}

.customers-page .customer-account-surface .activity-row__dot {
  flex: none;
  margin-top: 6px;
}

.customers-page .customer-account-surface .activity-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.customers-page .customer-account-surface .activity-row__headline {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.customers-page .customer-account-surface .activity-row__summary {
  font-size: var(--text-sm);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .activity-row__meta {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .history-list {
  display: flex;
  flex-direction: column;
}

.customers-page .customer-account-surface .history-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .history-row:last-child {
  border-bottom: none;
}

.customers-page .customer-account-surface .history-row__code {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.customers-page .customer-account-surface .history-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.customers-page .customer-account-surface .history-row__title {
  font-size: var(--text-sm);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-page .customer-account-surface .history-row__sub {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .history-row__when {
  flex: none;
  font-size: var(--text-sm);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .history-row__status {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.customers-page .customer-account-surface .cas-loading {
  padding: var(--space-32);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .customers-page .customer-account-surface .account-header {
    flex-direction: column;
  }

  .customers-page .customer-account-surface .account-header__side {
    align-items: flex-start;
    width: 100%;
  }

  .customers-page .customer-account-surface .account-surface {
    padding: var(--space-16);
  }

  .customers-page .customer-account-surface .value-grid {
    grid-template-columns: 1fr;
  }

  .customers-page .customer-account-surface .section__meta {
    display: none;
  }

  .customers-page .customer-account-surface .form-card__row {
    grid-template-columns: 1fr;
  }

  .customers-page .customer-account-surface .signal-grid {
    grid-template-columns: 1fr;
  }

  .customers-page .customer-account-surface .roster-row__detail {
    display: none;
  }

  .customers-page .customer-account-surface .history-row__when {
    display: none;
  }
}

/* --------------------------------------------------------------- Section 4
   Billing info. The sublists render the mock's "PLAN VALUES" / "STANDARD
   POLICIES" / "AGREEMENT TERMS" blocks, and the mapping grid its two-column
   invoice-field table. */

.customers-page .customer-account-surface .billing-sublist {
  margin-top: var(--space-12);
}

.customers-page .customer-account-surface .billing-sublist__title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  margin-bottom: var(--space-4);
}

.customers-page .customer-account-surface .billing-sublist__hint {
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: normal;
}

.customers-page .customer-account-surface .billing-sublist__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.customers-page .customer-account-surface .billing-sublist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--fg-1);
}

/* The bullet is drawn rather than inherited from list-style so it keeps the
   surface's accent colour and stays aligned with the wrapped text. */
.customers-page .customer-account-surface .billing-sublist__item > span:first-child::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-label);
  margin-right: var(--space-8);
  vertical-align: middle;
}

.customers-page .customer-account-surface .billing-sublist__value {
  color: var(--fg-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* An adjusted plan value reads right-to-left: the chip says it is an exception,
   the muted number says what the shared plan would have charged. Scoped to the
   PLAN VALUES sublist only — billing-sublist__value is shared with STANDARD
   POLICIES and other lists that must keep the plain block layout above. */
.customers-page .customer-account-surface .billing-sublist--plan-values .billing-sublist__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
}

/* What the PICKED rate plan or commercial agreement charges, shown on the edit
   card before the switch is saved. Inset and tinted so it reads as a preview of a
   catalog entry being considered rather than as this account's own settled values. */
.customers-page .customer-account-surface .plan-preview {
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  padding: var(--space-8) var(--space-12);
  margin-bottom: var(--space-8);
}

.customers-page .customer-account-surface .plan-preview .billing-sublist:first-child {
  margin-top: 0;
}

.customers-page .customer-account-surface .plan-value__chip {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-6);
}

/* A superseded row is not an exception the account chose — it is a contract
   outranking the plan — so it reads in the warning palette, not the accent one. */
.customers-page .customer-account-surface .plan-value__chip--superseded {
  color: var(--warning);
  background: var(--warning-bg);
}

.customers-page .customer-account-surface .plan-value__plan {
  color: var(--fg-label);
  font-weight: var(--fw-regular);
  text-decoration: line-through;
}

/* Its own <li>, outside billing-sublist__item, so it neither takes the drawn
   bullet nor joins the space-between row above it. */
.customers-page .customer-account-surface .plan-value__note {
  font-size: var(--text-xs);
  color: var(--fg-label);
  padding: 0 0 var(--space-4) var(--space-12);
}

.customers-page .customer-account-surface .mapping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-16);
}

.customers-page .customer-account-surface .mapping-grid__head {
  font-size: var(--text-xs);
  color: var(--fg-label);
  font-style: italic;
  padding-bottom: var(--space-2);
}

.customers-page .customer-account-surface .mapping-grid__cell {
  font-size: var(--text-sm);
  color: var(--fg-1);
  padding: var(--space-2) 0;
}

/* A mapping row is select + input + Remove; the button must not stretch to the
   full field height the flex row would otherwise give it. */
.customers-page .customer-account-surface .form-card__row--mapping {
  align-items: flex-end;
}

.customers-page .customer-account-surface .form-card__row--mapping .btn--text {
  padding-bottom: var(--space-8);
  flex: none;
}

.customers-page .customer-account-surface .form-card > [data-action="cas-add-mapping-row"] {
  align-self: flex-start;
  width: auto;
}

/* ------------------------------------------------------- Account hierarchy
   "CHILD ACCOUNTS" chips under the header facts. Each chip carries the child's
   own billing behaviour, so the two states must stay visually distinct without
   relying on colour alone. */

.customers-page .customer-account-surface .account-header__children {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-12);
}

.customers-page .customer-account-surface .account-header__children-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .account-header__children-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .child-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-0);
  overflow: hidden;
}

.customers-page .customer-account-surface .child-chip__open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  cursor: pointer;
}

.customers-page .customer-account-surface .child-chip__open:hover {
  color: var(--fg-0);
  text-decoration: underline;
}

.customers-page .customer-account-surface .child-chip__sep {
  color: var(--fg-label);
}

.customers-page .customer-account-surface .child-chip__behavior {
  color: var(--fg-label);
}

/* A child billing through its parent is the case a coordinator needs to spot,
   so it is weighted rather than merely tinted. */
.customers-page .customer-account-surface .child-chip--through-parent .child-chip__behavior {
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

.customers-page .customer-account-surface .child-chip__remove {
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-6);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--fg-label);
  cursor: pointer;
}

.customers-page .customer-account-surface .child-chip__remove:hover {
  color: var(--danger-fg, #b42318);
}

/* The Relationship fact names a child's parent as a link — the only way to
   navigate UP the hierarchy from the surface. */
.customers-page .customer-account-surface .relationship-fact__sep {
  margin: 0 var(--space-6);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .relationship-fact__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--fw-medium);
  color: var(--accent-fg, #2f5fa8);
  cursor: pointer;
}

.customers-page .customer-account-surface .relationship-fact__link:hover {
  text-decoration: underline;
}

@media (min-width: 769px) {
  .customers-page .customer-account-surface .section__meta {
    display: inline;
  }
}

.customers-page .customer-account-surface .adjust-list {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.customers-page .customer-account-surface .adjust-row {
  display: grid;
  /* The trailing column only ever seats the "Reset to plan rate" button on an
     adjustable row — the note (below) no longer lives here — but it still
     reserves that width on every row so the label column matches width
     whether or not this row has a button in it. */
  grid-template-columns: 1fr auto 120px minmax(125px, auto);
  align-items: center;
  gap: var(--space-12);
}

.customers-page .customer-account-surface .adjust-row__label {
  font-size: var(--text-sm);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .adjust-row__plan {
  font-size: var(--text-xs);
  color: var(--fg-label);
  white-space: nowrap;
}

/* The rate box sits in the row's fixed 120px column, so it must not inherit
   field__input's full width. */
.customers-page .customer-account-surface .adjust-row__input {
  width: 100%;
  text-align: right;
}

/* A superseded or flat-fee value keeps the same two trailing columns, but shows
   the rate that will really bill instead of a box that could not change it. */
.customers-page .customer-account-surface .adjust-row__fixed {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-align: right;
  white-space: nowrap;
}

/* Its own full-width row below label/plan/value, matching how plan-value__note
   breaks out of its row in the read view — keeps a long blocked-value
   explanation from starving the label column on this row alone. */
.customers-page .customer-account-surface .adjust-row__note {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--warning);
}

@media (max-width: 768px) {
  .customers-page .customer-account-surface .adjust-row {
    /* Collapsed to two columns, the plan-rate hint and the reset button end
       up sharing this second column across the row's two lines — give it the
       same floor as the button's own width so an adjustable row's label
       column doesn't shrink relative to a row with no button. */
    grid-template-columns: 1fr minmax(125px, auto);
  }
}

/* ------------------------------------------------------------------ *
 * Activation readiness (section 1 + the Activate action card)
 *
 * Deliberately its own visual language, distinct from the Warnings chip and
 * from the section status chips: a blocker is a precondition of going live,
 * not a flag on a live account, and the two must not read as the same thing.
 * ------------------------------------------------------------------ */
.customers-page .customer-account-surface .activation-summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-8) 0 var(--space-4);
}

.customers-page .customer-account-surface .activation-summary__text {
  font-size: var(--text-sm);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .activation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.customers-page .customer-account-surface .activation-list__head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-label);
}

.customers-page .customer-account-surface .activation-list__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

.customers-page .customer-account-surface .activation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

/* The left border is the whole signal at a glance: red = still blocking. */
.customers-page .customer-account-surface .activation-row--blocked {
  border-left: 3px solid var(--danger);
}

.customers-page .customer-account-surface .activation-row--met {
  border-left: 3px solid var(--success);
}

.customers-page .customer-account-surface .activation-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.customers-page .customer-account-surface .activation-row--blocked .activation-row__icon {
  color: var(--danger);
}

.customers-page .customer-account-surface .activation-row--met .activation-row__icon {
  color: var(--success);
}

.customers-page .customer-account-surface .activation-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.customers-page .customer-account-surface .activation-row__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.customers-page .customer-account-surface .activation-row__detail {
  font-size: var(--text-xs);
  color: var(--fg-2);
}

/* What to do about it, kept visually quieter than what is wrong. */
.customers-page .customer-account-surface .activation-row__fix {
  font-size: var(--text-xs);
  color: var(--fg-label);
  font-style: italic;
}

.customers-page .customer-account-surface .activation-row__where {
  font-size: var(--text-2xs);
  color: var(--fg-label);
  white-space: nowrap;
  padding-top: 2px;
}

@media (max-width: 768px) {
  .customers-page .customer-account-surface .activation-row {
    grid-template-columns: auto 1fr;
  }
  .customers-page .customer-account-surface .activation-row__where {
    grid-column: 2;
    white-space: normal;
  }
}

/* Section 5 — document preview modal. The canonical .modal / .modal-content
   rules in app.css do the framing; these only resize it for a document and
   restore the body's ability to grow (app.css collapses .modal-body to
   `flex: 0 1 auto` whenever a footer is present).
   The .doc-preview__body rule below repeats `.modal-content` (it is the
   `.modal-body` inside `.doc-preview`, a `.modal-content`) so its specificity
   is (0,4,0), deliberately beating app.css's `.modal-content:has(.modal-footer)
   .modal-body`, also (0,3,0) — without the extra class this is a specificity
   tie broken only by <link> order in customers.html, and reordering those
   tags would silently break this sizing. */
.customers-page .customer-account-surface .doc-preview {
  max-width: 900px;
  height: 85vh;
  max-height: 85vh;
}

.customers-page .customer-account-surface .modal-content .doc-preview__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface-2);
}

.customers-page .customer-account-surface .doc-preview__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface-0);
}

.customers-page .customer-account-surface .doc-preview__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.customers-page .customer-account-surface .doc-preview__note {
  padding: var(--space-24);
  font-size: var(--text-sm);
  color: var(--fg-label);
  text-align: center;
}

/* PO billing references & rules — the numbers on file, and their edit blocks. */

.customers-page .customer-account-surface .po-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-16);
}

.customers-page .customer-account-surface .po-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-faint);
}

.customers-page .customer-account-surface .po-row:last-child {
  border-bottom: none;
}

.customers-page .customer-account-surface .po-row__number {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* A request-specific row files an instruction, not a number — so it must not read
   as one. */
.customers-page .customer-account-surface .po-row__number--message {
  font-weight: 400;
  font-style: italic;
}

.customers-page .customer-account-surface .po-row__type,
.customers-page .customer-account-surface .po-row__range {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .po-row__range {
  text-align: right;
  white-space: nowrap;
}

/* Out of its date window: still on file, but not what any invoice will print. */
.customers-page .customer-account-surface .po-row--expired {
  opacity: 0.55;
}

.customers-page .customer-account-surface .po-type-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-12);
  border-left: 2px solid var(--border-faint);
  margin-bottom: var(--space-12);
}

.customers-page .customer-account-surface .po-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.customers-page .customer-account-surface .po-entry__dates {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.customers-page .customer-account-surface .po-entry__dates .field__input {
  width: auto;
}

.customers-page .customer-account-surface .po-entry__to {
  font-size: var(--text-xs);
  color: var(--fg-label);
}

.customers-page .customer-account-surface .po-entry__message {
  resize: vertical;
  min-height: 3.5rem;
}

@media (max-width: 640px) {
  .customers-page .customer-account-surface .po-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .customers-page .customer-account-surface .po-row__range {
    grid-column: 1 / -1;
    text-align: left;
  }
}