/* 拔克 DS — 帳號畫面
 *
 * 這是 DS 的第一個元件。它管的是「拔克在說話」的那一層：登入、設定密碼、
 * 找回進度。玩法畫面一律不歸它管。
 *
 * ─── 這一檔為什麼幾乎沒有顏色 ─────────────────────────────────────
 *
 * 五款遊戲各有一套辛苦長出來的美術方向（寶島煉成是水彩宣紙，而且是
 * 全家唯一的**亮色**主題；迴聲之鐘是金字黑底襯線）。一份會上色的共用元件
 * 貼進去就是一張別人的紙。
 *
 * 所以這裡只定**版面、節奏、狀態**，顏色與字體全部走變數，由宿主給。
 * 一份程式，五種長相。宿主至少要給 --ds-panel / --ds-ink / --ds-accent，
 * 其餘有預設值（拔克官網那套中性灰墨），不給也不會壞掉。
 *
 * ⚠ 不要在這裡寫死任何一款遊戲的顏色。要調某一款的長相，改那一款的變數。
 */

/* ⚠ 預設值**一律寫成 var() 的 fallback，不要宣告在 .ds-acct 身上**。
   宣告在元素自己身上的變數會贏過從父層繼承來的，宿主就永遠蓋不掉
   ——第一版是那樣寫的，結果寶島煉成那張亮色皮完全沒生效（展示頁抓到的）。
   寫成 fallback 的話：父層有給就用父層的，沒給才用拔克中性。 */
.ds-acct {
  box-sizing: border-box;
  /* ⚠ 一定要自己宣告 text-align。表單的文案、標籤、小字全部靠左讀才順，
     而中文置中在多行時會留下孤字（「…隨時可取／消」那種）。
     更糟的是 .ds-btns 是 flex——flex 項目不吃 text-align，所以宿主如果是
     置中的（寶島煉成的 .askCard 就是 text-align: center），就會變成
     「文字置中、按鈕靠左」，整塊看起來是歪的。 */
  text-align: left;
  font-family: var(--ds-font, "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif);
  color: var(--ds-ink, #e8e6e1);
  background: var(--ds-panel, #111114);
  border: 1px solid var(--ds-line, rgba(232,230,225,.16));
  border-radius: var(--ds-radius, 2px);
  padding: clamp(18px, 4vw, 26px);
  line-height: 1.9;
  font-size: 15px;
}

.ds-acct * { box-sizing: border-box; }

.ds-acct h3 {
  margin: 0 0 0.3rem;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ds-acct p { margin: 0 0 0.9rem; color: var(--ds-dim, #9a978f); font-size: 13px; }
.ds-acct p:last-child { margin-bottom: 0; }
.ds-acct .ds-fine { color: var(--ds-faint, #615e58); font-size: 12px; }
/* 小字裡的連結（隱私權政策／服務條款）——不加這條會是瀏覽器預設的藍色加底線，
   在一頁墨色的介面裡非常刺眼（踩過）。 */
.ds-acct a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ds-line, rgba(232,230,225,.4));
  text-underline-offset: 3px;
}
.ds-acct a:hover { text-decoration-color: currentColor; }

/* ---- 欄位 ---- */

.ds-acct input[type="text"],
.ds-acct input[type="email"],
.ds-acct input[type="password"] {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px solid var(--ds-line, rgba(232,230,225,.16));
  border-radius: var(--ds-radius, 2px);
  background: transparent;
  color: var(--ds-ink, #e8e6e1);
  font: inherit;
  font-size: 15px;   /* ⚠ 不要小於 16px 以下再縮：iOS Safari 會在聚焦時自動放大整頁 */
}

.ds-acct input:focus-visible {
  outline: 2px solid var(--ds-accent, #e8e6e1);
  outline-offset: 1px;
}

.ds-acct input[readonly] { color: var(--ds-dim, #9a978f); }

/* 電子報同意：預設打勾在歐盟不算有效同意，所以這裡不預設勾。
   （理由與法源見 secrets/sso.md 的「電子報與退訂」。） */
.ds-acct .ds-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 4px;
  color: var(--ds-dim, #9a978f);
  font-size: 12.5px;
  line-height: 1.7;
  cursor: pointer;
}

.ds-acct .ds-opt input {
  margin-top: 4px;
  flex: none;
  accent-color: var(--ds-accent, #e8e6e1);   /* 不然是系統藍 */
}

/* ---- 按鈕 ---- */

.ds-acct .ds-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 主要動作撐滿一行：對話框只有一個主要動作時，撐滿比靠左的小方塊明確，
   也不會跟置中的宿主打架。 */
.ds-acct .ds-btns button.ds-primary { flex: 1 1 100%; }

.ds-acct button {
  padding: 10px 16px;
  border: 1px solid var(--ds-line, rgba(232,230,225,.16));
  border-radius: var(--ds-radius, 2px);
  background: transparent;
  color: var(--ds-ink, #e8e6e1);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}

.ds-acct button:hover { border-color: var(--ds-accent, #e8e6e1); }
.ds-acct button[disabled] { opacity: 0.5; cursor: default; }

.ds-acct button.ds-primary {
  background: var(--ds-accent, #e8e6e1);
  border-color: var(--ds-accent, #e8e6e1);
  color: var(--ds-accent-ink, #0b0b0d);
  font-weight: 700;
}

/* 救援路徑（忘記密碼、換模式）不該跟主要動作搶——小字、貼在欄位下面。
   這條規矩是從寶島煉成那份會動的介面抄過來的，不是新發明的。 */
.ds-acct .ds-sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ds-dim, #9a978f);
}

.ds-acct .ds-sub button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-acct .ds-sub button:hover { color: var(--ds-ink, #e8e6e1); }

/* ---- 狀態 ---- */

.ds-acct .ds-err {
  margin: 6px 0 0;
  color: var(--ds-bad, #e0806f);
  font-size: 12.5px;
}

.ds-acct .ds-mail {
  font-family: var(--ds-mono, ui-monospace,"SF Mono",Menlo,monospace);
  font-size: 13px;
  color: var(--ds-ink, #e8e6e1);
  word-break: break-all;
}

.ds-acct[data-busy="1"] { pointer-events: none; opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  .ds-acct button { transition: none; }
}

/* ---- 信裡的六位數 ---- */

.ds-acct .ds-lab { margin: 14px 0 6px; font-size: 13px; }
/* 字距拉開＋等寬＋居中：六位數是要用眼睛核對的，不是要讀的句子 */
.ds-acct .ds-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px; letter-spacing: 0.34em; text-align: center; text-indent: 0.34em;
}