/* ═══════════════════════════════════════════════════════════════════
   AI 應用規劃師備考站 — 跳轉視窗系統 CSS（M1 Lead-magnet 彈窗 + 共用遮罩/toast）
   ─────────────────────────────────────────────────────────────────────
   對齊 design-system.css（--rs-* tokens 與 .rs-* class）＋ ARCHITECTURE.md §3。
   本檔只做「彈窗幾何與狀態」：遮罩 / .rs-modal / .rs-modal-card / 表單 /
   成功 toast / 關閉鈕。內容卡片細節由 modals.html 提供。

   z-index 規劃（ARCHITECTURE §3：三個 modal 互相不疊、一次只一個）：
     header              = 1000（design-system.css）
     現有 diag-unlock    = 99
     M1/M2/M3 modal 遮罩 = 10000（一律高於 header，遮罩蓋全站）
     成功 toast          = 100010（比遮罩再高一層，混在卡片上方不被打斷）
   相同層級 → 用同一組 class 並由 JS 保證一次只 render 一個（見 modals-INTEGRATION.md）。
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────
   遮罩（M1/M2/M3 共用；現有 M2 若逐步換裝可改用此 class）
   ────────────────────────────── */
.rs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;                       /* 高於 header(1000) 與 diag-unlock(99) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 61, 51, .55);    /* --rs-teal-deep 半透明，守住品牌 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rs-tr), visibility var(--rs-tr);
}
/* .is-open 由 JS 再加上去 */
.rs-modal-overlay.is-open { opacity: 1; visibility: visible; }

/* ──────────────────────────────
   彈窗卡片（rs- 系統卡：白底・圓角・深陰影・金黃強調）
   ────────────────────────────── */
.rs-modal {
  width: 100%;
  max-width: 460px;
  background: var(--rs-bg-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-lg);
  padding: clamp(26px, 5vw, 34px);
  text-align: center;
  position: relative;
  transform: translateY(16px) scale(.98);
  transition: transform var(--rs-tr);
}
.rs-modal-overlay.is-open .rs-modal {
  transform: translateY(0) scale(1);
}
/* 頂部細線：金橙漸層裝飾，露出「這是主收單彈窗」的識別度 */
.rs-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: var(--rs-accent-grad);
  border-radius: var(--rs-radius-lg) var(--rs-radius-lg) 0 0;
}

/* 關閉鈕（右上角圓形） */
.rs-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: var(--rs-bg-soft);
  color: var(--rs-text-2);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--rs-tr);
}
.rs-modal-close:hover {
  background: var(--rs-teal-light);
  color: var(--rs-teal-dark);
  transform: rotate(90deg);
}
.rs-modal-close:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: 2px; }

/* 圖示（鉛筆／禮物 emoji 換行不限） */
.rs-modal-ico { font-size: 2.2rem; margin-bottom: 10px; }

/* 標題 + 副標 */
.rs-modal h3 {
  font-size: var(--rs-f-h3);
  font-weight: 800;
  color: var(--rs-ink);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.rs-modal-sub {
  font-size: .92rem;
  color: var(--rs-text-2);
  margin: 0 auto 20px;
  max-width: 340px;
  line-height: 1.6;
}

/* ──────────────────────────────
   表單（M1 Email 收單）
   ────────────────────────────── */
.rs-modal-form { display: flex; flex-direction: column; gap: 12px; }

/* Email 輸入框——套用 ds 中性底色，focus 亮青綠 */
.rs-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid var(--rs-border);
  border-radius: 12px;
  background: var(--rs-bg);
  font-size: 1rem;
  font-family: var(--rs-font);
  color: var(--rs-ink);
  outline: none;
  transition: border-color var(--rs-tr), box-shadow var(--rs-tr), background var(--rs-tr);
}
.rs-modal-input::placeholder { color: var(--rs-text-3); }
.rs-modal-input:focus {
  border-color: var(--rs-teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 184, 148, .15);
}
.rs-modal-input.has-error {
  border-color: var(--rs-red);
  box-shadow: 0 0 0 4px var(--rs-red-light);
}
/* 錯誤訊息（email 無效才顯示） */
.rs-modal-error {
  display: none;
  font-size: .8rem;
  color: var(--rs-red);
  margin: -4px 0 0 2px;
  text-align: left;
}
.rs-modal-error.show { display: block; }

/* CTA——黃色主收單鈕，全寬大字 */
.rs-modal-cta {
  width: 100%;
  margin-top: 2px;
}
.rs-modal-cta:disabled {
  cursor: wait;
  opacity: .7;
  transform: none;
  box-shadow: none;
}

/* 隱私保證（信箱用途小字 + 鎖頭 icon） */
.rs-modal-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .78rem;
  color: var(--rs-text-3);
}
.rs-modal-privacy svg, .rs-modal-privacy .icon { color: var(--rs-teal); font-style: normal; }

/* ──────────────────────────────
   成功 Toast（M1「已寄出，去收信」／未來 M2 也可用此 class 統一）
   ────────────────────────────── */
.rs-toast {
  position: fixed;
  top: 22px; left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 100010;                      /* 比遮罩高，混在彈窗上方不被擋 */
  max-width: min(460px, 92vw);
  width: max-content;
  background: var(--rs-teal-grad);
  color: #fff;
  padding: 13px 26px;
  border-radius: var(--rs-radius-pill);
  font-size: .95rem; font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(0, 184, 148, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--rs-tr), visibility .35s var(--rs-tr), transform .35s var(--rs-tr);
}
.rs-toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 次要提示‧琥珀色（例如「去垃圾郵件找」補充），與成功綠做區別 */
.rs-toast--amber { background: var(--rs-gold-orange); box-shadow: 0 12px 30px rgba(245,159,0,.4); }

/* ──────────────────────────────
   響應式（手機：彈窗近全寬、上下留白、關閉鈕不卡手指）
   ────────────────────────────── */
@media (max-width: 520px) {
  .rs-modal-overlay { padding: 12px; align-items: flex-start; overflow-y: auto; }
  .rs-modal {
    max-width: 100%;
    border-radius: var(--rs-radius);
    margin-top: 6vh;
    padding: 24px 18px 22px;
  }
  .rs-modal::before { border-radius: var(--rs-radius) var(--rs-radius) 0 0; }
  /* 行動主文字級 ≥ 15px（ARCHITECTURE §5 漢字規範） */
  .rs-modal h3 { font-size: 1.12rem; }
  .rs-modal-sub { font-size: .95rem; }
  .rs-modal-input, .rs-modal-cta { font-size: 1rem; }
}

/* 尊重使用者減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  .rs-modal-overlay, .rs-modal, .rs-toast, .rs-modal-close { transition: none !important; }
}