/* Compact Settings without fixing the page height or clipping longer content. */
@media screen {
  body.app-ready.bcp-workspace > main:has(#settings.active) {
    padding-bottom:12px!important;
  }
  body.app-ready.bcp-workspace:has(#settings.active) #bcpWorkspaceTrail {
    min-height:42px;
    padding:6px 0;
    margin-bottom:8px;
  }
  body.app-ready.bcp-workspace:has(#settings.active) .bc-footer-inner {
    min-height:52px;
    padding-top:8px;
    padding-bottom:8px;
  }
  body.app-ready #settings {padding-top:0}
  #settings .ps-header {gap:12px;padding:4px 0 12px;margin-bottom:14px}
  #settings .ps-eyebrow {margin-bottom:4px}
  body.app-ready #settings .ps-header h2 {font-size:25px!important;margin:0 0 4px}
  #settings .ps-header p {font-size:13px;line-height:1.4}
  #settings .ps-layout {grid-template-columns:200px minmax(0,1fr);gap:18px;max-width:none}
  #settings .ps-nav {gap:4px}
  body.app-ready #settings .ps-nav button {min-height:54px;padding:9px 10px;gap:9px}
  #settings .ps-nav button small {margin-top:3px;line-height:1.3}
  #settings .ps-nav-note {padding:12px 10px;line-height:1.5}
  #settings :is(#ps-account,#ps-recovery) {gap:10px;align-items:start}
  #settings :is(#ps-account,#ps-recovery) .ps-card-head {padding:12px 16px;gap:10px}
  #settings :is(#ps-account,#ps-recovery) .ps-card-head h3 {margin-bottom:4px;font-size:16px!important}
  #settings :is(#ps-account,#ps-recovery) .ps-card-head p {line-height:1.4}
  #settings #ps-account .ps-profile {padding:14px 16px;gap:12px}
  #settings #ps-account .ps-avatar {width:42px;height:42px;flex-shrink:0;border-radius:11px;font-size:16px}
  #settings #ps-account .ps-profile strong {font-size:16px}
  #settings #ps-account .ps-profile span {margin-top:3px}
  #settings #ps-account .ps-facts {padding:0 16px 14px;gap:12px}
  #settings #ps-account .ps-facts dt {margin-bottom:4px}
  #settings #ps-account .ps-facts dd {font-size:13px;line-height:1.4}
  #settings #ps-account .ps-card-footer {padding:10px 16px;gap:12px}
  #settings :is(#ps-account,#ps-recovery) .ps-info {padding:4px 12px}
  #settings :is(#ps-account,#ps-recovery) .ps-info p {margin:4px 0;line-height:1.4}

  /* Preserve the existing label/input associations and password actions. */
  #settings #bcpCloudPasswordForm {
    padding:12px 16px!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px 12px!important;
    align-items:end;
  }
  #settings #bcpCloudPasswordForm > label {margin:0;font-size:12px;line-height:1.4;min-width:0}
  #settings #bcpCloudPasswordForm > input {min-width:0;min-height:40px;padding:9px 10px!important;font-size:14px!important}
  #settings #bcpCloudPasswordForm > label[for="bcpCloudCurrent"] {grid-area:1 / 1}
  #settings #bcpCloudPasswordForm > #bcpCloudCurrent {grid-area:2 / 1}
  #settings #bcpCloudPasswordForm > label[for="bcpCloudNew"] {grid-area:1 / 2}
  #settings #bcpCloudPasswordForm > #bcpCloudNew {grid-area:2 / 2}
  #settings #bcpCloudPasswordForm > label[for="bcpCloudConfirm"] {grid-area:1 / 3}
  #settings #bcpCloudPasswordForm > #bcpCloudConfirm {grid-area:2 / 3}
  #settings #bcpCloudPasswordForm > button {grid-area:3 / 1 / auto / -1;margin-top:5px;min-height:38px}
  #settings #bcpCloudPasswordStatus {grid-column:1 / -1;min-height:0!important;font-size:13px;overflow-wrap:anywhere}
  #settings #bcpCloudPasswordStatus:empty {display:none}
  #settings #bcpSettingsPasswordRecovery {padding:0 16px 12px!important}
  #settings #ps-account .bc-credential-head {padding:12px 16px;gap:10px}
  #settings #ps-account .bc-credential-body {padding:12px 16px}
  #settings #ps-account .bc-credentials-grid {gap:10px 12px}
  #settings #ps-account .bc-credential-footer {padding:10px 16px;gap:10px}

  #settings #ps-recovery {grid-template-columns:repeat(2,minmax(0,1fr))}
  #settings #ps-recovery > :is(.care-panel,#bcpSyncConflicts) {grid-column:1 / -1}
  #settings #ps-recovery .care-panel {margin:0;padding:14px 16px;font-size:13px;line-height:1.4}
  #settings #ps-recovery .care-panel > .care-heading {margin-bottom:8px}
  #settings #ps-recovery .care-panel h2 {font-size:19px!important;margin:2px 0 4px!important;overflow-wrap:anywhere}
  #settings #ps-recovery .care-panel h3 {font-size:15px;margin:6px 0}
  #settings #ps-recovery .care-eyebrow {font-size:10px}
  #settings #ps-recovery .care-columns {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px}
  #settings #ps-recovery .care-columns > section {min-width:0}
  #settings #ps-recovery .care-heading {gap:8px}
  #settings #ps-recovery .care-checklist {margin:6px 0}
  #settings #ps-recovery .care-checklist li {padding:5px 0;gap:8px}
  #settings #ps-recovery .care-checklist li > span:nth-child(2) {min-width:0;overflow-wrap:anywhere}
  #settings #ps-recovery .care-panel p {margin:8px 0;line-height:1.45}
  #settings #ps-recovery .care-backup-state {padding:8px 10px}
  #settings #ps-recovery .care-panel button {min-height:36px;font-size:12px;padding:6px 10px;white-space:normal;max-width:100%}
  #settings #ps-recovery .care-actions {gap:6px}
  #settings #ps-recovery .care-panel [data-status]:empty {display:none}
  #settings #ps-recovery .care-history {margin-top:10px;padding-top:10px}
  #settings #ps-recovery .care-history summary {padding:3px 0}
  #settings #bcpSyncConflicts {margin:0!important;padding:12px 16px!important;min-width:0;overflow-wrap:anywhere}
  #settings #bcpSyncConflicts h3 {margin:0 0 6px;font-size:16px}
  #settings #bcpSyncConflicts p {margin:6px 0 10px;font-size:13px;line-height:1.4}
}

/* Account cards share a row when there is enough room for both forms. */
@media screen and (min-width:1200px) {
  #settings #ps-account {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  #settings #ps-account > .ps-info {grid-column:1 / -1}
}
@media screen and (min-width:761px) and (max-width:1000px) {
  #settings .ps-layout {grid-template-columns:174px minmax(0,1fr);gap:12px}
}
@media screen and (max-width:760px) {
  #settings .ps-layout {grid-template-columns:1fr;gap:12px}
  #settings .ps-header {padding-bottom:10px;margin-bottom:10px}
  body.app-ready #settings .ps-nav button {min-height:48px;padding:7px 9px;gap:7px}
  #settings #ps-account .ps-facts {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #settings #ps-account .ps-facts > div:last-child {grid-column:1 / -1}
  #settings #ps-recovery {grid-template-columns:1fr}
  #settings #ps-recovery .care-columns {grid-template-columns:1fr;gap:8px}
  #settings #ps-recovery .care-panel {padding:12px}
  #settings #bcpCloudPasswordForm {grid-template-columns:1fr;gap:6px!important}
  #settings #bcpCloudPasswordForm > :is(label,input,button) {grid-area:auto!important}
  #settings #bcpCloudPasswordForm > label:not(:first-child) {margin-top:5px}
  #settings #bcpCloudPasswordForm > input {font-size:16px!important;min-height:44px}
  #settings :is(#ps-account,#ps-recovery) button {min-height:40px}
}
@media screen and (max-width:380px) {
  #settings #ps-account .ps-facts {grid-template-columns:1fr}
}