/* The office's People and settings area (plan 4, task 9). Linked from index.html;
   only this area's own rules go here. */

.p-missing { border: 2px solid var(--warn); color: var(--warn); }

.p-person h3, .p-devices h3, .p-pin h3, .p-profiles h3 { margin: 0 0 .4rem; }
.p-email { font-weight: 600; margin: 0 0 .2rem; overflow-wrap: anywhere; }
.p-meta { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.p-locked-flag { color: var(--warn); font-weight: 600; margin: 0 0 .6rem; }
.p-reset { color: var(--muted); font-size: .85rem; margin: .8rem 0 0; }
.p-reset code { display: inline-block; word-break: break-word; color: var(--chalk); }

.p-person button, .p-devices button, .p-pin button { min-height: 44px; }
.p-person > button, .p-person .p-confirm-row { margin-top: .2rem; }
.p-person > button + button { margin-left: .5rem; }

.p-confirm { margin: .4rem 0 .3rem; font-weight: 600; }
.p-confirm-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.p-confirm-row button { flex: 1 1 8rem; }

.p-devices table td button { margin: 0; }

.p-pin-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; max-width: 20rem; }
.p-pin-row { display: flex; gap: .6rem; }
.p-pin-msg { min-height: 1.2em; }

.p-profiles ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.p-profiles li { margin: 0 0 .3rem; }

@media (max-width: 639px) {
  .p-confirm-row button { flex: 1 1 auto; }
}