/* 額度用完那一張卡 — D-H4 / D-H5(#366)。畫它的是 web/paywall.js。
 *
 * 卡片、按鈕、字級全部沿用 style.css 的既有元件(`.card` / `.primary` / `.ghost` /
 * `.muted`),所以這張卡與 app 內部看起來是同一個東西 —— 這裡只有一層的定位與間距,
 * 理由逐字同 web/auth.css 的檔頭。
 *
 * 一個 token 都不在這裡自己定:顏色、圓角、陰影由 web/themes.css 說了算(#259),
 * 所以四個主題與深淺兩色一格都不必在這一支重寫一遍。 */

/* 那一層本身 — 全螢幕、不透明,而不是一張半透明的幕加一張紙。
 *
 * **為什麼是全螢幕**:它要問的是一個決定(升級,還是先不要),而底下那一頁上使用者
 * 剛才正在填一張表 —— 半透明的幕會讓他繼續看著那張表、繼續想著那件事。同一個 app
 * 裡「一段說明」是一張向上彈的紙(log.css 的 `.hsheet`),「一個決定」是一整屏。
 *
 * **z-index 26**:蓋過導覽列(22)、浮動的記一筆(21)與那兩張紙(24/25);仍然在
 * 登入閘(auth.css 的 30)之下 —— 沒有身分時 app 不該有東西冒出來。
 *
 * 讓開瀏海與底部安全區,理由同 #gate:`position: fixed; inset: 0` 的東西自己就是
 * 最上面那一格,`env()` 在讀不到的環境是 0,所以這一道對桌面瀏覽器不存在。 */
.pw-wrap {
  position: fixed; inset: 0; z-index: 26; overflow-y: auto;
  background: var(--bg);
  padding: calc(16px + env(safe-area-inset-top)) 16px
           calc(32px + env(safe-area-inset-bottom));
  display: flex;
}

/* 垂直置中靠 `margin: auto` 而不是 `align-items: center` — 兩者在放得下的時候一模
   一樣,而放不下的時候(字級偏好放到最大、橫著拿的手機)只有 `margin` 這一種捲得到
   卡片的頂端:置中那一種會把上緣切掉,而被切掉的正是標題。

   420px 與登入閘的 `.gt-box` 同一個數字:同一個 app 裡一張獨立的卡只有一種寬度。 */
.pw-box { margin: auto; width: 100%; max-width: 420px; }

.pw-say { margin-top: 6px; line-height: 1.7; }

/* 「圖片 5/5 · 本週 AI 3/5」。它是那句話的證據,所以跟著它、比它輕。 */
.pw-use { margin-top: 12px; font-size: 0.8125rem; color: var(--dim); }

/* 「升級到 Premium ›」。`.primary` 自己帶 `width: 100%`,這裡只把字與那顆箭頭排在
   一起(箭頭的顏色走 `currentColor`,在實心鈕上因此是白的)。 */
.pw-up {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.pw-up .caret { flex: none; font-size: 0.9375rem; }

/* 「先不要」。`.ghost` 預設是一顆貼著文字的藥丸,而這一顆是這張卡上的第二個選擇 ——
   它要與上面那顆一樣寬、一樣好按(44px 是觸控目標的下限,同 `.ac-dev-off`)。 */
.pw-not {
  display: block; width: 100%; min-height: 44px; margin-top: 10px; font-size: 0.875rem;
}