/* ==== features: static/features/me.css ==== */
/* me／login：分組清單的補充、同頁展開的選單、登入表單。
 *
 * 只用 var(--…) 的 token，深淺兩色都由 core 的色票負責。
 * 可點目標一律 ≥ 44px（WCAG 2.5.5）——.grouped-row 已經是 48，
 * 這裡新增的 .me-option、.me-social、.me-submit 也照這條。
 */

/* ---------- 我的：整頁 ---------- */

.me-page { padding-bottom: 12px; }
/* 值與右箭頭要靠到最右邊。lib/ui.css 的 .grouped-value 已經有 margin-left:auto，
   但沒有值的列（只有標題與箭頭）就沒有東西把箭頭推過去——讓主要那一格自己撐開。
   只作用在這一組的畫面上，不動別人的 groupedList。 */
.me-page .grouped-main,
.login-page .grouped-main,
.me-sheet .grouped-main { flex: 1 1 auto; }
/* > [!danger] `hidden` 對 .grouped-row 沒有用，要自己蓋回去
   > 瀏覽器內建的 `[hidden] { display: none }` 特異性只有 (0,0,1)，
   > 而 lib/ui.css 的 `.grouped-row { display: flex }` 是 (0,1,0) ——後者贏。
   > 實測：登出那一列掛著 hidden 卻照樣畫在未登入的畫面上。
   > 這一條要跟著任何「用 hidden 藏起來的 .grouped-row」一起存在。 */
.grouped-row[hidden], .grouped-section[hidden] { display: none; }
.me-noscript { margin: 0 4px 18px; }
.me-title { margin: 0 4px 14px; font-size: 22px; font-weight: 700; }

/* 身分列。**照「設定」裡 Apple ID 那一列的排法**：頭像大、名字用較大的字、
   底下一行次要字，整列比一般列高。先前這一段只有 h1 的字級，沒有版面——
   頭像與文字各自是一個 block，於是那顆「o」變成孤零零的一行。 */
.me-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--surface);
}
.me-identity-text { min-width: 0; }
/* 頭像。底色用 --sunk（在有底色的表面上再挖一塊），對應 iOS 的 appTertiaryFill。
   它是視覺捷徑不是資訊——名字就在旁邊，所以 aria-hidden。 */
.me-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.me-name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.me-detail { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; }

/* 掀起來的面板（身分／登入方式）。<dialog> 的內距由 lib 給，這裡只負責
   讓裡面的 groupedList 不要再貼一層邊。 */
.me-sheet { min-width: min(420px, 78vw); }
.me-sheet .grouped-section:first-child .grouped-header { margin-top: 0; }

/* 列裡的動作按鈕（撤銷／移除／連結／設定／產生）。**現在一律停用**——
   沒有身分層就沒有 session 可撤、沒有帳號可連。停用而不是拿掉：使用者要知道
   這件事做得到、只是還沒開放（MeView.devicesSection、SignInMethodsView）。
   停用的按鈕本來就不可聚焦，所以它不佔 tab 序，也不必是 44px 的命中區；
   等真的能按時要把 min-height 補上來。 */
.me-row-btn {
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
}
.me-row-btn.is-danger { color: var(--danger); }
.me-row-btn:disabled { opacity: .45; cursor: not-allowed; }
/* 值與按鈕並排時，值不要把按鈕擠出去。 */
.me-row-btn + .grouped-chevron { display: none; }

/* 停用的開關（資料與隱私的「顯示已讀」「顯示上線狀態」）。
   iOS 用的是原生 Toggle ＋ .disabled(true)：**開關本來就是這兩件事的形狀**，
   停用態說明的是「還不能改」，不是「不存在」。
   appearance:none 之後這是一個普通的方框，所以形狀完全由這裡畫；
   萬一某個瀏覽器不吃 appearance:none，退回原生的核取方塊——那仍然是誠實的
   （已勾選、已停用），只是長得不像 iOS 的膠囊。 */
.me-toggle {
  flex: 0 0 auto;
  margin-left: 10px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 42px;
  height: 26px;
  border: 0;
  border-radius: 13px;
  background: var(--line-soft);
  opacity: .55;                    /* 停用態；等真的能改時，這一行要跟著拿掉 */
  cursor: not-allowed;
}
.me-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
}
.me-toggle:checked { background: var(--accent); }
.me-toggle:checked::after { left: 19px; background: var(--accent-ink); }

/* 列裡的小頭像（身分清單）。與 .me-avatar 同一個做法，只是小一號。 */
.me-avatar-sm {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 「新增身分」那一列沒有頭像，但要占同一個寬度，字才與上面幾列對齊
   （IdentitiesView 的 [!important]）。它是個動作，所以槽裡放一個「＋」，
   底色拿掉——那不是一個人。 */
.grouped-row:disabled .me-avatar-sm { background: transparent; font-size: 20px; }

/* ---------- 同頁展開的選單（<details>） ---------- */
/* iOS 是另開一頁的 inline Picker；Web 用 <details>，沒有 JS 也能展開、也能選。 */

.me-details + .me-details,
.me-details + .grouped-row,
.grouped-row + .me-details { margin-top: 1px; }
.me-details > summary {
  list-style: none;
  cursor: pointer;
}
.me-details > summary::-webkit-details-marker { display: none; }
/* 展開時把箭頭轉成朝下——它現在指的是「這一區在下面」，不是「按了會去某處」。
   只挑 <details> 自己那顆箭頭轉，不去動 lib/ui.css 的 .grouped-chevron——
   那是共用元件，別組的清單裡也有它。 */
.me-details > summary .grouped-chevron { display: inline-block; transition: transform .15s ease; }
.me-details[open] > summary .grouped-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .me-details > summary .grouped-chevron { transition: none; }
}

.me-options {
  display: grid;
  gap: 1px;
  padding-top: 1px;
  background: var(--line-soft);
}
.me-option {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 28px;      /* 左邊留出打勾的位置 */
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.me-option:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 88%, var(--accent)); }
/* 沒有 JS 的時候這三顆是停用的（換外觀要寫 localStorage）。
   灰掉比「看起來能按、按了沒反應」誠實——見 pages/me.py。 */
.me-option:disabled { opacity: .45; cursor: not-allowed; }
/* 「永遠恰好一個被選中」——打勾在左邊，iOS 的 inline Picker 就是這個位置。 */
.me-option[aria-current]::before {
  content: "✓";
  position: absolute;
  left: 10px;
  color: var(--accent);
  font-weight: 700;
}
.me-option[aria-current] { font-weight: 700; }

/* 資料與隱私：展開後裡面還有自己的小標與分組 */
.me-panel { padding: 12px; background: var(--surface); }
.me-subhead {
  margin: 14px 4px 7px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.me-panel > .me-subhead:first-child { margin-top: 0; }
.me-panel .grouped-footer { margin-bottom: 0; }

/* ---------- 登入頁 ---------- */

.login-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 0 12px;
}
.login-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 32px;
  text-align: center;
}
.login-mark { width: 52px; height: 52px; }
.login-head h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: .5px; }
.login-head p { margin: 0; color: var(--ink-3); font-size: 14px; }

.login-form { display: grid; gap: 12px; }
.login-field { display: grid; gap: 6px; }
.login-field > span { color: var(--ink-2); font-size: 13px; }
.login-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.login-field input:focus-visible { border-color: var(--accent); }
.login-submit {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.login-submit:disabled { cursor: not-allowed; opacity: .45; }

/* 錯誤訊息就在表單裡，不是飄過去的 toast——登入失敗要留在畫面上讓人讀。 */
.login-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
}
.login-error[hidden] { display: none; }

.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--ink-3);
  font-size: 12px;
}
.login-or::before, .login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* Apple 的按鈕**顯示但停用**。網頁版的 Sign in with Apple 需要付費開發者帳號
   的 Services ID，目前沒有——所以它是灰的，旁邊一句話說明為什麼。
   不自繪 Apple 的標記：這裡只有文字，形狀對齊其他按鈕。 */
.login-platform {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}
.login-platform:disabled { cursor: not-allowed; opacity: .45; }
.login-note {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}

.login-page .grouped-header { margin: 26px 0 0; }

/* > [!important] 窄畫面要折成多排（WCAG 1.4.10 重新流動，AA）
   > iOS 那邊是自己量寬度再決定一排還是兩排（ViewThatFits 要 iOS 16，
   > 部署目標是 15.5）。網頁有 flex-wrap，這件事免費——重點是**另一半**：
   > **不硬塞進一排再縮小**。縮小會讓命中區低於 44px（2.5.5），而放不下的
   > 那一顆會被切掉，那就是內容遺失。所以 min-width 96px ＋ min-height 48px
   > 是下限，寬度不夠就換行，不是把按鈕壓扁。 */
.login-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.login-social {
  flex: 1 1 30%;
  min-width: 96px;
  min-height: 48px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
/* 沒有 JS 就掀不了那張說明面板，所以它們在 HTML 裡是停用的（見 pages/login.py）。 */
.login-social:disabled { opacity: .45; cursor: not-allowed; }