/* My profile: the name and number, the password, the identity and what the account opens. */

.withinfo { display: inline-flex; align-items: center; }
.ptitle { gap: 0; }

#account { gap: 24px; }
#account .cols { grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); }

.statehead { margin: 0 0 2px; }
.statedetail { color: var(--ink-2); }

.flabel { display: inline-flex; align-items: center; }
.problems { margin: 0; padding: 0 0 0 18px; color: var(--bad-fg); font: 400 13px/18px var(--f-body); }
.formfoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.saved { margin-right: auto; color: var(--ok-fg); font: 500 13px/18px var(--f-body); }

.rows .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rows .what .k { color: var(--ink); font-weight: 500; }
.rows .sub { font: 400 13px/18px var(--f-body); color: var(--ink-2); }

.facts { margin: 0; }
.facts > div { padding: 10px 0; }
.facts dt { display: inline-flex; align-items: center; color: var(--ink); font: 400 14px/20px var(--f-body); flex: none; }
.facts dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.facts .mono dd { font: 500 13px/20px var(--f-mono); }

.access .wsmark { width: 32px; height: 32px; }
.access > li { justify-content: flex-start; gap: 12px; }
.access .what { flex: 1; }
.access .what > a { color: var(--ink); font-weight: 600; text-decoration: none; }
.access .what > a:hover { color: var(--link); text-decoration: underline; }
.access .v { font-weight: 500; text-align: right; }

@media (max-width: 900px) {
  #account .cols { grid-template-columns: minmax(0, 1fr); }
  .formfoot { justify-content: flex-start; }
  .rows > div { flex-wrap: wrap; }
}