/* 登入閘 — 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;
}

/* 入口頁的標語與四段介紹 — #459。只在 `#gate.landing`(登入卡那一屏)出現,
   開關由 auth.js 的 paintLanding() 掛。插圖的顏色只走主題 token:帳本那三段用
   各自帳本種類的色(帳本籤同一組),好友那一段用成員色 —— 換主題它們跟著換。 */
.gt-tagline, .gt-intro { display: none; }
#gate.landing .gt-tagline { display: block; }
#gate.landing .gt-intro { display: block; }
.gt-tagline {
  font-family: var(--font-heading); font-size: 1.125rem; font-weight: 640;
  letter-spacing: -.01em; margin: -10px 0 14px;
}
.gt-intro { margin-top: 24px; }
.gt-feat { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.gt-feat + .gt-feat { border-top: 1px solid var(--rule); }
.gt-art {
  flex: none; width: 44px; height: 44px;
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.gt-art-personal { stroke: var(--ledger-personal); }
.gt-art-personal .soft { fill: var(--ledger-personal-soft); }
.gt-art-personal .tone { fill: var(--ledger-personal); stroke: var(--bg); }
.gt-art-split path { stroke: var(--bg); }
.gt-art .m1 { fill: var(--member-1); }
.gt-art .m2 { fill: var(--member-2); }
.gt-art .m3 { fill: var(--member-3); }
.gt-art-pool { stroke: var(--ledger-pool); }
.gt-art-pool .soft { fill: var(--ledger-pool-soft); }
.gt-art-pool .tone { fill: var(--accent); stroke: none; }
.gt-art-friends .m1, .gt-art-friends .m2 { stroke: none; }
.gt-art-friends .line { stroke: var(--accent); }

/* 桌機 1024 以上兩欄 — #459:介紹在左、登入卡在右,兩邊都從第一屏開始畫。
   兩欄中間那 64px 是一條空的格子軌,不是 `column-gap`(doiuse 把它認成多欄排版,
   test_compat 的底線外)。收起來的卡是 `display: none`,不佔格子;在場的那一張(登入卡)跨過左欄的
   三列,品牌、標語、介紹依序流進左欄。卡比左欄高出來的那一截給最後一列
   (`1fr`),品牌與標語才不會被撐開。 */
@media (min-width: 1024px) {
  #gate.landing .gt-box {
    max-width: 960px; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 64px 420px; grid-template-rows: auto auto 1fr;
  }
  #gate.landing .gt-box > .card { grid-column: 3; grid-row: 1 / span 3; margin-top: 28px; }
  #gate.landing .gt-box > :not(.card) { grid-column: 1; }
}

.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 立、#532 改成 `.primary`。

   #253 把它們從 `.seg` 的灰色藥丸換成一列一顆、看得出邊界的方塊:同一張卡上還有
   一個輸入框和一顆實心的鈕,讀的人分不出灰色那一塊是按得下去的東西還是一段已經
   選好的字。**#514 之後那張卡上一個輸入框都沒有了**,而那個方塊(白底、一道細框、
   靠左的字)在第一屏上換了一種誤會:它看起來像一個輸入框 —— 而這是第一屏唯一要按
   的東西(主線 2026-09-12 裁示,設計 `514-design.md` §2.1 標的也是 primary)。

   **樣式因此回到 style.css 的 `.primary`**,這一支不再自己畫一顆鈕(檔頭:按鈕全部
   沿用 style.css 的既有元件)。這裡只留這一疊的間距:`.primary` 自己那 18px 的
   `margin-top` 是給卡片裡最後一顆用的,疊起來的座位鈕要的是 8px。 */
.gt-seats { margin-top: 10px; }
.gt-seats:empty { margin-top: 0; }
.gt-seats .primary { margin-top: 0; }
.gt-seats .primary + .primary { margin-top: 8px; }

/* 邀請那兩屏上撐滿一行的次要鈕 — #514(「以其他身份加入」「我不是〈他〉」
   「登入或註冊我的帳號」,以及第二屏那顆訪客主鈕)。**尺寸與 `.gt-guest` 同一組**
   (44px 的可點區域,DESIGN-AUTH §8.5),只是它們不是那一顆。 */
.gt-wide {
  display: block; width: 100%; margin-top: 12px;
  min-height: 44px; font-size: 0.875rem;
}

/* 每一屏最後那一行出口 — #253 的常駐出口,#514 降權成一條連結。
   **它不是一顆鈕**(第一屏的鈕因此仍然是兩顆),但它仍然是 44px 的可點區域:
   按不準的代價落在「我現在不想加入」的那一刻。 */
.gt-exit {
  display: block; width: 100%; text-align: center;
  margin-top: 10px; color: var(--dim);
}

/* 密碼欄與它的眼睛 — #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; }