/* Account & cloud save (public/js/ui/account.js, docs/ACCOUNTS.md): the title screen's login row, the account dialog and
   设置 →「账号与云存档」. Colours and sizes follow the design system (theme.css: rem = 100 design px at 1920×1080). */

/* ---- title screen row ---------------------------------------------------------------------------- */

.account-row {
  display: inline-flex;
  align-items: center;
  gap: .06rem .08rem;
  font-size: calc(.13 * var(--t));
  color: var(--text-lo);
}

.account-open {
  display: inline-flex;
  align-items: center;
  gap: .06rem;
  height: max(.3rem, 1.5em);
  padding: 0 .1rem;
  border: 1px solid var(--line-2);
  background: rgba(23, 249, 183, .04);
  color: var(--text-hi);
  font: inherit;
  font-size: calc(.14 * var(--t));
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}

.account-open:hover,
.account-open:focus-visible {
  border-color: var(--mint-500);
  background: rgba(23, 249, 183, .09);
  color: var(--mint-500);
  outline: none;
}

.account-open .icon { width: .16rem; height: .16rem; }
.account-open__label { max-width: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-open.is-in { border-color: rgba(23, 249, 183, .38); color: var(--mint-500); }
.account-open.is-unknown { opacity: .72; }

.account-open__dot {
  width: .07rem;
  height: .07rem;
  border-radius: 50%;
  background: var(--mint-500);
  box-shadow: 0 0 .08rem rgba(23, 249, 183, .8);
  flex: none;
}

.account-open.is-pending .account-open__dot { background: var(--amber); box-shadow: 0 0 .08rem rgba(246, 163, 41, .8); }

/* the title's top-right tools row: the account button keeps the language menu's line */
.title-corner__tools .account-row { margin-bottom: 0; }
.title-corner__tools .account-open { height: max(.3rem, 1.4em); font-size: calc(.14 * var(--t)); }

/* ---- dialog -------------------------------------------------------------------------------------- */

.account-form { display: flex; flex-direction: column; gap: .13rem; }
.account-tabs { display: flex; gap: .06rem; margin-bottom: .02rem; }
.account-tabs button { flex: 1 1 0; height: max(.3rem, 1.5em); }
.account-actions { display: flex; align-items: center; gap: .1rem; margin-top: .04rem; }
.account-actions--wrap { flex-wrap: wrap; }

.account-identity { display: flex; align-items: center; gap: .12rem; padding: .1rem .12rem; border: 1px solid var(--line-2); background: rgba(23, 249, 183, .035); }
.account-avatar { display: grid; place-items: center; width: .44rem; height: .44rem; border: 1px solid rgba(23, 249, 183, .35); color: var(--mint-500); background: rgba(23, 249, 183, .06); flex: none; }
.account-avatar .icon { width: .24rem; height: .24rem; }
.account-identity__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; flex: 1 1 auto; }
.account-identity__text b { color: var(--text-hi); font-size: calc(.18 * var(--t)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity__text small { color: var(--text-lo); font-size: calc(.12 * var(--t)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-chip {
  flex: none;
  padding: .02rem .08rem;
  border: 1px solid rgba(23, 249, 183, .3);
  color: var(--mint-500);
  font-size: calc(.11 * var(--t));
  font-style: normal;
  letter-spacing: .04em;
}
.account-chip.is-warn { border-color: rgba(246, 163, 41, .45); color: var(--amber); }

.account-facts { display: flex; flex-wrap: wrap; gap: .08rem .3rem; color: var(--text-lo); font-size: calc(.12 * var(--t)); }
.account-facts span { display: inline-flex; align-items: baseline; gap: .08rem; }
.account-facts b { color: var(--text-hi); font-weight: 500; }
.account-facts--inline { flex: 0 1 auto; }

.account-devices { display: flex; flex-direction: column; gap: .04rem; padding-top: .06rem; border-top: 1px solid var(--line); }
.account-device { display: flex; align-items: center; gap: .08rem; padding: .05rem .02rem; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: calc(.13 * var(--t)); }
.account-device__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); }
.account-device__time { flex: none; color: var(--text-lo); font-size: calc(.11 * var(--t)); }
.account-device__revoke { flex: none; border: 0; background: none; color: var(--amber); font: inherit; font-size: calc(.12 * var(--t)); cursor: pointer; padding: .02rem .04rem; }
.account-device__revoke:hover { text-decoration: underline; }

/* 设置 → 账号与云存档: laid out like the other sections (set-keys__head / set-hint / set-keys__note) */
.set-account { display: flex; flex-direction: column; gap: .04rem; }
.set-account .set-keys__head { margin-bottom: .02rem; }
.set-account .account-actions { margin-top: .02rem; }

/* a phone landscape has less height: the dialog's body scrolls (the modal already does) and the identity block shrinks */
@media (max-height: 520px) {
  .account-avatar { width: .36rem; height: .36rem; }
  .account-identity { padding: .06rem .1rem; }
}