/* 登入閘 — F20e。只有這一層的定位與間距;卡片、輸入框、按鈕全部沿用
 * style.css 的既有元件,所以閘門與 app 內部看起來是同一個東西。 */

/* 登入閘也要讓開瀏海 — #350(D-F88)。它是 `position: fixed; inset: 0`,所以它
   自己就是最上面那一格:`.wrap` 的 header 讓開了,閘門沒讓開的話,還沒登入的人
   看到的是被時間蓋住的品牌字。底下那一道 `safe-area-inset-bottom` 從 F20e 起就
   在,這一行是它的另一端。 */
#gate {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: var(--bg);
  padding: env(safe-area-inset-top) 16px calc(32px + env(safe-area-inset-bottom));
}

/* 閘門升起時 app 整個不在畫面上——nav 與 FAB 也是。留著半截 app 在後面,使用者
 * 會去點那些點不動的分頁。(鈴鐺長在 `.wrap` 的 header 裡,第一條就收掉了。) */
body.gated .wrap,
body.gated .fab,
body.gated nav { display: none; }

.gt-box { max-width: 420px; margin: 0 auto; }

.gt-brand {
  font-weight: 650; letter-spacing: -.01em;
  padding: 28px 0 18px;
}

.gt-pool { font-size: 1.375rem; font-weight: 640; letter-spacing: -.02em; margin: 4px 0 2px; }

.gt-gap { margin-top: 10px; }

.gt-tabs { margin-bottom: 4px; }

/* 認領座位的那幾顆鈕 — #253。原本是 `.seg` 的灰色藥丸,上面只印一個名字:同一張
   卡上還有一個輸入框和一顆實心的鈕,讀的人分不出灰色那一塊是按得下去的東西還是
   一段已經選好的字。一列一顆、整句寫在上面、看得出邊界。 */
.gt-seats { margin-top: 10px; }
.gt-seats:empty { margin-top: 0; }
.gt-seats button {
  display: block; width: 100%; text-align: left; font: inherit;
  color: var(--ink); background: var(--card); cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.gt-seats button + button { margin-top: 8px; }

/* 訪客讀得到的那幾個名字 — #253。它們不是鈕:沒有 token 的人 claim 不了。 */
.gt-names { margin: 6px 0 0; padding-left: 20px; }
.gt-names li { margin-top: 2px; }

/* 密碼欄與它的眼睛 — #253。鈕疊在輸入框右緣,輸入框自己讓出那塊位置。

   `min-height` / `min-width` 是 D-F100(#373)補的:內距撐出來的是 46×36,而全站
   的下限是 44×44。**它一格版面都不佔**(`position: absolute`),所以長高不會把密
   碼欄或它底下那一顆撐開 —— 輸入框自己也在同一票裡從 40 長到 44(style.css 那條
   全站的 `input` 下限),兩者於是仍然一樣高。 */
.gt-pw { position: relative; }
.gt-pw input { padding-right: 62px; }
.gt-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 0.8125rem; cursor: pointer; background: transparent;
  color: var(--dim); border: 0; border-radius: 8px; padding: 8px 10px;
  min-height: 44px; min-width: 44px;
}
.gt-eye[aria-pressed="true"] { color: var(--accent); }

/* 登入卡底下那兩條路 — #329。**它們是真的 `<button>`**(不是 `<div onclick>`):
   鍵盤走得到、讀屏念得出「按鈕」,而畫面上它看起來像一條連結。**兩顆各自撐到
   44px 高**:一顆 13px 的字撐出來的可點區域大約只有 18px,而這兩顆正是「我進不
   去了」的人要按的東西 —— 按不準的代價落在最壞的那一刻。 */
.gt-links {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 10px;
}
.gt-link {
  font: inherit; font-size: 0.875rem; cursor: pointer;
  background: transparent; color: var(--accent); border: 0;
  padding: 12px 2px; min-height: 44px;
}

/* 第三條路:「先用看看,不用註冊」— D-G85(#343)。
   **次要樣式**:它站在主要動作(登入 / 註冊)下面,而那一顆是實心的 `.primary`
   —— 兩顆一樣重的鈕擺在一起,讀的人分不出哪一顆是這張卡在建議的事。所以它沿用
   `.ghost` 的空心外框,只把寬度撐滿與高度撐到 44px:一顆 13px 的字撐出來的可
   點區域大約只有 30px,而這一顆是「我還不想留資料」的人唯一按得到的東西
   (DESIGN-AUTH §8.5:觸控目標 ≥44px)。 */
.gt-guest {
  display: block; width: 100%; margin-top: 12px;
  min-height: 44px; font-size: 0.875rem;
}
.gt-guest-why { font-size: 0.8125rem; margin-top: 8px; }

/* 註冊鈕底下那一行 — #329(READINESS H10 的兩頁在 #323 落地,這是它們的入口)。
   兩條連結開新分頁:讀條款的人回來時,打到一半的註冊表單要還在。 */
.gt-legal { font-size: 0.8125rem; }
.gt-legal a { color: var(--accent); }

/* 重寄那一顆在冷卻中 — #329。停用的樣子只靠 `disabled` 的預設灰不夠(它在深色
   主題上幾乎看不出來),而「為什麼按不下去」寫在鈕面上(「48 秒後可以重寄」),
   不是只用顏色講(DESIGN-AUTH §8.5:狀態不只用顏色表示)。 */
#gtResend[disabled] { opacity: .55; cursor: default; }