/* ============================================================================
   station-login.css —— 登入頁：左品牌／右登入 PASS（2026-09-07）
   ----------------------------------------------------------------------------
   與首頁同一套產品：**圓角、陰影、撕口、箭頭語言全部沿用 station.css**，本檔只負責登入頁版型。
   色票沿用 station.css，唯三例外是三個對齊素材／實物的 raw hex，都不在 token 表裡：
     #E9E7DF 圓形圖示底、#FBF3DF 月台暖底（＝夥伴圖去不掉的底色）、#C3C7D2 長椅灰。

   數值取自 target mockup `打字養成進化登入頁面.png`（1536×1024）換算到 1440：
     票券總寬 835 → 783 ／ 票券高 671 → 629 ／ 黃票根 155 → 145
     白卡寬 679 → 637 ／ CTA 589×70 → 552×66
     左欄 : 右欄 ≈ 39% : 60% → 1fr : 783px
   量測腳本：`C:/dev/probe/login-measure.py`、`login-measure2.py`。

   **不碰 auth**：`js/auth.js`、Google 登入流程、網域限制一律不動。
   `#login-btn` 的文字由 `setLoginBusy()` 用 textContent 覆寫，所以按鈕裡
   **不能有子元素** —— Google 標誌與箭頭都用偽元素／背景圖做。
   ============================================================================ */

/* --- 版面骨架 -------------------------------------------------------------- */
#screen-login {
  max-width: var(--shell-max);
}

.login-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 783px;
  gap: 40px;
  align-items: stretch;
  /* topbar 48 + footer 92，讓票券在剩下的空間裡垂直置中 */
  min-height: calc(100vh - 140px);
  padding-block: 28px;
}

/* --- 左：品牌 × 養成世界觀 -------------------------------------------------- */
/* 文字在上、月台在下，撐滿與票券同高 —— target 就是這個結構，
   單純 align-items: center 會讓較矮的左欄跟票券上緣差幾十 px。 */
.login-hero {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}

.login-eyebrow {
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .34em;
}

.login-hero h1 {
  margin: 0;
  color: var(--primary-deep);
  /* 站名 7 個字要單行收在 420px 的左欄內：72px 會把最後一字擠到第二行變成孤字，
     64px 可容到 8 個字（8×64 = 512 < 522）。 */
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.login-lead {
  margin: 14px 0 0;
  color: var(--primary-deep);
  font-size: 21px;
  font-weight: 700;
}

.login-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.login-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-deep);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.login-point-ico,
.login-brand-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.login-point-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #E9E7DF;
}

/* 圖示一律單色 —— 彩色 emoji 在 Windows 會變成彩色小圖，
   跟整套車站指標語彙不合（首頁已踩過同一個坑）。 */
.login-point-ico .ico,
.login-perk-ico .ico,
.login-brand-ico .ico {
  width: 21px;
  height: 21px;
  fill: var(--primary-deep);
}

/* --- 月台：站牌 + 長椅 + 三隻夥伴（純裝飾，刻意做輕）------------------------ */
/* 月台鋪一層與夥伴圖同色的暖底：夥伴資產沒有透明背景，
   底色一致才不會看起來像三張貼上去的方形貼片。 */
.login-platform {
  position: relative;
  margin-top: 6px;
  padding: 22px 24px 30px;
  border-radius: 16px;
  background: #FBF3DF;
}

.platform-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 4px;
  padding: 14px 20px;
  border-radius: 8px;
  background: var(--primary-deep);
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

/* 站牌的柱子 */
.platform-sign::after {
  position: absolute;
  top: 100%;
  left: 34px;
  width: 6px;
  height: 74px;
  background: var(--line-strong);
  content: "";
}

.platform-sign-arrow {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.login-eggs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 46px;
}

/* 夥伴圖是 512×512 的 RGB、**沒有透明底**（底色約 #FDF3DD）。
   解法不在這裡，而是 .login-platform 鋪同色暖底；這一格只負責定尺寸。 */
.login-egg {
  display: flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-egg.lg {
  width: 104px;
  height: 104px;
}

.login-egg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 長椅：椅面 + 兩隻腳，三條線就夠 */
.login-bench {
  position: relative;
  width: 300px;
  height: 11px;
  margin: -4px 0 0 36px;
  border-radius: 3px;
  background: #C3C7D2;
}

.login-bench::before,
.login-bench::after {
  position: absolute;
  top: 100%;
  width: 7px;
  height: 20px;
  background: #C3C7D2;
  content: "";
}

.login-bench::before { left: 18px; }
.login-bench::after { right: 18px; }

/* --- 右：登入 PASS（白卡 + 黃票根）----------------------------------------- */
.login-pass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px;
  /* 629 是 target 換算值；矮視窗（<820px）時讓它縮，不要逼出捲軸 */
  min-height: min(629px, calc(100vh - 200px));
  border-radius: var(--radius-card);
  box-shadow: 0 6px 26px rgba(19, 48, 95, .09);
}

.login-pass-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  background: var(--panel);
}

.login-pass-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--primary-deep);
  font-size: 16px;
  font-weight: 700;
}

.login-brand-ico {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: var(--panel2);
}

.login-pass-title {
  margin: 0;
  color: var(--primary-deep);
  font-size: 33px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.login-pass-lead {
  margin: 12px 0 26px;
  color: var(--muted);
  font-size: 16px;
}

/* 主 CTA。按鈕內不得有子元素（setLoginBusy 會用 textContent 洗掉），
   所以 Google 標誌走 background-image、箭頭走 ::after。 */
.login-cta {
  position: relative;
  width: 100%;
  min-height: 66px;
  padding: 12px 58px;
  border: 0;
  border-radius: 12px;
  background-color: var(--primary-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 50%, var(--white) 18px, transparent 18.5px);
  background-position: 26px center, 18px center;
  background-repeat: no-repeat;
  background-size: 22px 22px, 38px 38px;
  box-shadow: none;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}

.login-cta::after {
  position: absolute;
  top: 50%;
  right: 26px;
  color: var(--white);
  content: "→";
  font-family: var(--font-mono);
  font-size: 20px;
  transform: translateY(-50%);
}

.login-cta:hover:not(:disabled) {
  background-color: var(--primary);
}

.login-cta:disabled {
  opacity: .72;
}

.login-domain {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.login-domain span {
  color: var(--primary-deep);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* 錯誤／自動登出提示：沒訊息時不佔高度，有訊息時醒目 */
/* .msg（style.css）已給 margin／font-size／色，這裡只解掉它的佔位高度 */
.login-msg {
  min-height: 0;
  text-align: center;
}

.login-msg:empty {
  display: none;
}

/* 分隔線上的「或許你會喜歡」 */
.login-perks-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.login-perks-label::before,
.login-perks-label::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.login-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 18px 0;
  border-radius: 12px;
  background: var(--panel2);
  list-style: none;
}

.login-perks li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0 10px;
  border-left: 1px solid var(--line);
  text-align: center;
}

.login-perks li:first-child {
  border-left: 0;
}

.login-perk-ico {
  font-size: 22px;
  line-height: 1.2;
}

.login-perks strong {
  color: var(--primary-deep);
  font-size: 15px;
  font-weight: 700;
}

.login-perks small {
  color: var(--muted);
  font-size: 13px;
}

/* --- 黃色票根 --------------------------------------------------------------
   撕口與首頁乘客票同一套：重複的半圓背景，不用 mask。 */
.login-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px 10px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--amber);
  color: var(--primary-deep);
  text-align: center;
}

.login-stub::before {
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  width: 7px;
  background-image: radial-gradient(circle at 0 50%, var(--panel) 5px, transparent 5.5px);
  background-size: 7px 16px;
  background-repeat: repeat-y;
  content: "";
}

/* 外緣的咬痕，讓它看起來是被撕下來的那一截 */
.login-stub::after {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: var(--scallop);
  background-image: radial-gradient(circle at 100% 50%, var(--bg) var(--scallop), transparent calc(var(--scallop) + .5px));
  background-size: var(--scallop) 14px;
  background-repeat: repeat-y;
  content: "";
}

.login-stub-arrow,
.login-stub-text,
.login-stub-label {
  font-family: var(--font-mono);
  font-weight: 700;
}

.login-stub-arrow {
  font-size: 40px;
  line-height: 1;
}

.login-stub-text {
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1.5;
}

/* 條碼：純 CSS，寬窄不一的直線 */
.login-stub-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.login-stub-barcode {
  width: 42px;
  height: 128px;
  background-image: repeating-linear-gradient(
    to right,
    var(--primary-deep) 0 2px, transparent 2px 5px,
    var(--primary-deep) 5px 6px, transparent 6px 9px,
    var(--primary-deep) 9px 12px, transparent 12px 14px,
    var(--primary-deep) 14px 15px, transparent 15px 19px);
}

.login-stub-label {
  font-size: 13px;
  letter-spacing: .28em;
  writing-mode: vertical-rl;
}

/* --- ≤1180px：右欄先縮 ------------------------------------------------------ */
@media (max-width: 1180px) {
  .login-stage {
    grid-template-columns: minmax(0, 1fr) 620px;
    gap: 28px;
  }

  .login-pass {
    grid-template-columns: minmax(0, 1fr) 118px;
    min-height: 0;
  }

  .login-pass-body {
    padding: 32px 28px;
  }

  .login-pass-title {
    font-size: 28px;
  }
}

/* --- ≤900px：收成單欄，月台插圖收起來 --------------------------------------- */
@media (max-width: 900px) {
  .login-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding-block: 22px;
  }

  /* 插圖是裝飾；窄螢幕留著只會把登入動線往下推 */
  .login-platform {
    display: none;
  }

  .login-hero h1 {
    font-size: clamp(38px, 8vw, 52px);
  }

  .login-points {
    margin-top: 22px;
  }
}

/* --- ≤560px：票根由右側直條轉成底部橫條 ------------------------------------- */
@media (max-width: 560px) {
  .login-pass {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .login-pass-body {
    padding: 24px 18px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .login-pass-title {
    font-size: 24px;
  }

  .login-pass-lead {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .login-cta {
    min-height: 58px;
    padding-inline: 52px;
    background-position: 18px center;
    font-size: 16px;
  }

  /* 橫條票根：撕口從左緣改到上緣 */
  .login-stub {
    flex-direction: row;
    gap: 16px;
    padding: 14px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  .login-stub::before {
    top: -1px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 7px;
    background-image: radial-gradient(circle at 50% 0, var(--panel) 5px, transparent 5.5px);
    background-size: 16px 7px;
    background-repeat: repeat-x;
  }

  .login-stub::after {
    display: none;
  }

  .login-stub-arrow {
    font-size: 28px;
  }

  .login-stub-text {
    font-size: 11px;
    line-height: 1.35;
  }

  .login-stub-barcode {
    width: 78px;
    height: 34px;
  }

  .login-stub-label {
    font-size: 11px;
    letter-spacing: .2em;
    writing-mode: horizontal-tb;
  }

  .login-points {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .login-perks {
    padding: 14px 0;
  }

  .login-perks li {
    padding-inline: 6px;
  }

  .login-perks strong {
    font-size: 13px;
  }

  .login-perks small {
    font-size: 11px;
  }
}