/* 手机号登录表单（cn overlay）。
 *
 * 外层刻意复用 .dev —— 输入框、按钮、焦点环的样式都在那儿定义好了。这里只补一件
 * login.css 没有的事:验证码输入框和"获取验证码"按钮要并排。
 */

.login-shell .phone-login .phone-code-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.login-shell .phone-login .phone-code-row input {
  flex: 1 1 auto;
  min-width: 0;
  /* letter-spacing 让六位数字读起来是"一组码"而不是一个数;tabular-nums 保证边输边等宽 */
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* 次要动作:描边而不是实心,别和下面那个真正的"登录"按钮抢注意力 */
.login-shell .phone-login button.phone-send {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  padding: 11px 14px;
  font-size: var(--fs-subhead);
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
  /* 和它旁边的 input 对齐:input 有 10px 下外边距,按钮没有,不补就会低一截 */
  margin-bottom: 10px;
  /* 44pt 最小命中区 —— 11px 上下内边距 + 行高在窄屏上会掉到 40 以下 */
  min-height: 44px;
}

.login-shell .phone-login button.phone-send:hover:not(:disabled) {
  border-color: var(--accent);
  background: transparent;
}

.login-shell .phone-login button.phone-send:disabled {
  color: var(--mute);
  opacity: 1;
  /* 冷却中不是"坏了",是"在等",所以不压透明度,只把颜色收进静音色 */
}

.login-shell .phone-login #ph {
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

@media (max-width:360px) {
  /* 极窄屏并排会把验证码框挤到只剩四五个字符宽,那时候还是上下排更好读 */
  .login-shell .phone-login .phone-code-row {
    display: block;
  }

  .login-shell .phone-login button.phone-send {
    width: 100%;
  }
}