/* ==========================================================================
   GROVYN — 登入 Dropdown Panel（從頁首人頭 icon 點下展開）
   2026-05-23 — 復刻阿翰原型「登入頁面.html」的 dropdown 形態
   - position: fixed 浮在 utils 右下方（top: header-h + 12px / right: 24px）
   - 寬 360px / 高 720px / 卡內含 signup（上半 navy）+ login（下半 cream）兩區
   - Phase 1：signup 標題點擊跳 /login/?action=register；login 區可直接 submit
   - 兩 agent 整合共識：z-index 106 (> mega 105) / backdrop 104 / compact 110 不蓋
   依賴：ts-tokens.css（複用 forest / navy / moss / cream / sun token）
   ========================================================================== */

/* ==========================================================================
   1. Trigger（沿用 .grovyn-utils__item[data-utils-action="account"]）
   ========================================================================== */
.grovyn-utils__item[data-utils-action="account"][aria-expanded="true"] {
  background: rgba(73, 84, 52, 0.18);
  color: var(--ts-forest, #495434);
}
.l-header[data-theme="dark"] .grovyn-utils__item[data-utils-action="account"][aria-expanded="true"] {
  background: rgba(238, 234, 231, 0.14);
  color: var(--ts-sun, #EEE78D);
  opacity: 1;
}

/* ==========================================================================
   2. Panel 容器（fixed 浮在頁首下方）
   ========================================================================== */
/* 2026-05-31：改為全螢幕 flex 置中容器（原為右上錨定 dropdown）。
   首頁滾動收合後不再飄到左邊、與頁首位置完全脫鉤。原卡片視覺（深色森林背景 +
   signup/login slide-up）完全保留，只改定位。
   panel pointer-events:none（佈局用），由 .grovyn-login-card 接管點擊，卡外點擊穿透到 backdrop 關閉。 */
.grovyn-login-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
  z-index: 106; /* > mega 105，< compact 110 */
}
.grovyn-login-panel[data-open="true"] {
  opacity: 1;
}
/* 置中後 panel 全屏，卡片需自帶寬高約束（原本由 panel width:360 / max-height 提供）。
   作用域 .grovyn-login-panel 內，不影響部落格 CTA #bctaReg（.bcta-reg-modal）。 */
.grovyn-login-panel .grovyn-login-card {
  width: 330px;
  max-width: calc(100vw - 32px);
  /* 2026-05-31：縮小卡片 + 上下多留白（calc -120），避免矮視窗下卡片滿高與頁首重疊 */
  height: min(640px, calc(100vh - 120px));
  pointer-events: auto;
  transform: scale(0.98);
  transition: transform 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-panel[data-open="true"] .grovyn-login-card {
  transform: scale(1);
}
/* 拔掉 [hidden] display:block override — 三輪 review R1-M3：
   讓 hidden 屬性語意正常（display:none），由 JS 在 open 時主動 panel.hidden=false，
   close 時等 transition 完才 panel.hidden=true */

/* ==========================================================================
   3. Backdrop（透明全屏點擊區）
   ========================================================================== */
.grovyn-login-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 32, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  z-index: 104; /* < panel 106 < compact 110 */
  display: none;
  transition: opacity 280ms ease;
}
.grovyn-login-backdrop[data-open="true"] {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   4. Card 容器（兩區疊合 + bg-card.jpg 背景）
   ========================================================================== */
.grovyn-login-card {
  position: relative;
  height: 720px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(40, 44, 60, 0.68) 0%,
      rgba(40, 44, 60, 0.45) 35%,
      rgba(40, 44, 60, 0.12) 55%,
      transparent 62%),
    url('../images/login-bg-card.jpg') center/cover no-repeat;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.4),
    0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   5. Signup 區（上半 navy，預設展開）
   ========================================================================== */
.grovyn-login-card__signup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  z-index: 5;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-card__signup.is-slide-up {
  top: 5%;
  transform: translate(-50%, 0%);
}
.grovyn-login-card__signup.is-slide-up
  :is(.grovyn-login-card__fields,
       .grovyn-login-card__submit,
       .grovyn-login-card__divider,
       .grovyn-login-card__social) {
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   6. Title（標題）— 預設大字、slide-up 後縮成小字當切換按鈕
   ========================================================================== */
.grovyn-login-card__title {
  font-family: var(--ts-font-serif-zh, 'Noto Serif TC', serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.15em;
  color: var(--ts-cream, #EEEAE7);
  text-align: center;
  margin: 0;
  user-select: none;
  cursor: default;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-card__title > span {
  margin-right: 6px;
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ts-moss, #A3AC99);
  opacity: 0;
  visibility: hidden;
  display: none; /* 三輪 review R3-M5：「或」span 大字狀態完全隱藏，避免一致性破裂 */
  transition: opacity 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.is-slide-up > .grovyn-login-card__title > span,
.is-slide-up .grovyn-login-card__login-center .grovyn-login-card__title > span {
  display: inline;
}
.is-slide-up > .grovyn-login-card__title,
.is-slide-up .grovyn-login-card__login-center .grovyn-login-card__title {
  font-size: 14px;
  cursor: pointer;
  opacity: 0.75;
}
.is-slide-up .grovyn-login-card__title:hover { opacity: 1; }
.is-slide-up .grovyn-login-card__title > span {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   7. Fields（表單欄位 stack）
   ========================================================================== */
.grovyn-login-card__fields {
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(40, 44, 60, 0.35);
  border-radius: 12px;
  overflow: hidden;
}
.grovyn-login-card__login .grovyn-login-card__fields {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(40, 44, 60, 0.08);
}
.grovyn-login-card__input {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(40, 44, 60, 0.18);
  outline: none;
  background: transparent;
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 14px;
  color: var(--ts-navy, #282C3C);
  box-sizing: border-box;
}
.grovyn-login-card__input:last-child { border-bottom: 0; }
.grovyn-login-card__input::placeholder {
  color: rgba(40, 44, 60, 0.65); /* 三輪 review R2-C2：提升對比 0.55 → 0.65（input bg 白 0.80 上仍可讀） */
}
.grovyn-login-card__input:focus-visible {
  background: rgba(238, 234, 231, 0.55);
  outline: 2px solid var(--ts-moss, #A3AC99);
  outline-offset: -2px;
}

/* ==========================================================================
   8. Submit button（主 CTA pill）
   ========================================================================== */
.grovyn-login-card__submit {
  display: block;
  width: 100%;
  margin: 16px auto 0;
  padding: 12px 45px;
  border: 1px solid rgba(163, 172, 153, 0.25);
  border-radius: 999px;
  background: rgba(73, 84, 52, 0.85);
  color: var(--ts-cream, #EEEAE7);
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3em;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-card__submit:hover {
  background: var(--ts-forest, #495434);
  border-color: var(--ts-moss, #A3AC99);
}
.grovyn-login-card__login .grovyn-login-card__submit {
  background: var(--ts-forest, #495434);
  border: 0;
}
.grovyn-login-card__login .grovyn-login-card__submit:hover {
  background: var(--ts-forest-deep, #2F3721);
}

/* ==========================================================================
   9. Divider（「或」分隔線）
   ========================================================================== */
.grovyn-login-card__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.grovyn-login-card__divider::before,
.grovyn-login-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(163, 172, 153, 0.28);
}
.grovyn-login-card__divider > span {
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--ts-moss, #A3AC99);
}
.grovyn-login-card__login .grovyn-login-card__divider::before,
.grovyn-login-card__login .grovyn-login-card__divider::after {
  background: rgba(40, 44, 60, 0.18);
}
.grovyn-login-card__login .grovyn-login-card__divider > span {
  color: rgba(40, 44, 60, 0.5);
}

/* ==========================================================================
   10. Social buttons（Google / LINE）
   ========================================================================== */
.grovyn-login-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 999px;
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
  text-decoration: none;
}
.grovyn-login-card__social + .grovyn-login-card__social { margin-top: 8px; }
.grovyn-login-card__social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.grovyn-login-card__social--google {
  background: var(--ts-cream, #EEEAE7);
  border: 1px solid rgba(163, 172, 153, 0.45);
  color: var(--ts-navy, #282C3C);
}
.grovyn-login-card__social--google:hover {
  background: var(--ts-warm, #E8E5DA);
  border-color: var(--ts-moss, #A3AC99);
}
.grovyn-login-card__social--line {
  background: #06C755;
  border: 1px solid transparent;
  color: #ffffff;
}
.grovyn-login-card__social--line:hover {
  background: #05b34d;
}

/* ==========================================================================
   11. Login 區（下半 cream，預設 slide-up = 收為標題）
   ========================================================================== */
.grovyn-login-card__login {
  position: absolute;
  inset: 22% 0 0 0;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.06) 40%,
      transparent 62%),
    linear-gradient(rgba(238, 234, 231, 0.10), rgba(238, 234, 231, 0.14)),
    url('../images/login-bg-login-zone.jpg') center top/cover no-repeat;
  z-index: 5;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-card__login.is-slide-up {
  top: 90%;
  inset-block-end: 0;
}
.grovyn-login-card__login-center {
  position: absolute;
  top: calc(50% - 8%);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  z-index: 5;
}
.grovyn-login-card__login.is-slide-up .grovyn-login-card__login-center {
  top: 10%;
  transform: translate(-50%, 0%);
}
.grovyn-login-card__login.is-slide-up .grovyn-login-card__login-center
  :is(.grovyn-login-card__fields,
       .grovyn-login-card__submit,
       .grovyn-login-card__divider,
       .grovyn-login-card__social) {
  opacity: 0;
  visibility: hidden;
}
.grovyn-login-card__login .grovyn-login-card__title {
  color: #ffffff;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.55),
    0 2px 24px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   12. Error banner（admin-post.php 失敗 redirect /login/?error= 時，
        新版改成在 dropdown 內顯示，PHP render 後 JS 自動 open dropdown）
   ========================================================================== */
.grovyn-login-card__error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.18);
  border: 1px solid rgba(220, 53, 69, 0.45);
  color: #ffd6da;
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ========================================================================== 
   13. Mobile（≤768）：置中卡天生 RWD（flex 置中 + 卡 max-width:calc(100vw-32px)），
        只縮小外距讓小螢幕卡片更貼邊
   ========================================================================== */
@media (max-width: 768px) {
  .grovyn-login-panel {
    padding: 16px 12px;
  }
}

/* ==========================================================================
   15. Nextend Google button override（v3 方案 A 2026-05-23）
        - Nextend Social Login shortcode 在 dropdown 內 inline render，
          原樣式 (default container margin / button border / max-width) 與 card
          配色不一致，這裡把它樣式 reset 對齊原 .grovyn-login-card__social--google
        - 中文 label：CLAUDE.md §5 #12 — Nextend 預設英文「Continue with Google」
          用 font-size:0 隱藏 + pseudo-element ::after 蓋中文（signup / login 區用
          parent selector 區分文案）
   ========================================================================== */
.grovyn-login-card .nsl-container,
.grovyn-login-card .nsl-container-block {
  margin: 12px 0 0;
  width: 100%;
  max-width: none;
}
.grovyn-login-card .nsl-container + .grovyn-login-card__social,
.grovyn-login-card__social + .nsl-container { margin-top: 8px; }
.grovyn-login-card .nsl-container .nsl-button,
.grovyn-login-card .nsl-container button.nsl-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  cursor: pointer;
  border: 1px solid rgba(163, 172, 153, 0.45);
  background: var(--ts-cream, #EEEAE7);
  color: var(--ts-navy, #282C3C);
  box-shadow: none;
  transition: all 280ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.grovyn-login-card .nsl-container .nsl-button:hover,
.grovyn-login-card .nsl-container button.nsl-button:hover {
  background: var(--ts-warm, #E8E5DA);
  border-color: var(--ts-moss, #A3AC99);
}
.grovyn-login-card .nsl-button-svg-container,
.grovyn-login-card .nsl-button-svg-container svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* 隱藏 Nextend 預設 EN label，pseudo 蓋中文（signup / login 各自區分）
   v3 fix：Nextend plugin 自己 enqueue 的 CSS specificity 比我們高，加 !important 強制覆蓋（CLAUDE.md §5 #12 同 pattern） */
.grovyn-login-card .nsl-button-label-container { font-size: 0 !important; line-height: 0 !important; }
.grovyn-login-card__signup .nsl-button-label-container::after {
  content: '使用 Google 快速註冊';
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ts-navy, #282C3C);
}
.grovyn-login-card__login .nsl-button-label-container::after {
  content: '使用 Google 快速登入';
  font-family: var(--ts-font-sans-zh, 'Noto Sans TC', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ts-navy, #282C3C);
}

/* ==========================================================================
   14. prefers-reduced-motion：拔掉所有 transition
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .grovyn-login-panel,
  .grovyn-login-card__signup,
  .grovyn-login-card__login,
  .grovyn-login-card__login-center,
  .grovyn-login-card__title,
  .grovyn-login-card__title > span,
  .grovyn-login-card__submit,
  .grovyn-login-card__social,
  .grovyn-login-card .nsl-container .nsl-button {
    transition: none !important;
  }
}