/* 60-auth.css — 登入／不在名單／登出。只用 10-base.css 既有的顏色與尺寸 token，不新增色票。 */

/* 登入與「不在名單」兩頁的次要說明：跟 apply 頁的 .lede 同一個層級。 */
.auth-sub {
  color: var(--text-muted);
  font-size: var(--font-secondary, 0.9375rem);
  line-height: 1.75;
  margin-top: 1rem;
}

/* 他現在登入的那個信箱。獨立一行、字重高一點——這一頁的重點就是讓他一眼看到
   「我登入的是這個帳號」，塞進句子裡會被讀過去。 */
.auth-email {
  font-weight: 600;
  margin: 1.25rem 0;
  word-break: break-all;   /* 長信箱在窄螢幕不要撐破版面 */
}

#dev-login { margin-top: 2rem; }
#dev-login[hidden] { display: none; }

/* 連結：10-base.css 沒有定義 <a>（這個產品原本沒有連結），瀏覽器預設的藍底線在暖色系上
   非常突兀。沿用既有 token，不新增色票。 */
.auth-sub a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-sub a:hover { color: var(--text-muted); }

/* 這兩頁的主要動作按鈕跟上一段說明之間留白多一點：說明句與按鈕貼太近會讀成同一塊。 */
#s-login .btn-centered, #s-noaccess .btn-centered { margin-top: 1.5rem; }

/* ── 登入頁（2026-08-22 收簡後）─────────────────────────────────────────────
   ⚠️ 這一頁**曾經**是對外首頁。2026-08-21 那版有完整行銷文案與四個視覺層級；
   2026-08-22 對外首頁搬到 olitbit.com（marketing/），這裡只剩「讓受邀者進門」。
   因此下面的規則比那版少很多——不是有人刪壞了，是責任變小了。

   ⚠️ 這是全站唯一置中的畫面。前提是文字很少；長文置中不可讀，別把這個做法複製到其他畫面。
   ⚠️ 刻意**不引入** olitbit.com 的襯線字（Noto Serif TC）：為了一個畫面讓每個使用者多下載
   一套字型，而且會造成 App 內部不一致（登入頁襯線、其他畫面無襯線）。兩邊底色本來就幾乎
   相同（#FAF8F4 vs #fdfcfa），品牌連續性改由下面那顆呼吸圓點承擔——純 CSS、零成本。 */

body:has(#s-login.active) { margin-top: 0; margin-bottom: 0; padding-bottom: 0; }
#s-login.active {                    /* id＋class 蓋得過 30-layout.css 的 .screen.active */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  text-align: center;
  /* 這一頁的底部呼吸空間。2026-08-26 之前是由頁底那條法律連結（margin 48 ＋ 行高 ~23
     ＋ padding 28 ≈ 99px）順便撐出來的；8/26 連結移除後改由這裡明講，否則 CTA 會直接
     貼到畫面最底緣。7rem ＝ 那 99px 再多一點，多出來的就是 founder 要的「CTA 上移」。 */
  padding-bottom: 7rem;
}

/* ── 這一頁只有兩個垂直旋鈕，改之前先讀懂，不然會調錯地方 ─────────────────
   ① CTA 群組**貼底**：它的位置只由上面那個 padding-bottom 決定。
      要 CTA 上移 N px ⇒ padding-bottom 加 N。（動 .landing-cta 的 margin-top 不會移動它，
      那條只是「最下限」，實際斷層是被下面的 auto 外距撐開的。）
   ② 品牌群組靠 auto 外距浮在剩餘空間正中央：padding-bottom 一加，剩餘空間變小，
      品牌群組會跟著上移 N/2。要它**原地不動**，就把 .landing 的 padding-top 同幅加 N
      （數學上剛好抵銷）。淨效果＝CTA 上移 N、品牌群組不動、中間那段斷層縮小 N。
   桌機與手機刻意用不同的值：兩邊的 optical balance 本來就不一樣，不為了共用而統一。 */
/* 上下 auto 外距＝主內容釘在剩餘空間正中央。
   （不用 justify-content:center：那會跟上面那段貼底的算術互相打架。） */
.landing { margin: auto 0; padding-top: 4rem; }

/* 品牌：字距拉開、下面留白，讀成標誌而不是麵包屑。
   那顆圓點是 olitbit.com 的品牌記號，從行銷頁點進來的人會認得它。 */
.landing-brand {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 2rem;               /* logo → 主標：40→32（8/26），兩者要讀成一個品牌單位 */
  display: inline-flex;              /* 圓點與字要基線對齊，且整塊仍隨父層置中 */
  align-items: center;
  gap: 0.5rem;
  /* 光學置中（2026-08-27，founder 走查抓到「Olitbit 看起來偏右」）。
     父層 text-align:center 置中的是**整個盒子**，盒子裡有兩段看不見的空白、方向相反：
       ① 左邊 15px＝圓點 7 ＋ gap 8。圓點小又淡，眼睛只認「Olitbit」那七個字母，
          於是那七個字母被推到中軸**右邊** 7.5px（＝15 的一半）。
       ② 右邊 0.22em＝letter-spacing 也會加在最後一個 t 的**右邊**、算進盒寬卻看不見，
          盒子因此右邊虛胖，把看得見的字往**左**帶回 0.11em。兩者相減才是真正的偏移。
     所以幾何位移＝−7.5px ＋ 0.11em ≈ −5.9px，字的墨水中點就落在中軸上。
     ⚠️ 兩項是相減不是相加，寫成 −7.5−0.11em 會往左過頭 3px。
       ③ **再往左 4px 是 optical correction**（founder 走查 2026-08-27，在 ①② 修完之後判的）：
          墨水中點對齊了、看起來仍偏右，因為那顆點是淡綠、視覺重量遠低於深色的字，
          眼睛感受到的重心是右邊那七個字母。這 4px 修的是**視覺重量**不是幾何，
          所以量墨水中點會量到 −4px「不準」——那是刻意的，別把它當 bug 校回 0。
     ⚠️ 這個值跟 ①②③ 綁死：改 gap、圓點大小、圓點顏色／透明度或 letter-spacing，
     這裡都要重新走查——尤其圓點**變深**的話，③ 那 4px 要跟著變小甚至歸零。
     而且歪的量很小，不會有人在 code review 時看出來。
     用 transform 不用 margin：它不佔版面，動它不會牽動上面那組垂直旋鈕的算術。
     驗法：截圖量「Olitbit」的墨水左右緣，中點應在登入按鈕中點**左邊 4px**（按鈕是實心方塊，
     是這頁唯一可信的中軸參考；量整組或量文字盒都會把上面兩段看不見的空白算進去）。 */
  transform: translateX(calc(-11.5px + 0.11em));
}
/* 品牌圓點 `.brand-dot`／`@keyframes brand-breathe`／它的 reduced-motion 規則
   **2026-08-28 搬到 `10-base.css`**：申請頁（`apply.html`）也要用同一顆，而那頁只載
   `10-base.css`、不載本檔（本檔整支 scope 在登入畫面上）。原本是把三個值抄一份過去，
   founder 當場否決——抄的那份遲早跟這份講不同的話。搬完 app 內只有一個定義。
   ⚠️ 本檔留下的是**登入頁專屬的排版**（`.landing-brand` 的 inline-flex／字級／光學位移），
   那些不共用：申請頁的品牌標是頁尾落款，不是 hero 的第一層。
   ⚠️ `marketing/index.html`（olitbit.com）有它自己的第三份（9px／`var(--accent)`／動畫叫
   `breathe`）——那是**獨立的靜態站**，技術上不可能共用樣式檔，只能靠人記著三者要一致。 */

/* 一句定位：整頁唯一放大的字。 */
.landing-tagline {
  /* 26px：桌機螢幕大，24px（＝#s-waiting h1）在這頁稍嫌保守，加 2px 讓
     品牌 → 主張 → 登入 的層級更明確。**font-weight 不動**——這頁不做 SaaS Hero。 */
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.landing-note {
  color: var(--text-faint);
  font-size: var(--font-secondary, 0.9375rem);
  margin-bottom: 0;
}

/* CTA 區與上面拉開，讓「我要不要進去」自成一塊。 */
.landing-cta { margin-top: 3.5rem; }
#s-login .login-apply { text-align: center; margin-top: 1.25rem; }

@media (max-width: 480px) {
  /* 手機要調的比桌機多：品牌群組的位置本來就對，讓畫面重心偏下的是
     「說明 → 登入鈕」之間那段斷層。所以動的是 CTA，不是 Hero。
     這兩個值是上面那組旋鈕的同一招、幅度 56px（法律連結在手機佔 ~85px，85+56≈144）：
     padding-bottom 9rem ⇒ CTA 上移 56；.landing 的 padding-top 同幅 +56 ⇒ Hero 原地不動。
     56 ＝ 第一輪的 40 ＋ founder 真機 A/B 之後追加的 16（2026-08-26 定案）。追加那 16 是在
     iPhone 直向上比過三個變體才定的：CTA↑16／CTA↑24／改成 Hero↓24（斷層一樣縮、但底部
     空白不變）——⚠️ 這裡是 optical balance 的取捨點，不是還沒調完：再往上移，「先看看
     Olitbit」下方的空白就會比中間那段斷層更大，翻成下半部過空。要再動先重跑一次真機 A/B。
     ⚠️ logo → 主標在手機**維持 32px 不變**（8/26 只有桌機從 40 收到 32，收完剛好與這裡
     相同，所以原本那行 margin-bottom: 2rem 變成重複，刪掉；不是把手機一起改小了）。
     主標字級也不跟著桌機加大——21px 在手機已經夠。 */
  #s-login.active { padding-bottom: 9rem; }
  .landing { padding-top: 5.5rem; }
  .landing-tagline { font-size: 1.3125rem; }
  .landing-cta { margin-top: 3rem; }
}