/*
 * 个人中心那一节账号 —— 页面级样式表的第四份，判据和 `search.css` / `ccass-chart.css`
 * 一字不差：这几十行只有四个域名各一份 `/cn/my/index.html` 用得着，而 `app.css` 的内容
 * 哈希写在**每一份** HTML 的 `<link>` 里 —— 留在那边，改一个 padding 就是四个站三万六千
 * 多个产物文件的 diff。
 *
 * **它和整节一起是条件渲染的**（没配 `ACCOUNT_API_ORIGIN` 时那一节压根不在，见
 * `my.html`），所以这份样式表也跟着不加载：一份只给不存在的元素写规则的样式表是每个
 * 读者白下的一次请求。
 *
 * 表单那几格的形状借的是 `.co-find__input`（`app.css`，两个索引页那个查找框）：圆角的框、
 * `--card` 底、聚焦时红边。**没有把它们并成一套共用类** —— 那一套是「一个框加一排 chip」，
 * 这一套是「一次只摊一个表单」，摆出来的东西不是同一个部件；共用的只有「读者要往里填
 * 东西的地方底色必须比它待的那一块亮」那条判据（见 AGENTS.md「样式」）。
 */

/* 它排在收藏之前，所以底下那道分隔线是它和收藏之间的界。收藏那一节自己不画线（它是
 * 这一页最后一块），所以这条只能长在这里。 */
.account {
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

/* 标题借收藏那一行（`.saved__heading`），不另起一套：这一页上两节标题是同一档东西，
 * 各写一份就是同一个部件在同一页上有两个样子。 */

/*
 * 首屏那一行只说「正在读取」。它是**这一节唯一一处不 `hidden` 的内容**，所以脚本被拦下
 * 的浏览器上留下的就是这一句 —— 那比一排点了没反应的输入框诚实，也是「坏掉的那一侧
 * 必须是安静的一侧」在这一页上的样子。
 */
.account__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted-foreground);
}

/*
 * **`display` 只能写在 `:not([hidden])` 上。** `hidden` 那条 `display: none` 来自 UA 样式表，
 * 权重比一个类低 —— 写成 `.account__guest { display: block }` 就把它整个盖掉，于是登录框和
 * 已登录那一块在页面加载的第一帧同时摊开，而它看上去只是「闪了一下」。判据同
 * `search.css` 里那一条。
 */
.account__guest:not([hidden]) {
  display: block;
  max-width: 24em;
}

.account__signed:not([hidden]) {
  display: block;
}

/* 登录 / 注册各一块。**`display` 同样只能写在 `:not([hidden])` 上**，理由同上：写成
 * `.account__panel { display: block }` 会把注册那一块的 `hidden` 盖掉，于是两个人机校验
 * 又一次同时在场。 */
.account__panel:not([hidden]) {
  display: block;
}

.account__switch {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted-foreground);
}

.account__switch-link {
  color: var(--secondary-foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.account__switch-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* 「忘了密码找谁」跟登录，「注册送积分」跟注册 —— 各跟自己那一档，不再跨整行讲两件事。 */
.account__aside {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted-foreground);
}

.account__aside-link {
  color: var(--secondary-foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.account__aside-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* --- 表单 ------------------------------------------------------------------ */

.account__form {
  margin: 0;
}

/* 改密那个表单是**已登录**那一块里点开才有的第三个，所以它自己带一条上边线和内边距：
 * 上面就是那排按钮，不隔开的话读者看不出这一块是刚长出来的。 */
.account__form--inline:not([hidden]) {
  display: block;
  max-width: 24em;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.account__form-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}

.account__field {
  display: block;
  margin-bottom: 12px;
}

.account__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}

/* 通栏，和 `.co-find__input` 那条 22em 的上限相反：那个是查找框（通栏一条红边看着像
 * 表单），而这里它**就是**表单。 */
.account__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-family: inherit;
  font-size: 15px;
  color: var(--foreground);
}

.account__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(26, 23, 20, .08);
}

.account__input::placeholder {
  font-size: 13px;
  color: var(--muted-foreground);
}

/*
 * Turnstile 那个 widget 的落点。**高度不写死** —— 它自己那个 iframe 是 65px 上下，而
 * Cloudflare 随时可能改；给一个固定高度只会在它变高的那天多出一条缝。空着的时候
 * （没配 site key，或者那段脚本被拦下）整块塌成 0，所以不必条件渲染。
 */
.account__widget {
  margin-bottom: 12px;
}

.account__widget:empty {
  margin-bottom: 0;
}

/* 唯一一个实心按钮，和搜索页那一块里「应用」是同一条判据：这一节里只有它是「真的会
 * 发一次请求」的那个动作。 */
.account__submit {
  padding: 7px 18px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background-color: var(--primary);
  font-family: inherit;
  font-size: 14px;
  color: var(--primary-foreground);
  cursor: pointer;
  transition: opacity .12s;
}

.account__submit:hover {
  opacity: .88;
}

/* 请求在飞的那几百毫秒里按钮要变灰并且点不动 —— 不然读者会再点一次，而注册那一发第二
 * 次会撞唯一键、登录那一发会白烧一次 scrypt。 */
.account__submit[disabled] {
  border-color: var(--muted);
  background-color: var(--muted);
  color: var(--muted-foreground);
  cursor: default;
  opacity: 1;
}

/*
 * 一行反馈。**`:empty` 时整块不占高度**，不然每个表单底下常驻一条空行；`role="status"`
 * 在 markup 里，所以读屏在它变化时会念出来 —— 那是这一节唯一一处「刚才那一下成功了没有」
 * 的出口。
 */
.account__msg {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.account__msg:empty {
  display: none;
}

.account__msg--bad {
  color: var(--primary);
}

/* --- 已登录 ---------------------------------------------------------------- */

/* 三行键值，借的是资料页那套「一张表就是一节」的读法而不是真做一张表：三行东西撑不起
 * 一个 `<table>`，而那一套的 markup 只有 `_cotable.html` 一份（见 AGENTS.md）。 */
.account__card {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--card);
}

.account__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
}

.account__key {
  flex: none;
  min-width: 4.5em;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}

.account__val {
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* 积分是这一块里读者真的会来看的那个数，所以它是等宽的、大一档 —— 同市场那几页上的
 * 数字行（`--mono`）：一串数字用正文字体排出来，位数对不齐。 */
.account__val--points {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
}

.account__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 和收藏那排工具（`.saved__tool`）逐档相同的样子，但**不共用那个类** —— 那一批由
 * `.js .saved__tools` 放出来（app.js 在 `<html>` 上加的那个 class），而这一排的可见性
 * 归 `[hidden]`；共用类就得同时满足两套显隐规则，而漏掉哪一套都是一排点了没反应的按钮。 */
.account__tool {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--secondary-foreground);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}

.account__tool:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* 打印时整节不要：这一节全部是控件，而纸上一个都点不动（判据同 `.co-print`
 * 和 `.bookmark`，见 AGENTS.md「导出 PDF」）。 */
@media print {
  .account {
    display: none;
  }
}