/*
 * Account settings (account-settings.js), the Settings view in every app.
 * Light content card on the CRY-EX tokens; buttons are the shared .cx-button.
 */
.pbas-root {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--cx-ink);
  font: var(--cx-weight-regular) 1rem/var(--cx-leading) var(--cx-font-sans);
}

.pbas-root *,
.pbas-root *::before,
.pbas-root *::after { box-sizing: border-box; }

.pbas-root h2 { margin: 0; color: var(--cx-ink); font: 700 1.25rem/1.2 var(--cx-font-display); }

.pbas-loading,
.pbas-error,
.pbas-guest {
  display: grid;
  min-height: 260px;
  place-items: center;
  gap: 12px;
  padding: 40px 24px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-dialog);
  background: var(--cx-surface);
  text-align: center;
}

.pbas-loading span {
  width: 34px;
  height: 34px;
  border: 3px solid var(--cx-border);
  border-top-color: var(--cx-ink);
  border-radius: 50%;
  animation: pbas-spin .7s linear infinite;
}

.pbas-error svg,
.pbas-guest img { width: 48px; height: 48px; }
.pbas-error svg { fill: none; stroke: var(--cx-danger); stroke-width: 1.8; }
.pbas-error h2,
.pbas-guest h2 { font-size: clamp(1.45rem, 4vw, 2rem); line-height: var(--cx-leading-tight); }
.pbas-error p,
.pbas-guest p { max-width: 540px; margin: 0; color: var(--cx-ink-muted); }

.pbas-layout {
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pbas-summary,
.pbas-card {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-dialog);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-xs);
}

.pbas-summary {
  position: sticky;
  top: 18px;
  overflow: hidden;
}

/* Dark brand band, like the shell. */
.pbas-summary-head {
  display: grid;
  gap: 15px;
  padding: 24px;
  background: var(--cx-panel);
  color: var(--cx-text);
}

.pbas-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-panel-strong);
  color: var(--cx-text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.pbas-summary-head strong,
.pbas-summary-head small { display: block; margin: 0; overflow-wrap: anywhere; }
.pbas-summary-head strong { font-size: 1.05rem; line-height: 1.25; }
.pbas-summary-head small { margin-top: 4px; color: var(--cx-muted); font-size: .78rem; }
.pbas-summary-body { display: grid; gap: 18px; padding: 22px; }
.pbas-summary-body p { margin: 6px 0 0; color: var(--cx-ink-muted); font-size: .85rem; }
.pbas-outcome { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.pbas-outcome li { display: flex; gap: 9px; align-items: flex-start; color: var(--cx-ink); font-size: .8rem; }
.pbas-outcome svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; fill: none; stroke: var(--cx-success); stroke-width: 2; }

.pbas-quick-links { display: grid; gap: 8px; padding-top: 17px; border-top: 1px solid var(--cx-border); }
.pbas-quick-links a,
.pbas-quick-links button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--cx-radius);
  padding: 10px 12px;
  background: var(--cx-surface-muted);
  color: var(--cx-ink);
  font: 800 .8rem/1.25 var(--cx-font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.pbas-quick-links :is(a, button):hover { border-color: var(--cx-border); }
.pbas-quick-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.pbas-main { display: grid; gap: 18px; min-width: 0; }
.pbas-card { overflow: hidden; }
.pbas-card-head { padding: 22px 24px 17px; border-bottom: 1px solid var(--cx-border); }
.pbas-card-title { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.pbas-card-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--cx-radius-lg);
  background: var(--cx-app-accent-soft, var(--cx-surface-muted));
  color: var(--cx-app-accent-ink, var(--cx-ink));
}
.pbas-card-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pbas-card-head p { max-width: 620px; margin: 5px 0 0; color: var(--cx-ink-muted); font-size: .85rem; }
.pbas-card-body { padding: 22px 24px 24px; }

.pbas-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.pbas-field { display: grid; gap: 7px; min-width: 0; color: var(--cx-ink); font-size: .8rem; font-weight: 800; }
.pbas-field.is-wide { grid-column: 1 / -1; }
.pbas-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  padding: 10px 12px;
  background: var(--cx-surface);
  color: var(--cx-ink);
  font: 500 1rem/1.3 var(--cx-font-sans);
}
.pbas-field input[readonly] { background: var(--cx-surface-muted); color: var(--cx-ink-muted); cursor: default; }
.pbas-field small { color: var(--cx-ink-muted); font-size: .75rem; font-weight: 500; }

.pbas-choice-list { display: grid; margin: 0; padding: 0; border: 0; }
.pbas-choice-list legend { width: 100%; margin-bottom: 6px; color: var(--cx-ink-muted); font-size: .75rem; font-weight: 800; letter-spacing: var(--cx-tracking-caps); text-transform: uppercase; }
.pbas-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 18px;
  min-height: 68px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--cx-border);
  cursor: pointer;
}
.pbas-choice:last-child { border-bottom: 0; }
.pbas-choice strong,
.pbas-choice small { display: block; }
.pbas-choice strong { color: var(--cx-ink); font-size: .88rem; }
.pbas-choice small { margin-top: 3px; color: var(--cx-ink-muted); font-size: .78rem; font-weight: 500; }
.pbas-choice input { width: 22px; height: 22px; margin: 0 11px; cursor: pointer; }

.pbas-form-actions,
.pbas-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cx-border);
}
.pbas-form-status { flex: 1; margin: 0; color: var(--cx-ink-muted); font-size: .8rem; }
.pbas-form-status[data-kind="success"] { color: var(--cx-success); font-weight: 800; }
.pbas-form-status[data-kind="error"] { color: var(--cx-danger); font-weight: 800; }

.pbas-device-box,
.pbas-location-box,
.pbas-security-row,
.pbas-legal-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface-muted);
}
.pbas-device-box { margin-top: 18px; align-items: flex-start; }
.pbas-device-box > div:first-child,
.pbas-location-box > div,
.pbas-security-row > div { min-width: 0; }
.pbas-device-box strong,
.pbas-location-box strong,
.pbas-security-row strong { display: block; color: var(--cx-ink); font-size: .88rem; }
.pbas-device-box p,
.pbas-location-box p,
.pbas-security-row p { margin: 4px 0 0; color: var(--cx-ink-muted); font-size: .78rem; }
.pbas-device-box [data-pb-push-control] { min-width: min(100%, 340px); }
.pbas-device-box .pb-push-control { margin: 0; justify-content: flex-end; }
.pbas-device-box .pb-push-status { max-width: 260px; }

.pbas-inbox { margin-top: 18px; border-top: 1px solid var(--cx-border); padding-top: 18px; }
.pbas-inbox-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pbas-inbox-list { display: grid; gap: 8px; margin-top: 12px; }
.pbas-notification { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface); }
.pbas-notification[data-unread="true"] { border-left: 4px solid var(--cx-info); }
.pbas-notification strong { color: var(--cx-ink); font-size: .82rem; }
.pbas-notification span,
.pbas-notification time { color: var(--cx-ink-muted); font-size: .75rem; }
.pbas-empty { margin: 0; padding: 17px; border-radius: var(--cx-radius); background: var(--cx-surface-muted); color: var(--cx-ink-muted); font-size: .8rem; text-align: center; }

.pbas-security-list { display: grid; gap: 10px; }
.pbas-security-row { background: var(--cx-surface); }
.pbas-security-row.is-danger { margin-top: 8px; border-color: color-mix(in srgb, var(--cx-danger) 30%, var(--cx-border)); background: var(--cx-danger-soft); }
.pbas-legal-grid { align-items: stretch; background: var(--cx-surface); }
.pbas-legal-grid a { display: grid; min-height: 64px; flex: 1; align-content: center; border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 12px 14px; color: var(--cx-ink); text-decoration: none; }
.pbas-legal-grid a:hover { border-color: var(--cx-ink-faint); }
.pbas-legal-grid a strong { font-size: .85rem; }
.pbas-legal-grid a small { margin-top: 3px; color: var(--cx-ink-muted); font-size: .75rem; }
.pbas-location-box { margin-bottom: 16px; }

.pbas-global-status {
  position: fixed;
  z-index: var(--cx-z-toast);
  right: 20px;
  bottom: 20px;
  max-width: min(410px, calc(100vw - 40px));
  margin: 0;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--cx-success) 30%, transparent);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-success-soft);
  color: var(--cx-success);
  box-shadow: var(--cx-shadow-soft);
  font-size: .82rem;
  font-weight: 800;
}
.pbas-global-status[data-kind="error"] { border-color: color-mix(in srgb, var(--cx-danger) 30%, transparent); background: var(--cx-danger-soft); color: var(--cx-danger); }

/* Border, surface, shadow and backdrop come from the shell's dialog rules. */
.pbas-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 0;
}
.pbas-dialog-shell { padding: 25px; }
.pbas-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.pbas-dialog-head h2 { font-size: 1.65rem; line-height: var(--cx-leading-tight); }
.pbas-dialog-head p { margin: 5px 0 0; color: var(--cx-ink-muted); font-size: .82rem; }
.pbas-dialog-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface); color: var(--cx-ink-muted); cursor: pointer; }
.pbas-dialog-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.pbas-dialog-form { display: grid; gap: 14px; }
.pbas-dialog-status { margin: 0; color: var(--cx-danger); font-size: .8rem; }
.pbas-dialog-status:empty { display: none; }

html[data-pb-large-text="true"] { font-size: 112.5%; }
html[data-pb-reduce-motion="true"] *,
html[data-pb-reduce-motion="true"] *::before,
html[data-pb-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

@keyframes pbas-spin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
  .pbas-layout { grid-template-columns: 1fr; }
  .pbas-summary { position: static; }
  .pbas-summary-head { grid-template-columns: auto 1fr; align-items: center; }
  .pbas-summary-body { grid-template-columns: 1fr 1fr; }
  .pbas-quick-links { padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid var(--cx-border); }
}

@media (max-width: 560px) {
  .pbas-summary-head,
  .pbas-summary-body,
  .pbas-card-head,
  .pbas-card-body { padding-left: 18px; padding-right: 18px; }
  .pbas-summary-body { grid-template-columns: 1fr; }
  .pbas-quick-links { padding-top: 16px; padding-left: 0; border-top: 1px solid var(--cx-border); border-left: 0; }
  .pbas-profile-grid { grid-template-columns: 1fr; }
  .pbas-choice { gap: 10px; }
  .pbas-form-actions,
  .pbas-row-actions,
  .pbas-device-box,
  .pbas-location-box,
  .pbas-security-row,
  .pbas-legal-grid { align-items: stretch; flex-direction: column; }
  .pbas-root .cx-button,
  .pbas-dialog .cx-button,
  .pbas-device-box .pb-push-button { width: 100%; }
  .pbas-device-box .pb-push-control { justify-content: stretch; }
  .pbas-global-status { right: 12px; bottom: 76px; max-width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .pbas-loading span { animation: none; border-top-color: currentColor; }
}