/* ═══════════════════════════════════════════════════════════════════
   Ladder Lessons · ll-funnel.css
   ll-funnel.js 產生嘅表單樣式。跟 06_LADDER_LESSONS_STYLE_GUIDE：
   3px ink 框 · --r-lg 圓角 · 硬陰影 · 珊瑚底一定配墨字。
   ⚠️ 呢個檔會喺 landing page、portal、Ladder Phonics 三處用，
      所以唔可以靠任何一個站嘅 CSS 變數 —— 自己帶 fallback。
   ═══════════════════════════════════════════════════════════════════ */
.llf{
  --f-coral:#FF6B6B; --f-coral2:#FF8E53; --f-ink:#2C3E50; --f-soft:#5A6C7D;
  --f-cream:#FFF9F0; --f-cream2:#F6EDE0; --f-yellow:#FFE66D;
  --f-ok:#15803D; --f-err:#B93A2B;
  --f-head:'Fredoka','Noto Sans HK','PingFang HK','Microsoft JhengHei',sans-serif;
  --f-body:'Nunito','Noto Sans HK','PingFang HK','Microsoft JhengHei',sans-serif;
  display:block;font-family:var(--f-body);color:var(--f-ink);
  border:3px solid var(--f-ink);border-radius:24px;background:#fff;
  box-shadow:0 4px 0 rgba(44,62,80,.14);overflow:hidden;position:relative}
.llf::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--f-coral),var(--f-coral2))}
.llf__body{padding:24px 22px 20px}
.llf--compact .llf__body{padding:16px 16px 14px}

.llf__t{display:block;font-family:var(--f-head);font-weight:700;
  font-size:clamp(17px,2.2vw,22px);line-height:1.3;margin-bottom:6px}
.llf__b{margin:0 0 14px;font-size:14.5px;font-weight:600;
  color:var(--f-soft);line-height:1.6}
.llf--compact .llf__b{margin-bottom:10px;font-size:13.5px}

.llf__form{display:flex;gap:9px;flex-wrap:wrap}
.llf__in{flex:1 1 220px;min-width:0;min-height:48px;
  font-family:var(--f-body);font-size:16px;font-weight:600;  /* ⚠️ 16px 起 —— 細過就會令 iOS Safari 自動放大成頁 */
  padding:11px 15px;border:2.5px solid var(--f-ink);border-radius:9999px;
  background:var(--f-cream);color:var(--f-ink);outline:none}
.llf__in::placeholder{color:var(--f-soft);font-weight:600}
.llf__in:focus{background:#fff;box-shadow:0 0 0 4px rgba(255,107,107,.22)}
.llf__btn{flex:0 0 auto;min-height:48px;cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.01em;
  padding:11px 26px;border:3px solid var(--f-ink);border-radius:9999px;
  /* 珊瑚底 → 墨字。白字落珊瑚得 2.78:1，過唔到 AA。*/
  background:linear-gradient(135deg,var(--f-coral) 0%,var(--f-coral2) 100%);
  color:var(--f-ink);box-shadow:0 4px 0 rgba(44,62,80,.14);
  transition:transform .12s,box-shadow .12s}
.llf__btn:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(44,62,80,.14)}
.llf__btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.llf__btn:disabled{background:#E5E7EB;color:var(--f-soft);
  border-color:#9CA3AF;box-shadow:none;cursor:default}
.llf__btn:focus-visible,.llf__in:focus-visible{outline:none;
  box-shadow:0 0 0 4px var(--f-yellow),0 4px 0 rgba(44,62,80,.14)}

.llf__note{margin:11px 0 0;font-size:12.5px;font-weight:600;
  color:var(--f-soft);line-height:1.55}
.llf__note.is-ok{color:var(--f-ok)}
.llf__note.is-err{color:var(--f-err)}

/* ═══ 交完 email 之後嘅狀態 ══════════════════════════════════════
   ⚠️ 2026-08-11 重做。原本係三行直排（標題／一句／一條細字 link），
      擺喺一個 24px padding 嘅大卡入面 —— 三行短字撐住個高卡，
      所以又長又空。而且真正嘅下一步（去遊戲庫）係一條 12.5px 細字 link：
        · 撳擊範圍遠細過 WCAG 2.5.8 嘅 24×24（更加唔使講 2.5.5 嘅 44×44）
        · 冇指定顏色 → 用返瀏覽器預設藍，同品牌完全唔夾
      呢個係成條 funnel 最後一步，唔應該係最難撳嗰粒。

   改成橫向：綠色剔章 + 文字 + 一粒真掣。卡矮咗，主行動變返 48px 高。 */
.llf.is-done .llf__form{display:none}
.llf.is-done{border-color:var(--f-ok)}
.llf.is-done::before{background:var(--f-ok)}
.llf.is-done .llf__body{display:flex;align-items:center;gap:8px 14px;
  flex-wrap:wrap;padding:18px 20px}
.llf.is-done .llf__t{font-size:17px;margin-bottom:2px}
.llf.is-done .llf__b{margin:0;font-size:13.5px}

/* ⚠️ 個剔用 SVG，唔用「✓」文字。
   ✓ 喺唔同系統會讀成「check mark」、「勾號」或者索性唔讀，
   而佢喺度只係裝飾 —— 「你已經解鎖咗」本身已經講晒。
   所以畫出嚟 + aria-hidden，唔畀螢幕閱讀器讀。
   ⚠️ #15803D 配白 = 5.0:1，過到 AA。唔好因為想「鮮啲」而調淺。 */
.llf__check{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--f-ok);display:flex;align-items:center;justify-content:center}
.llf__check svg{width:19px;height:19px;display:block}

/* flex:1 1 180px —— 窄過 180px 就自己跌落一行，唔會同粒掣擠埋一舊。
   ⚠️ min-width:0 一定要有，唔係 flex item 縮唔細過內容。 */
.llf__done-txt{flex:1 1 180px;min-width:0}

/* 借用 .llf__btn 嘅樣（珊瑚底 + 墨字，已驗過對比），
   但佢本來寫畀 <button>，落 <a> 要補返呢幾條。 */
.llf__btn--go{flex:0 0 auto;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:11px 22px;font-size:15px}

@media (max-width:520px){
  /* ⚠️⚠️ flex-direction 一轉做 column，flex-basis 就係量緊「高度」唔係闊度。
     .llf__in 寫住 flex:1 1 220px，喺 row 之下係「至少 220px 闊」，
     一轉 column 就變成「220px 高」—— 個輸入格變咗一大嚿。
     （Shari 2026-08-04 手機截圖影到）
     所以轉 column 之後一定要重設 flex。*/
  .llf__form{flex-direction:column}
  .llf__in{flex:0 0 auto;width:100%;min-height:52px}
  .llf__btn{flex:0 0 auto;width:100%;min-height:52px}
  /* 手機：剔章同文字一行，粒掣自己一行全闊 */
  .llf.is-done .llf__done-txt{flex:1 1 auto}
  .llf__btn--go{width:100%;min-height:52px}
}
@media (prefers-reduced-motion:reduce){.llf__btn{transition:none}}