/* 刊物訂閱入口與確認/退訂落地頁的樣式（週報 N2）。
 *
 * 全部走全站主題代幣（--card-bg/--border/--text/--brand-cyan-*），四套主題
 * 自動跟著換，不寫死任何顏色字面值——這是站上既有的視覺語言，訂閱框不該
 * 長得像外掛廣告。
 *
 * 刻意獨立成一支 css（不塞進 app.css / welcome.css）：
 * ①同一份表單要同時掛在 /welcome 與 /login 兩頁，樣式跟著元件走最省事；
 * ②不動 app.css 就不必替全站每一份模板 bump `?v=`（B18 版號同步的成本
 *   與風險都在「漏改一個模板」上）。
 */

/* ---------------------------------------------------------------------------
 * 一、訂閱表單（.nl-sub-*）：/welcome 主 CTA 與 /login 註冊頁底部共用
 * ------------------------------------------------------------------------- */

.nl-sub-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  text-align: left;
}

/* h2 與 h3 同款（SEO/AEO 修復波 2026-08-01）：welcome 的首屏訂閱卡標題原本
   是 h3，而它前面只有 h1——h1→h3 是標題階層跳階，搜尋引擎與螢幕閱讀器都會
   把中間那層當成缺漏。該處已改成 h2，樣式在這裡一併涵蓋，兩種標籤外觀完全
   相同（login 頁的兩張卡仍是 h3，那裡前面有 h2，階層本來就正確）。 */
.nl-sub-card h2,
.nl-sub-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
}

.nl-sub-lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.nl-sub-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nl-sub-row .text-input {
  flex: 1 1 220px;
  min-width: 0;
}

.nl-sub-row .btn-save {
  flex: 0 0 auto;
}

/* 刊物勾選框：預設兩份全勾（站長 2026-07-31 20:39 裁定）。清單由
 * GET /api/v1/newsletter/consent-notice 動態長出，見 newsletter_subscribe.js。 */
.nl-sub-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 10px;
}

.nl-sub-pick {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}

.nl-sub-pick input {
  margin-top: 3px;
  accent-color: var(--brand-cyan);
  flex: 0 0 auto;
}

.nl-sub-pick-when {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* 個資告知（98 號文件 §20）：文字來自後端 CONSENT_NOTICE 常數，不在這裡
 * 硬寫——法遵文字兩處並存，改一處漏一處就是「站上寫的」與「實際做的」不符。 */
.nl-sub-consent {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-faint);
}

.nl-sub-consent a {
  color: var(--brand-cyan-text);
}

/* A4（2026-08-11）：告知改 details 摺疊，summary 一行可見、全文展開 */
.nl-sub-consent > summary.nl-sub-consent-lead {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}
.nl-sub-consent > summary.nl-sub-consent-lead::-webkit-details-marker { display: none; }
.nl-sub-consent > summary.nl-sub-consent-lead::after {
  content: " ▾";
  color: var(--text-faint);
}
.nl-sub-consent[open] > summary.nl-sub-consent-lead::after { content: " ▴"; }
.nl-sub-consent-body { margin: 4px 0 0; }

.nl-sub-status {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  min-height: 1em;
  color: var(--text-muted);
}

.nl-sub-status.ok {
  color: var(--brand-cyan-text);
  font-weight: 600;
}

.nl-sub-status.err {
  color: var(--danger);
}

/* 訂閱成功步驟面板（站長 2026-08-03 23:39 令）：confirmation_sent 後表單
 * 整卡換成這塊，把「去點確認信」四步講到不可能漏看。醒目框線用品牌色、
 * 警語用 --danger——這是整個訂閱流程唯一必須引人注目的時刻。 */
.nl-sub-done {
  margin-top: 4px;
  padding: 16px 18px;
  border: 1.5px solid var(--brand-cyan);
  border-radius: var(--radius);
  background: rgba(var(--brand-cyan-rgb), 0.06);
}

.nl-sub-done-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.nl-sub-done-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
}

.nl-sub-done-steps li + li {
  margin-top: 4px;
}

.nl-sub-done-steps strong {
  color: var(--brand-cyan-text);
  word-break: break-all;
}

.nl-sub-done-warn {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}

/* 蜜罐欄位（反機器人，抄註冊表單既有作法）：一般使用者看不到也 tab 不到。 */
.nl-sub-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 二、註冊頁「最新一期搶先看」預覽框（.nl-preview-*）
 * ------------------------------------------------------------------------- */

.nl-preview {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
}

.nl-preview h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
}

.nl-preview-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 固定高度＋內部捲動：這是一份完整的 email HTML，不限高會把整頁撐爆。
 * iframe 而不是把 HTML 內嵌進本頁：刊物有自己的一整套 inline 樣式與 <html>
 * 外框，內嵌等於讓兩套 CSS 互相污染（而 iframe 天生就是樣式隔離邊界）。 */
.nl-preview-frame {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  display: block;
}

.nl-preview-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 640px) {
  .nl-preview-frame { height: 360px; }
}

/* ---------------------------------------------------------------------------
 * 三、確認／退訂／首期預告落地頁（.nl-result-*）
 * ------------------------------------------------------------------------- */

.nl-result-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
}

.nl-result-logo {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 24px rgba(var(--brand-cyan-rgb), 0.35));
}

.nl-result-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  /* 舉一反三 20260728：品牌字色代幣化 --brand-logo-fg，四套主題各自可讀。 */
  color: var(--brand-logo-fg);
}

.nl-result-title {
  margin: 8px 0 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--text-strong);
}

.nl-result-message {
  margin: 0;
  max-width: 460px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

.nl-result-cta {
  margin-top: 6px;
  text-decoration: none;
}

.nl-result-schedule {
  width: 100%;
  max-width: 460px;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  text-align: left;
}

.nl-result-schedule-row + .nl-result-schedule-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.nl-result-schedule-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.nl-result-schedule-when {
  display: block;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.nl-result-schedule-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}

.nl-result-note {
  margin: 0;
  max-width: 460px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
}

.nl-result-links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-faint);
}

.nl-result-links a {
  color: var(--brand-cyan-text);
  text-decoration: none;
  font-weight: 600;
}