/* Neutral Settings chrome. Portal-specific panels continue to own their content. */
.portal-settings {
  --settings-rail: clamp(14rem, 22vw, 17rem);
  --settings-gap: clamp(1rem, 2.4vw, 2rem);
  display: grid;
  grid-template-columns: var(--settings-rail) minmax(0, 1fr);
  width: min(100%, 76rem);
  min-width: 0;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 1rem);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, .06));
}

.portal-settings__navigation,
.portal-settings__detail,
.portal-settings__group,
.portal-settings__rows,
.portal-settings__panel,
.portal-settings__panel > *,
.portal-settings__form-grid,
.portal-settings__stack {
  min-width: 0;
}

.portal-settings__navigation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--color-border, #e2e8f0);
  background: color-mix(in srgb, var(--color-background, #f8fafc) 72%, transparent);
}

.portal-settings__detail {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
}

.portal-settings__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  width: 100%;
  padding: .7rem .75rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  color: var(--color-text, #0f172a);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.portal-settings__row:hover,
.portal-settings__row:focus-visible,
.portal-settings__row.is-active {
  border-color: color-mix(in srgb, #237fff 18%, var(--color-border, #e2e8f0));
  background: color-mix(in srgb, #237fff 8%, var(--color-surface, #fff));
  color: var(--color-brand-700, #164fbb);
  outline: none;
}

.portal-settings__row-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .65rem;
  background: color-mix(in srgb, #237fff 10%, var(--color-surface, #fff));
  color: currentColor;
}

.portal-settings__row-icon svg { width: 1.05rem; height: 1.05rem; }
.portal-settings__row-body { display: grid; min-width: 0; gap: .16rem; }
.portal-settings__row-body > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-settings__row-label { font-size: .88rem; font-weight: 700; }
.portal-settings__row-meta { color: var(--color-text-secondary, #64748b); font-size: .74rem; }
.portal-settings__row-chevron { color: var(--color-text-muted, #94a3b8); font-size: 1.25rem; line-height: 1; }
.portal-settings__row-alert { width: .5rem; height: .5rem; border-radius: 999px; background: #ef4444; }

.portal-settings__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.portal-settings__panel-header > div:first-child { min-width: 0; }
.portal-settings__kicker { margin: 0 0 .35rem; color: var(--color-brand-600, #1764e8); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.portal-settings__panel-header h2 { margin: 0; color: var(--color-text, #0f172a); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; }
.portal-settings__description { max-width: 42rem; margin: .45rem 0 0; color: var(--color-text-secondary, #64748b); font-size: .9rem; line-height: 1.55; }
.portal-settings__header-action { flex: 0 0 auto; }
.portal-settings__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.portal-settings__status-list { display: grid; gap: .65rem; }
.portal-settings__status-row { text-decoration: none; }
.portal-settings__status-row > div { min-width: 0; }
.portal-settings__status-row p { margin: .25rem 0 0; }
.portal-settings__status-value { flex: 0 0 auto; color: var(--color-brand-700, #164fbb); font-size: .78rem; font-weight: 800; text-align: right; }
.portal-settings__mobile-header { display: none; }

.portal-tooltip { position: relative; display: inline-flex; vertical-align: middle; }
.portal-tooltip__trigger { display: inline-grid; width: 1.3rem; height: 1.3rem; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary, #64748b); line-height: 1; cursor: help; appearance: none; }
.portal-tooltip__trigger svg { width: 1.05rem; height: 1.05rem; }
.portal-tooltip__trigger:hover,
.portal-tooltip__trigger:focus-visible { color: var(--color-brand-600, #1764e8); outline: 2px solid color-mix(in srgb, #237fff 28%, transparent); outline-offset: 2px; }
.portal-tooltip__content { position: absolute; z-index: 100; top: calc(100% + .5rem); right: 0; width: min(18rem, 72vw); padding: .65rem .75rem; border-radius: .6rem; background: #0f172a; color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .2); font-size: .76rem; font-weight: 500; line-height: 1.45; text-align: left; opacity: 0; pointer-events: none; transform: translateY(-.25rem); transition: opacity .15s ease, transform .15s ease; }
.portal-tooltip:hover .portal-tooltip__content,
.portal-tooltip:focus-within .portal-tooltip__content,
.portal-tooltip.is-open .portal-tooltip__content { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Legacy settings rules previously uppercased and enlarged helper copy. The
   new contract keeps the explanation in the accessible info popover instead. */
#main-content .portal-settings .portal-settings__panel-header h2 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
#main-content .portal-settings .portal-settings__description,
#main-content .portal-settings .plumber-profile-panel__description {
  display: none !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
#main-content .portal-settings .portal-settings__detail { overflow: visible; }
#main-content .portal-settings .portal-settings__panel-header { overflow: visible; }

@media (max-width: 900px) {
  .portal-settings { grid-template-columns: minmax(12rem, 30%) minmax(0, 1fr); }
  .portal-settings__navigation { padding-inline: .75rem; }
  .portal-settings__detail { padding: 1.25rem; }
}

@media (max-width: 700px) {
  .portal-settings { display: block; width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .portal-settings.is-section-page .portal-settings__navigation { display: none; }
  .portal-settings:not(.is-section-page) .portal-settings__detail { display: none; }
  .portal-settings__navigation { border: 0; padding: 0; background: transparent; }
  .portal-settings__detail { gap: 1rem; padding: 0; overflow: visible; }
  .portal-settings__mobile-header { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .25rem 0 .75rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
  .portal-settings__mobile-header > a { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .7rem; color: var(--color-text, #0f172a); font-size: 1.65rem; line-height: 1; text-decoration: none; }
  .portal-settings__mobile-header > a:hover,
  .portal-settings__mobile-header > a:focus-visible { background: color-mix(in srgb, #237fff 9%, transparent); outline: none; }
  .portal-settings__mobile-header > div { display: grid; gap: .12rem; min-width: 0; }
  .portal-settings__mobile-header span { color: var(--color-text-secondary, #64748b); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .portal-settings__mobile-header strong { overflow: hidden; color: var(--color-text, #0f172a); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
  .portal-settings__panel-header { display: block; padding-bottom: .85rem; }
  .portal-settings__header-action { margin-top: .75rem; }
  .portal-settings__header-action .btn { width: 100%; }
  .portal-settings__row { min-height: 4rem; padding: .75rem .5rem; border-color: var(--color-border, #e2e8f0); background: var(--color-surface, #fff); }
  .portal-settings__row + .portal-settings__row { margin-top: .5rem; }
  .portal-settings__row-body > * { white-space: normal; }
  .portal-settings__status-value { align-self: flex-start; text-align: left; }
  .portal-settings__actions { position: static; align-items: stretch; flex-direction: column-reverse; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--color-border, #e2e8f0); background: transparent; }
  .portal-settings__actions .btn { width: 100%; }
  .portal-settings__form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .portal-settings__panel--danger { margin-top: .5rem; }
  .portal-tooltip__content { position: fixed; top: auto; right: 1rem; bottom: 1rem; left: 1rem; width: auto; }
}

/* Settings v2: approved focused detail experience. The root mobile Settings
   list intentionally remains on the compatibility rules above. */
.portal-settings-v2 .portal-settings-detail-header,
.portal-settings-v2 .portal-settings-mobile-header { display: none; }

.portal-settings-detail-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .15rem 0 1.15rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.portal-settings-detail-header__copy { min-width: 0; }
.portal-settings-detail-header__copy > p { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; color: var(--color-text-tertiary, #94a3b8); font-size: .7rem; font-weight: 700; }
.portal-settings-detail-header__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.portal-settings-detail-header h1 { margin: 0; color: var(--color-text-primary, #0f172a); font-size: 1.35rem; line-height: 1.25; }
.portal-settings-detail-header__copy > span { display: block; max-width: 42rem; margin-top: .35rem; color: var(--color-text-secondary, #64748b); font-size: .78rem; line-height: 1.45; }
.portal-settings-detail-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.portal-settings-state { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .2rem .55rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: var(--color-background, #f8fafc); color: var(--color-text-secondary, #64748b); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.portal-settings-state.tone-success { border-color: #b7e4c7; background: #effaf3; color: #16713b; }
.portal-settings-state.tone-warning { border-color: #f5d28a; background: #fff8e8; color: #9a5a00; }
.portal-settings-state.tone-danger { border-color: #fecaca; background: #fff1f2; color: #b42318; }

.portal-settings-mobile-header { align-items: center; gap: .7rem; min-height: 3rem; padding: .15rem 0 .75rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.portal-settings-mobile-header__back { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--color-border, #e2e8f0); border-radius: .5rem; background: var(--color-surface, #fff); color: var(--color-text-primary, #0f172a); }
.portal-settings-mobile-header__back svg { width: 1rem; height: 1rem; }
.portal-settings-mobile-header > div { display: flex; min-width: 0; align-items: baseline; gap: .65rem; }
.portal-settings-mobile-header span { color: var(--color-brand-700, #164fbb); font-size: .7rem; font-weight: 700; }
.portal-settings-mobile-header strong { overflow: hidden; color: var(--color-text-primary, #0f172a); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

.portal-settings-section { min-width: 0; border: 1px solid var(--color-border, #e2e8f0); border-radius: .7rem; background: var(--color-surface, #fff); }
.portal-settings-section__header { padding: .9rem 1rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.portal-settings-section__header h2 { margin: 0; color: var(--color-text-primary, #0f172a); font-size: .86rem; }
.portal-settings-section__header p { margin: .25rem 0 0; color: var(--color-text-secondary, #64748b); font-size: .73rem; line-height: 1.45; }
.portal-settings-section__body { padding: 1rem; }
.portal-settings-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.portal-settings-section-heading h3 { margin: 0; color: var(--color-text-primary, #0f172a); font-size: .86rem; }
.portal-settings-section-heading p { margin: .2rem 0 0; color: var(--color-text-secondary, #64748b); font-size: .72rem; line-height: 1.45; }
.portal-settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.portal-settings-action-footer { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1.25rem; padding: .8rem 1rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: .6rem; background: color-mix(in srgb, var(--color-background, #f8fafc) 70%, transparent); }
.portal-settings-note { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .9rem; border: 1px solid #cfe0fa; border-radius: .6rem; background: #f5f9ff; color: #194e96; }
.portal-settings-note > span { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; }
.portal-settings-note svg { width: 1rem; height: 1rem; }
.portal-settings-note strong { display: block; font-size: .75rem; }
.portal-settings-note p { margin: .2rem 0 0; font-size: .7rem; line-height: 1.45; }
.portal-settings-empty { padding: 1.25rem; border: 1px dashed var(--color-border, #cbd5e1); border-radius: .65rem; text-align: center; }
.portal-settings-empty strong { display: block; font-size: .85rem; }
.portal-settings-empty p { margin: .3rem auto 0; max-width: 28rem; color: var(--color-text-secondary, #64748b); font-size: .75rem; }
.portal-settings-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #fecaca; border-radius: .65rem; background: #fffafa; }
.portal-settings-danger-zone strong { color: #b42318; font-size: .82rem; }
.portal-settings-danger-zone p { margin: .25rem 0 0; color: #7f1d1d; font-size: .72rem; }

.portal-settings-status-row,
.portal-settings-toggle-row,
.portal-settings-link-row,
.portal-settings-item-row { min-width: 0; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.portal-settings-status-row:last-child,
.portal-settings-toggle-row:last-child,
.portal-settings-link-row:last-child,
.portal-settings-item-row:last-child { border-bottom: 0; }
.portal-settings-toggle-list { overflow: hidden; padding: .1rem 1rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: .65rem; background: var(--color-surface, #fff); }
.portal-settings-status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; color: inherit; text-decoration: none; }
.portal-settings-status-row strong { display: block; font-size: .78rem; }
.portal-settings-status-row p { margin: .2rem 0 0; color: var(--color-text-secondary, #64748b); font-size: .7rem; }
.portal-settings-toggle-row { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem 0; }
.portal-settings-toggle-row__icon,
.portal-settings-link-row__icon,
.portal-settings-item-row__icon { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .45rem; background: #f2f7ff; color: var(--color-brand-700, #164fbb); }
.portal-settings-toggle-row svg,
.portal-settings-link-row svg,
.portal-settings-item-row svg { width: .95rem; height: .95rem; }
.portal-settings-toggle-row label { min-width: 0; cursor: pointer; }
.portal-settings-toggle-row strong,
.portal-settings-link-row strong,
.portal-settings-item-row strong { display: block; color: var(--color-text-primary, #0f172a); font-size: .78rem; }
.portal-settings-toggle-row small,
.portal-settings-link-row small { display: block; margin-top: .15rem; color: var(--color-text-secondary, #64748b); font-size: .68rem; line-height: 1.35; }
.portal-settings-link-row { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .75rem 0; color: inherit; text-decoration: none; }
.portal-settings-links-v2 { overflow: hidden; padding: 0 1rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: .65rem; background: var(--color-surface, #fff); }
.portal-settings-link-row em { color: var(--color-text-secondary, #64748b); font-size: .68rem; font-style: normal; }
.portal-settings-link-row__arrow { color: var(--color-text-tertiary, #94a3b8); }
.portal-settings-item-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .9rem 0; }
.portal-settings-item-row p { margin: .22rem 0 0; color: var(--color-text-secondary, #64748b); font-size: .7rem; line-height: 1.4; }
.portal-settings-item-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }

@media (min-width: 1024px) {
  /* Settings owns the desktop workspace rail after entering Profile. The
     portal page keeps its navigation markup for the mobile landing list, but
     it must not create a second desktop rail beside the shell sidebar. */
  .app-shell--settings .app-sidebar {
    background: var(--color-surface, #fff);
  }

  .app-sidebar-settings {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem .75rem 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-surface, #fff);
  }

  .app-sidebar-settings__top {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }

  .app-sidebar-settings__back,
  .app-sidebar-settings__logout,
  .app-sidebar-settings__item {
    color: var(--color-text-primary, #0f172a);
    text-decoration: none;
  }

  .app-sidebar-settings__back {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .625rem;
    border-radius: .55rem;
    color: var(--color-brand-700, #164fbb);
  }

  .app-sidebar-settings__back:hover,
  .app-sidebar-settings__back:focus-visible {
    background: #eaf2ff;
    outline: none;
  }

  .app-sidebar-settings__back-icon,
  .app-sidebar-settings__item-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
  }

  .app-sidebar-settings__back-icon { width: 1.25rem; height: 1.25rem; }
  .app-sidebar-settings__back-icon svg { width: .95rem; height: .95rem; }

  .app-sidebar-settings__heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .35rem;
    padding: 0 .25rem;
  }

  .app-sidebar-settings__heading span,
  .app-sidebar-settings__group h2 {
    color: var(--color-text-secondary, #64748b);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .app-sidebar-settings__heading strong {
    color: var(--color-text-primary, #0f172a);
    font-size: .98rem;
    line-height: 1.2;
  }

  .app-sidebar-settings__groups {
    display: grid;
    gap: .7rem;
    min-width: 0;
  }

  .app-sidebar-settings__group { min-width: 0; }
  .app-sidebar-settings__group h2 { margin: .4rem .65rem .2rem; }
  .app-sidebar-settings__items { display: grid; gap: .12rem; }

  .app-sidebar-settings__item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .625rem .75rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: var(--color-text-secondary, #64748b);
    font-size: .875rem;
    font-weight: 500;
  }

  .app-sidebar-settings__item:hover,
  .app-sidebar-settings__item:focus-visible,
  .app-sidebar-settings__item.is-active {
    border-color: color-mix(in srgb, #237fff 14%, var(--color-border, #e2e8f0));
    background: #eaf2ff;
    color: var(--color-brand-700, #164fbb);
    outline: none;
  }

  .app-sidebar-settings__item-icon { width: 1.2rem; height: 1.2rem; }
  .app-sidebar-settings__item-icon svg { width: .95rem; height: .95rem; }
  .app-sidebar-settings__item-copy { min-width: 0; }
  .app-sidebar-settings__item-copy strong { display: block; overflow: hidden; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; }
  .app-sidebar-settings__item-copy small { display: none; }
  .app-sidebar-settings__item-alert { width: .42rem; height: .42rem; border-radius: 999px; background: #ef4444; }

  .app-sidebar-settings__logout {
    display: flex;
    min-height: 2.35rem;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding: .45rem .6rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #64748b);
    font-size: .74rem;
  }

  .app-sidebar-settings__logout:hover,
  .app-sidebar-settings__logout:focus-visible { color: var(--color-brand-700, #164fbb); outline: none; }

  .app-shell--settings #main-content .portal-settings {
    display: block;
    width: min(100%, 90rem);
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell--settings #main-content .portal-settings__navigation { display: none; }

  .app-shell--settings #main-content .portal-settings__detail {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem 1.35rem 1.5rem;
    overflow: visible;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: .75rem;
    background: var(--color-surface, #fff);
    box-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, .06));
  }

  .app-shell--settings #main-content .portal-settings:not(.is-section-page) .portal-settings__detail {
    display: grid;
  }

  #main-content .portal-settings-v2 { display: block; width: min(100%, 90rem); grid-template-columns: minmax(0, 1fr); min-height: 39rem; align-items: stretch; overflow: hidden; border-radius: .75rem; }
  /* The application shell owns the desktop rail. Keep the legacy in-page
     navigation available for the mobile Settings landing/list mode only. */
  #main-content .portal-settings-v2 .portal-settings__navigation { display: none; position: relative; top: auto; align-self: stretch; gap: .15rem; max-height: none; padding: 1rem .8rem; overflow: visible; border: 0; border-right: 1px solid var(--color-border, #e2e8f0); border-radius: 0; background: var(--color-background, #f8fafc); box-shadow: none; }
  #main-content .portal-settings-v2 .portal-settings__identity,
  #main-content .portal-settings-v2 .portal-settings__summary,
  #main-content .portal-settings-v2 .plumber-profile-identity,
  #main-content .portal-settings-v2 .plumber-profile-home-summary,
  #main-content .portal-settings-v2 .plumber-profile-preview { display: none; }
  #main-content .portal-settings-v2 .portal-settings__detail { align-content: start; gap: 1rem; padding: 1.35rem 1.5rem 1.5rem; overflow: visible; background: var(--color-surface, #fff); }
  #main-content .portal-settings-v2.is-section-page .portal-settings-detail-header { display: flex; }
  #main-content .portal-settings-v2 .portal-settings__panel,
  #main-content .portal-settings-v2 .plumber-profile-panel { min-height: 0; gap: 1rem; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #main-content .portal-settings-v2 .portal-settings__panel-header,
  #main-content .portal-settings-v2 .plumber-profile-panel__header { padding: 0 0 .85rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
  #main-content .portal-settings-v2.is-section-page .portal-settings__panel,
  #main-content .portal-settings-v2.is-section-page .plumber-profile-panel { padding: 1rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: .65rem; background: var(--color-surface, #fff); }
  #main-content .portal-settings-v2 .portal-settings__row,
  #main-content .portal-settings-v2 .plumber-profile-row { min-height: 2.3rem; margin: .08rem 0; padding: .48rem .65rem; border: 0; border-radius: .5rem; background: transparent; box-shadow: none; }
  #main-content .portal-settings-v2 .portal-settings__row:hover,
  #main-content .portal-settings-v2 .portal-settings__row.is-active,
  #main-content .portal-settings-v2 .plumber-profile-row:hover,
  #main-content .portal-settings-v2 .plumber-profile-row.is-active { background: #eaf2ff; color: var(--color-brand-700, #164fbb); }
}

@media (max-width: 1023px) {
  .app-sidebar-settings { display: none; }

  .app-shell--settings #main-content .portal-settings {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell--settings #main-content .portal-settings__navigation { display: flex; }
  .app-shell--settings #main-content .portal-settings__detail { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

  #main-content .portal-settings-v2.is-section-page { display: block; width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #main-content .portal-settings-v2.is-section-page .portal-settings__navigation { display: none; }
  #main-content .portal-settings-v2.is-section-page .portal-settings__detail { display: grid; gap: .85rem; padding: 0; overflow: visible; background: transparent; }
  #main-content .portal-settings-v2.is-section-page .portal-settings-mobile-header { display: none; }
  #main-content .portal-settings-v2.is-section-page .portal-settings__mobile-header { display: none; }
  #main-content .portal-settings-v2.is-section-page .portal-settings-detail-header { display: none; }
  #main-content .portal-settings-v2.is-section-page .portal-settings__panel,
  #main-content .portal-settings-v2.is-section-page .plumber-profile-panel { gap: .9rem; padding: .9rem; overflow: visible; border: 1px solid var(--color-border, #e2e8f0); border-radius: .65rem; background: var(--color-surface, #fff); box-shadow: none; }
  .portal-settings-form-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-settings-action-footer,
  #main-content .portal-settings-v2.is-section-page .portal-settings__actions,
  #main-content .portal-settings-v2.is-section-page .plumber-profile-form-actions { position: static; display: flex; flex-direction: column-reverse; align-items: stretch; margin: .25rem 0 0; padding: .8rem 0 0; border: 0; border-top: 1px solid var(--color-border, #e2e8f0); background: transparent; }
  .portal-settings-action-footer .btn,
  #main-content .portal-settings-v2.is-section-page .portal-settings__actions .btn,
  #main-content .portal-settings-v2.is-section-page .plumber-profile-form-actions .btn { width: 100%; min-height: 2.75rem; justify-content: center; }
  .portal-settings-danger-zone { align-items: stretch; flex-direction: column; }
  .portal-settings-item-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .portal-settings-item-row__actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Settings detail pages use the reference app header on mobile. The regular
   workspace brand/search header remains intact for Settings landing pages and
   every other portal workflow. */
.app-topbar__settings-mobile-title { display: none; }
@media (max-width: 1023px) {
  .app-topbar--settings-detail .app-topbar__left { display: none; }
  .app-topbar--settings-detail > div > .flex.items-center.justify-between { gap: .5rem; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: .5rem; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title > a { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid #dbe4f0; border-radius: .5rem; color: #0f172a; background: #fff; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title svg { width: 1rem; height: 1rem; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title > div { display: grid; min-width: 0; gap: .05rem; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title span { color: #1764e8; font-size: .64rem; font-weight: 800; line-height: 1; }
  .app-topbar--settings-detail .app-topbar__settings-mobile-title strong { overflow: hidden; color: #0f172a; font-size: .84rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .app-topbar--settings-detail .app-topbar__actions { flex: 0 0 auto; gap: .1rem; }
  .app-topbar--settings-detail .app-topbar__actions > button { padding: .45rem; }
  .app-topbar--settings-detail .app-topbar__mobile-search { display: none; }
  .app-topbar--settings-detail .app-topbar__actions #user-menu-btn { margin-left: .1rem; }
  .app-topbar--settings-detail .app-topbar__actions #theme-toggle { display: none; }
  #main-content .portal-settings-v2.is-section-page { padding-top: 0; }
  #main-content .portal-settings-v2.is-section-page .portal-settings__detail { gap: .75rem; }
}

html.dark .portal-settings { border-color: var(--color-border, #334155); background: var(--color-surface, #0f172a); }
html.dark .portal-settings__navigation { border-color: var(--color-border, #334155); background: color-mix(in srgb, #0f172a 88%, transparent); }
html.dark .portal-settings__row { color: #e2e8f0; }
html.dark .portal-settings__row-meta,
html.dark .portal-settings__description { color: #94a3b8; }
html.dark .portal-settings__panel-header { border-color: var(--color-border, #334155); }

/* Final shared Settings frame. The desktop application sidebar is the single
   navigation rail; this content wrapper keeps every detail header above its
   own activity surface instead of allowing the browser to place it in a
   narrow implicit grid column. */
.portal-settings__content {
  display: grid;
  min-width: 0;
  width: 100%;
  align-content: start;
  gap: 1rem;
}

/* The Settings landing header and detail header use the same compact title
   rhythm. The landing page keeps its existing list content; only its outer
   title/action row is normalized here. */
.settings-page-header {
  width: 100%;
  min-width: 0;
  margin: 0 0 1rem;
}

.settings-page-header .page-header-inner {
  align-items: center;
  gap: 1rem;
}

.settings-page-header .page-title {
  font-size: 1.55rem;
  line-height: 1.2;
}

.settings-page-header .page-description {
  margin-top: .3rem;
  font-size: .82rem;
}

.settings-page-header .page-actions {
  align-items: center;
  gap: .6rem;
}

/* The root Settings URL uses the same Overview detail as /settings/overview
   on desktop. Keep the existing landing title for the mobile list, where the
   detail canvas is intentionally hidden. */
@media (min-width: 1024px) {
  .settings-page-header { display: none; }
}

@media (min-width: 1024px) {
  #main-content .portal-settings-v2 {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #main-content .portal-settings-v2 > .portal-settings__content {
    grid-template-columns: minmax(0, 1fr);
  }

  #main-content .portal-settings-v2 > .portal-settings__content > .portal-settings__detail {
    width: 100%;
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    overflow: visible;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: .75rem;
    background: var(--color-surface, #fff);
    box-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, .06));
  }

  #main-content .portal-settings-v2.is-section-page > .portal-settings__content > .portal-settings__detail {
    gap: 1rem;
  }

  #main-content .portal-settings-v2 > .portal-settings__content > .portal-settings-detail-header {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: .15rem .15rem .9rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }

  #main-content .portal-settings-v2 > .portal-settings__content > .portal-settings-detail-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
  }

  #main-content .portal-settings-v2 > .portal-settings__content > .portal-settings-detail-header__copy > span {
    font-size: .82rem;
  }
}

@media (max-width: 1023px) {
  #main-content .portal-settings-v2 > .portal-settings__content {
    gap: .75rem;
  }

  #main-content .portal-settings-v2.is-section-page > .portal-settings__content > .portal-settings-detail-header {
    display: none;
  }

  #main-content .portal-settings-v2.is-section-page > .portal-settings__content > .portal-settings__detail {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Match the primary application rail: one compact top row, the same active
   blue treatment, and no second background tone around the settings links. */
@media (min-width: 1024px) {
  .app-sidebar-settings {
    gap: .6rem;
    padding: 1rem .65rem 1.25rem;
    background: #fff;
  }

  .app-sidebar-settings__top {
    min-height: 2.75rem;
    gap: .25rem;
    padding: 0 .15rem .75rem;
  }

  .app-sidebar-settings__back {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
  }

  .app-sidebar-settings__item {
    min-height: 2.75rem;
    border-radius: .75rem;
    padding: .625rem .75rem;
    color: #475569;
  }

  .app-sidebar-settings__item:hover,
  .app-sidebar-settings__item:focus-visible,
  .app-sidebar-settings__item.is-active {
    border-color: transparent;
    background: #eff6ff;
    color: #164fbb;
  }
}

/* The legacy stylesheet contains high-specificity portal rules. Keep this
   compatibility layer specific enough to make the shared shell authoritative
   while the older selectors are retired page family by page family. */
#main-content .portal-settings {
  width: min(100%, 76rem);
  min-width: 0;
  grid-template-columns: var(--settings-rail) minmax(0, 1fr);
  overflow: visible;
}
#main-content .portal-settings .portal-settings__detail { min-width: 0; overflow: visible; }
#main-content .portal-settings .portal-settings__row { min-width: 0; width: 100%; }
#main-content .portal-settings .portal-settings__panel { min-width: 0; }

@media (max-width: 700px) {
  #main-content .portal-settings { display: block; width: 100%; overflow: visible; }
  #main-content .portal-settings:not(.is-section-page) .portal-settings__detail { display: none; }
  #main-content .portal-settings.is-section-page .portal-settings__navigation { display: none; }
  #main-content .portal-settings .portal-settings__detail { padding: 0; overflow: visible; }
  #main-content .portal-settings .portal-settings__actions { position: static; margin: 0; padding: 1rem 0 0; }
}

/* Final shared Settings responsive contract: desktop (1024px+) and mobile
   (<1024px) only. This deliberately overrides older intermediate layouts. */
#main-content .portal-settings-v2[data-settings-shell="shared"] {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1023px) {
  #main-content .portal-settings-v2[data-settings-shell="shared"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .portal-settings__landing-nav,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-nav {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-width: 0;
    width: 100%;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .portal-settings__identity,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-identity {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: .85rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .portal-settings__summary,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-home-summary,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-preview {
    display: none;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .portal-settings__section-list,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-section-list {
    display: grid;
    gap: .6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-section-list h3 {
    margin: .1rem 0 -.15rem;
    padding: 0 .55rem;
    color: var(--color-text-secondary);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }

  #main-content .plumber-page .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-section-list > .plumber-profile-section:first-child {
    display: none;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-section {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) minmax(0, 35%) .75rem;
    grid-template-rows: minmax(1.35rem, auto);
    align-items: center;
    gap: .65rem;
    min-width: 0;
    min-height: 3.35rem;
    margin: 0;
    padding: .7rem .85rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row.has-alert,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row.has-badge { grid-template-columns: 1.35rem minmax(0, 1fr) minmax(0, 35%) auto .75rem; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row.has-alert.has-badge { grid-template-columns: 1.35rem minmax(0, 1fr) minmax(0, 35%) auto auto .75rem; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row:last-child { border-bottom: 0; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row:hover,
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row.is-active { background: rgba(35,127,255,.07); box-shadow: none; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__icon { display: inline-flex; width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-brand-500) 18%, transparent); border-radius: .45rem; background: color-mix(in srgb, var(--color-brand-500) 9%, var(--color-surface)); color: var(--color-brand-700); }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__icon svg { width: .82rem; height: .82rem; stroke-width: 2; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__body { display: flex; min-width: 0; height: 1.35rem; align-items: center; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__label { display: block; min-width: 0; overflow: hidden; color: var(--color-text-primary); font-size: .78rem; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__meta { display: flex; min-width: 0; max-width: 9rem; height: 1.35rem; align-items: center; justify-self: end; overflow: hidden; color: var(--color-text-secondary); font-size: .64rem; line-height: 1; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__meta.is-empty { visibility: hidden; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__badge { display: inline-flex; align-items: center; font-size: .62rem; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__alert { display: block; width: .45rem; height: .45rem; justify-self: center; }
  #main-content .portal-settings-v2[data-settings-shell="shared"] .plumber-profile-row__chevron { display: inline-flex; width: .75rem; align-items: center; justify-content: flex-end; color: var(--color-text-secondary); font-size: .95rem; line-height: 1; }

  #main-content .portal-settings-v2[data-settings-shell="shared"].is-section-page .portal-settings__landing-nav,
  #main-content .portal-settings-v2[data-settings-shell="shared"].is-section-page .plumber-profile-nav { display: none; }
  #main-content .portal-settings-v2[data-settings-shell="shared"]:not(.is-section-page) .portal-settings__detail { display: none; }
}