/* Temporary passwords: Settings › Users "Set a password for them", and the
   "Choose your own password" step after signing in with one. Quiet Glass tokens only. */

#tp-panel { width: min(520px, calc(100vw - 32px)); }
#tp-panel .small, #own-pw-form .small { font-size: var(--fs-meta); }
#tp-panel .switch-row { min-height: 44px; }
#tp-panel .switch-row small { font-size: var(--fs-cap); }
#tp-access { display: grid; gap: 12px; }
#tp-vault { display: flex; flex-wrap: wrap; gap: 8px; }

.tp-control { position: relative; }
.tp-control input { width: 100%; padding-right: 132px; letter-spacing: 0.02em; }
.tp-control .in2 { gap: 2px; }
.tp-control .icon-btn[aria-pressed="false"] { opacity: 0.6; }

.pw-strength { font-style: normal; font-weight: 600; font-size: var(--fs-cap); margin-left: 6px; }
.pw-strength.weak { color: var(--danger); }
.pw-strength.fair { color: var(--amber); }
.pw-strength.good { color: var(--ok); }

.tp-handover {
  padding: 14px 16px; border-radius: var(--r-md); background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--glass-edge); font-size: var(--fs-item); word-break: break-all; user-select: all;
}

/* Users list: someone still on a temporary password */
.pill.temp { background: var(--amber-soft); color: var(--amber); }

#own-pw-form h2 { margin: 0; }

@media (max-width: 560px) {
  #tp-panel .row-btns { flex-direction: column; align-items: stretch; }
  #tp-panel .row-btns .btn { width: 100%; min-height: 44px; }
}