/* ══════════════════════════════════════════════════════════════════════
   《傳承未來》教會傳承診斷 — 樣式
   ──────────────────────────────────────────────────────────────────────
   色票全部集中在 :root，要調色只改這一段。

   ⚠️ 四個結果色 (--res-*) 只准出現在結果頁。
      作答過程一律中性色 —— 顏色不可暗示題目分類。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 中性色（全站骨幹） ── */
  --paper:    #FCFBF7;   /* 紙白，頁面底色 */
  --paper-2:  #F2F0E8;   /* 次級底：chip 靜止態、淡色區塊 */
  --white:    #FFFFFF;   /* 卡片面 */
  --ink:      #17161A;   /* 主文字 */
  --ink-2:    #5C5A55;   /* 次要文字 */
  --ink-3:    #767369;   /* 註解、頁碼、未完成狀態（白底 4.76:1，達 WCAG AA） */
  --line:     #E4E1D6;   /* 分隔線、卡片邊 */

  /* ── 訊號色（取自《傳承未來》書封） ── */
  --signal:   #FDD900;   /* 書封黃：進度、選中、主按鈕 */
  --signal-d: #A88C00;   /* 黃色當文字用（純黃在白底對比不足） */

  /* ── 四種結果識別色（降飽和，只在結果頁出現） ──
     -deep 是 hero 滿版底色專用。橘與琥珀原色配白字只有 3.9:1 與 3.2:1，
     大字勉強過但 13px 的 eyebrow 不行，所以壓深到白字 4.8:1 以上。 */
  --res-orange: #C8642A;  --res-orange-bg: #FBF0E8;  --res-orange-deep: #B4551F;  /* 關係風險型 */
  --res-green:  #4E7C59;  --res-green-bg:  #EDF3EE;  --res-green-deep:  #46704F;  /* 文化斷層型 */
  --res-blue:   #3D5A80;  --res-blue-bg:   #ECF0F5;  --res-blue-deep:   #3D5A80;  /* 團隊承接型 */
  --res-amber:  #B8863B;  --res-amber-bg:  #F9F2E6;  --res-amber-deep:  #966826;  /* 心理預備型 */

  /* ── 字級階層 ──
     跳躍率靠這組數字撐。結果名是全站最大的東西（最大 76px），
     微標最小 12px —— 比例約 6.3 倍，眼睛一進頁面就有落點。 */
  /* 封面主標。滿版黃底、兩行，最長那行「迎接下一個世代了嗎？」10 個字，
     375px 下 34px×10=340px 剛好在 331px 內容寬外一點點，所以下限壓 32px。 */
  --t-cover:  clamp(32px, 7.6vw, 68px);
  /* 結果名，全站最大。四個結果名都是 5 個字，375px 下 46.9px×5=234px
     還在 339px 的內容寬度裡，不會破版。 */
  --t-result: clamp(46px, 12.5vw, 76px);
  --t-q:      clamp(23px, 5vw, 38px);     /* 題目 */
  --t-h2:     clamp(21px, 4.2vw, 28px);   /* hero 副標 */
  --t-lead:   clamp(19px, 3.4vw, 24px);   /* 收尾引言 */
  --t-body:   17px;
  --t-small:  14px;
  --t-micro:  12px;

  --maxw: 720px;
  --stage-pad: 22px;

  --serif: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  --sans:  'Noto Sans TC', -apple-system, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  --num:   'Newsreader', Georgia, 'Times New Roman', serif;  /* 只吃數字與拉丁字 */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 中文字級一大就會顯得鬆散，補負字距收回來 */
.tight{ letter-spacing:-.022em }

*, *::before, *::after{ box-sizing:border-box }

/* clip 而不是 hidden：不會產生捲動容器，滿版 hero 溢出的部分直接切掉 */
html{ -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;

  /* 作答時的環境漸變：第 1 題到第 12 題，底色極緩慢從紙白偏向暖白。
     這是綁「進度」不是綁「分類」—— 所有人所有題目都一樣，不會暗示分類。 */
  transition:background-color 1.1s var(--ease);
}
body.has-progress{
  background-color:color-mix(in srgb, var(--paper) calc(100% - var(--warm, 0) * 62%), #F3EAD0);
}

button{ font:inherit; color:inherit; cursor:pointer }

/* 鍵盤焦點永遠看得見；滑鼠點擊不顯示 */
:focus{ outline:none }
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

/* 換頁後程式會對標題呼叫 .focus()，讓鍵盤與螢幕閱讀器使用者知道跳到哪了。
   Chrome 對這種程式觸發的焦點仍然會畫外框 —— 標題被框起來很奇怪。
   焦點要留（不然無障礙會壞），框不畫。互動元件的焦點環不受影響。 */
[data-autofocus]:focus,
[data-autofocus]:focus-visible{ outline:none }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ══ 進度流線（簽名元素） ══════════════════════════════════════════
   書封那束平行細線。每答一題多露出一段。
   作答期間是墨灰的，到結果頁才綻放成結果識別色。          */

#progress{
  position:fixed; inset:0 0 auto 0; z-index:40;
  height:38px;
  background:var(--paper);
  opacity:0; transform:translateY(-100%);
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             background-color 1.1s var(--ease);
  pointer-events:none;
}
/* 底色跟著頁面一起變暖，否則進度條會是一塊顏色對不上的白，
   邊緣出現一條看得見的接縫。--warm 由 body 繼承下來。 */
body.has-progress #progress{
  background-color:color-mix(in srgb, var(--paper) calc(100% - var(--warm, 0) * 62%), #F3EAD0);
}
#progress.on{ opacity:1; transform:none }
#progress svg{ display:block; width:100%; height:100% }

.strand-track{ stroke:var(--line); fill:none; stroke-width:1.15 }
.strand-fill { stroke:var(--ink-3); fill:none; stroke-width:1.15 }
/* 已完成段最前緣的那一筆用書封黃，讓進度有個亮點 */
.strand-fill:nth-child(3n){ stroke:var(--signal-d) }

#progress .clip-rect{ transition:width .5s var(--ease) }


/* ══ 版面骨架 ═════════════════════════════════════════════════════ */

#stage{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 var(--stage-pad);
}
body.has-progress #stage{ padding-top:38px }

.screen{
  width:100%; max-width:var(--maxw); margin:0 auto;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:40px 0 32px;
  animation:rise .42s var(--ease) both;
}
.screen.flow{ justify-content:flex-start; padding-top:56px }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

.eyebrow{
  font-size:var(--t-micro); letter-spacing:.2em; font-weight:600;
  color:var(--ink-3); margin:0 0 18px; text-transform:none;
}


/* ══ 封面 ═════════════════════════════════════════════════════════
   只有這一屏鋪滿書封黃。作答與結果頁維持米白，所以不會跟
   「心理預備型」的琥珀撞色。                                    */

.screen.cover{
  max-width:none; display:block;
  padding:0;
  text-align:left;
}

.cover-sheet{
  /* 滿版：負 margin 抵銷 #stage 的左右內距就到達視窗邊緣。
     不用 100vw，所以不會被捲軸寬度算進去而產生水平溢出。 */
  margin-inline:calc(var(--stage-pad) * -1);
  min-height:100dvh;
  padding:clamp(56px,10vh,110px) var(--stage-pad) clamp(48px,8vh,88px);
  background:var(--signal);
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center;
}
.cover-inner{
  width:100%; max-width:760px; margin:0 auto;
  position:relative; z-index:1;
}

/* 白色流線橫跨到底、出血到兩側 */
.cover-art{
  position:absolute; z-index:0; pointer-events:none;
  left:-4%; right:-4%; width:108%;
  top:clamp(8%, 12vh, 16%);
  height:clamp(120px, 22vh, 210px);
}
.cover-art .strand-track{ stroke:rgba(255,255,255,.34); stroke-width:1.4 }
.cover-art .strand-fill { stroke:#FFFFFF; stroke-width:1.7 }
.cover-art .strand-fill:nth-child(3n){ stroke:rgba(23,22,26,.30) }

.cover .eyebrow{
  color:rgba(23,22,26,.72);
  letter-spacing:.24em;
  margin:0 0 clamp(120px, 20vh, 190px);   /* 讓出流線的位置 */
}

.cover h1{
  font-family:var(--serif); font-weight:900;
  font-size:var(--t-cover); line-height:1.28;
  letter-spacing:-.028em;
  color:var(--ink);
  margin:0 0 26px;
}
.cover h1 span{ display:block }

.cover .rule{
  width:56px; height:3px; background:var(--ink);
  border:0; margin:0 0 24px;
}

.cover .kicker{
  font-size:16px; font-weight:700; letter-spacing:.08em;
  color:var(--ink); margin:0 0 10px;
}
.cover .lede{
  margin:0 0 40px; color:rgba(23,22,26,.78); line-height:1.9;
}
.cover .lede span{ display:block }

.cover .source{
  margin:28px 0 0; font-size:var(--t-small); color:rgba(23,22,26,.62);
  line-height:1.7;
}

/* 黃底上不能放黃按鈕，改黑底白字 */
.cover .btn{
  background:var(--ink); color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}

/* 主按鈕 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 42px;
  background:var(--signal); color:var(--ink);
  border:0; border-radius:999px;
  font-size:17.5px; font-weight:700; letter-spacing:.04em;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.btn:active{ transform:translateY(0) }
.btn[disabled]{
  background:var(--paper-2); color:var(--ink-3);
  cursor:not-allowed; transform:none; box-shadow:none;
}
.btn .arr{ transition:transform .2s var(--ease) }


/* ══ 身分選擇 ═════════════════════════════════════════════════════ */

.q-title{
  font-family:var(--serif); font-weight:600;
  font-size:var(--t-q); line-height:1.55;
  margin:0 0 8px; text-wrap:pretty;
}
.q-note{
  font-size:var(--t-small); color:var(--ink-3); margin:0 0 26px;
}

.opts{ display:flex; flex-direction:column; gap:9px }

/* 選項卡：左緣 4px 是選中標記。整站唯一的選中訊號。 */
.opt{
  position:relative; display:flex; align-items:center; width:100%; text-align:left;
  padding:17px 52px 17px 24px;
  background:var(--white);
  border:1px solid var(--line); border-radius:11px;
  line-height:1.6;
  box-shadow:0 1px 2px rgba(23,22,26,.03);
  transition:border-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
/* 左緣 4px 是選中標記 */
.opt::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px;
  border-radius:0 3px 3px 0; background:transparent;
  transition:background .18s var(--ease), top .18s var(--ease), bottom .18s var(--ease);
}
.opt:active{ transform:translateY(0) }
.opt[aria-checked="true"]{
  border-color:var(--ink);
  box-shadow:0 4px 14px -10px rgba(23,22,26,.4);
}
.opt[aria-checked="true"]::before{ background:var(--signal); top:-1px; bottom:-1px }

/* 選中時右側描出一個勾 */
.opt .tick{
  position:absolute; right:20px; top:50%; translate:0 -50%;
  width:19px; height:19px; overflow:visible;
  stroke:var(--ink); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:opacity .18s var(--ease);
}
.opt .tick path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .34s var(--ease) .04s;
}
.opt[aria-checked="true"] .tick{ opacity:1 }
.opt[aria-checked="true"] .tick path{ stroke-dashoffset:0 }

.opt .lab{ font-weight:500 }
.opt .sub{
  display:block; font-size:var(--t-small); color:var(--ink-3); margin-top:2px;
}

/* 身分卡稍大一點 */
.role .opt{ padding:20px 22px 20px 24px }


/* ══ 12 題作答 ════════════════════════════════════════════════════ */

/* 題號：大型襯底數字。作答頁不再像表單，主要靠這一個元素。 */
.counter{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 6px; line-height:1;
}
.counter .n{
  font-family:var(--num); font-weight:200; font-variant-numeric:lining-nums;
  font-size:clamp(56px, 13vw, 84px);
  color:var(--line);
  letter-spacing:-.03em;
  transition:color .4s var(--ease);
}
.counter .of{
  font-family:var(--num); font-weight:400;
  font-size:15px; color:var(--ink-3); letter-spacing:.06em;
  padding-bottom:6px;
}

.quiz .q-title{
  font-weight:700;
  margin:0 0 32px;
  max-width:20em;
}

/* 底部導覽：左返回、右回到最遠處 */
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:34px; min-height:34px;
}
.linkbtn{
  background:none; border:0; padding:6px 2px;
  font-size:var(--t-small); color:var(--ink-3);
  display:inline-flex; align-items:center; gap:7px;
  transition:color .16s;
}
.linkbtn[hidden]{ display:none }


/* ══ 其他資訊題（四題一頁，chip 排列） ════════════════════════════ */

.demo .block{ margin-bottom:30px }
.demo .block h3{
  font-family:var(--serif); font-weight:600;
  font-size:19px; line-height:1.6; margin:0 0 13px;
}
/* 白底 ＋ 黑框，讀起來才像可以按的東西。
   原本灰底無框在暖白背景上幾乎浮不出來。 */
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{
  padding:11px 18px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--ink); border-radius:999px;
  font-size:15.5px; line-height:1.5;
  transition:background .15s var(--ease), color .15s var(--ease),
             box-shadow .15s var(--ease), transform .15s var(--ease);
}
.chip[aria-checked="true"]{
  background:var(--signal); color:var(--ink);
  border-color:var(--ink); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--ink);
}

.demo .submit-row{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
}
.demo .submit-hint{ font-size:var(--t-small); color:var(--ink-3); margin:0 }


/* ══ 風險符號（四象限與 hero 共用） ═══════════════════════════════
   跟頂端進度條同一套線條語言，畫的是「這束線出了什麼事」。   */

.glyph{ display:block; overflow:visible }

/* 靜止狀態一定是「完全沒有虛線」的實線。
   dash 只在 .drawing 期間存在，動畫跑完 glyphs.js 會把 class 拿掉。
   這是為了 Safari —— 它對 pathLength 的支援不穩，dasharray 留著會
   把線畫成斷斷續續的虛線，看起來像圖案裂開。 */
.glyph path{ stroke:currentColor; fill:none }

.glyph.drawing path{
  stroke-dasharray:1;
  animation:glyphDraw .9s var(--ease) backwards;
}
@keyframes glyphDraw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }


/* ══ 結果頁 ═══════════════════════════════════════════════════════ */

/* 這一屏自己管寬度，hero 才有辦法做滿版 */
.screen.result{
  max-width:none; display:block;
  padding:0 0 72px;
}
.result-body{ max-width:760px; margin:0 auto }


/* ── 滿版結果色 HERO ──
   靠負 margin 抵銷 #stage 的左右內距就到達視窗邊緣。
   不用 100vw，所以不會被捲軸寬度算進去而產生水平溢出。 */
.result-hero{
  margin-inline:calc(var(--stage-pad) * -1);
  padding:clamp(54px,9vw,88px) var(--stage-pad) clamp(50px,8vw,80px);
  margin-bottom:clamp(40px,6vw,60px);
  background:var(--res-deep);
  position:relative; overflow:hidden; isolation:isolate;
}
/* 文字在左、符號在右的兩欄。
   ⚠️ 符號進入「正常流」是刻意的 —— 之前用絕對定位橫跨整個底部，
      跟主標必然重疊。改成 grid 之後，從結構上就不可能壓到字，
      日後改字級或文案長度也不會再撞一次。
      格子裡只能有 .txt 與符號兩個子元素。 */
.result-hero .inner{
  max-width:760px; margin:0 auto;
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:36px; align-items:center;
}

/* 不再被文字壓住，所以可以比原本的 .19 更清楚一點 */
.result-hero .glyph{
  width:100%; height:auto;
  color:#fff; opacity:.32;
  pointer-events:none;
}
.result-hero .glyph path{ stroke-width:2.2 }

/* 用純白不用半透明：12px 疊在橘／琥珀底上，78% 白只有 3.68:1 不合格。
   層級改靠字級與字距拉開，不靠降低不透明度。 */
.result-hero .eyebrow{
  color:#fff; opacity:.96;
  letter-spacing:.22em;
  margin:0 0 20px;
}
.result-hero .name{
  font-family:var(--serif); font-weight:900;
  font-size:var(--t-result); line-height:1.1;
  letter-spacing:-.022em;
  color:#fff; margin:0 0 22px;
}
.result-hero .head{
  font-family:var(--serif); font-weight:500;
  font-size:var(--t-h2); line-height:1.6;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.94); margin:0;
  max-width:20em; text-wrap:pretty;
}

/* 窄螢幕沒有右欄可用，收成單欄，符號移到最上面當一條獨立的帶子 */
@media (max-width:700px){
  .result-hero .inner{ grid-template-columns:1fr; gap:0 }
  .result-hero .glyph{
    order:-1;
    width:min(300px, 78%);
    margin:0 0 26px;
  }
}

/* 進場：三行依序推上來 */
.result-hero .eyebrow,
.result-hero .name,
.result-hero .head{ animation:heroUp .85s var(--ease) backwards }
.result-hero .eyebrow{ animation-delay:.06s }
.result-hero .name  { animation-delay:.20s }
.result-hero .head  { animation-delay:.36s }
@keyframes heroUp{
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:none }
}


/* ── 四象限資訊圖 ── */

/* 兩側細線把標題架起來，不然它在大片留白裡站不住 */
.quad-label{
  display:flex; align-items:center; gap:16px;
  font-size:15px; letter-spacing:.18em; font-weight:700;
  color:var(--ink-2); margin:0 0 20px;
}
.quad-label::before, .quad-label::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.quad{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:0 0 clamp(46px,7vw,64px);
}
.quad .cell{
  position:relative; padding:26px 22px 24px;
  background:var(--white);
  border:1px solid var(--line); border-radius:13px;
}
.quad .glyph{
  width:96px; height:60px; margin:0 0 18px;
  color:#BCB7A4;
}
.quad .glyph path{ stroke-width:1.5 }
.quad .cell h4{
  font-family:var(--serif); font-weight:700; font-size:20px;
  line-height:1.5; margin:0 0 8px; color:var(--ink);
}
.quad .cell p{
  margin:0; font-size:14.5px; line-height:1.78; color:var(--ink-3);
}

/* 只有唯一結果那一格被強調。其餘三格維持一般狀態、不排序、不顯示分數。 */
.quad .cell.is-you{
  background:var(--res-bg);
  border-color:var(--res); border-width:1.5px;
  box-shadow:0 16px 38px -24px var(--res);
}
.quad .cell.is-you .glyph{ width:112px; height:70px; color:var(--res) }
.quad .cell.is-you .glyph path{ stroke-width:1.9 }
.quad .cell.is-you .glyph .accent{ stroke-width:3.6 }
.quad .cell.is-you h4{ color:var(--res); font-size:22px }
.quad .cell.is-you p{ color:var(--ink-2) }
.quad .cell .tag{
  position:absolute; top:-11px; left:18px;
  padding:3px 12px; border-radius:999px;
  background:var(--res); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.12em;
}


/* ── 結果圖卡 ──
   結果名與主標已經在 hero，這裡專心處理內文、症狀與收尾。 */

.card{
  background:var(--white);
  border:1px solid var(--line); border-radius:14px;
  padding:clamp(32px,5vw,48px) clamp(22px,5vw,46px);
  margin:0 0 clamp(30px,5vw,42px);
}
.card .desc{
  margin:0 0 40px; font-size:17px; line-height:2.05; color:var(--ink-2);
}

/* 症狀小標：微標＋結果色細線拉滿剩餘寬度 */
.card .sym-head{
  display:flex; align-items:center; gap:16px; margin:0 0 22px;
}
.card .sym-head b{
  font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--res); white-space:nowrap;
}
.card .sym-head i{
  flex:1; height:1px; background:var(--res); opacity:.28;
}

.card ul{ list-style:none; padding:0; margin:0 0 40px }
.card li{
  position:relative; padding-left:36px; margin-bottom:19px;
  font-size:18px; line-height:1.85; color:var(--ink);
}
.card li:last-child{ margin-bottom:0 }
.card li .mk{
  position:absolute; left:0; top:13px;
  width:24px; height:9px; color:var(--res);
}
.card li .mk path{ stroke-width:1.4; opacity:.9 }

/* 收尾句 —— 只是這一段的總結，不是金句。
   跟前面的內文長得不一樣就夠了：改用左側色條，不鋪整塊底色，
   字級也壓回接近內文。視覺重心留給下面那句預告。 */
.card .conclusion{
  margin:0; padding:4px 0 4px 22px;
  border-left:3px solid var(--res);
  font-family:var(--serif); font-weight:500;
  font-size:18px; line-height:1.9;
  color:var(--ink-2); text-wrap:pretty;
}

/* 「在完整解析中…」—— 這句才是要讓人期待解析、往 CTA 走的那一句，
   所以它比收尾句更明顯。 */
.card .hint{
  display:flex; gap:11px; align-items:flex-start;
  margin:34px 0 0; padding:20px 22px;
  background:var(--res-bg); border-radius:11px;
  font-size:16px; line-height:1.8; font-weight:500;
  color:var(--ink);
}
.card .hint .ic{ flex:none; font-size:18px; line-height:1.6 }


/* ── Kit 電子報 CTA ── 本頁的轉換目標 ── */

.cta{
  background:var(--ink); color:var(--paper);
  border-radius:14px; padding:clamp(34px,5vw,48px) clamp(22px,5vw,46px);
  margin:0 0 clamp(26px,4vw,36px);
}
.cta h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(24px,4vw,31px); line-height:1.45;
  letter-spacing:-.012em;
  margin:0 0 12px; color:#fff;
}
.cta .lede{ margin:0 0 22px; color:#B9B5AB; font-size:var(--t-small) }
.cta ul{ list-style:none; padding:0; margin:0 0 30px }
.cta li{
  position:relative; padding-left:28px; margin-bottom:11px;
  font-size:16px; line-height:1.7; color:#EDEAE1;
}
.cta li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--signal); font-weight:700;
}

/* ── 訂閱表單（自己的，不是 Kit 內嵌的） ──
   手機 App 內建瀏覽器會擋掉 Kit 的第三方 script，所以改成自己的表單
   送到我們的後端，由後端呼叫 Kit API。詳見 app.js 的說明。   */

#kit-form{ min-height:56px }

.sub-form{ display:grid; gap:11px }
.sub-row{ display:block }

.sub-form input{
  width:100%; min-height:54px;
  padding:0 18px;
  border:1px solid #45423C; border-radius:9px;
  background:#232227; color:var(--paper);
  font-family:var(--sans); font-size:16px;   /* 16px 以下 iOS 會自動放大畫面 */
  transition:border-color .16s var(--ease);
}
/* #8A867D 對 #232227 只有 4.35:1，差一點沒過 AA，往上調一階 */
.sub-form input::placeholder{ color:#908C82 }
.sub-form input:focus{ border-color:var(--signal); outline:none }
.sub-form input:focus-visible{ outline:2px solid var(--signal); outline-offset:2px }

.sub-submit{
  width:100%; min-height:54px; margin-top:4px;
  background:var(--signal); color:var(--ink);
  border:0; border-radius:999px;
  font-family:var(--sans); font-weight:700;
  font-size:17px; letter-spacing:.04em;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), opacity .16s;
}
.sub-submit[disabled]{ opacity:.6; cursor:progress }

.sub-err{
  margin:0; padding:11px 15px;
  background:rgba(255,120,100,.12);
  border:1px solid rgba(255,140,120,.42); border-radius:9px;
  color:#FFC9BE; font-size:14px; line-height:1.7;
}
.sub-err[hidden]{ display:none }

/* 送出成功後整個表單換成這一段 */
.sub-done{
  padding:26px 22px;
  background:rgba(253,217,0,.10);
  border:1px solid rgba(253,217,0,.42); border-radius:11px;
}
.sub-done h3{
  margin:0 0 8px; font-family:var(--serif); font-weight:700;
  font-size:20px; color:var(--signal);
}
.sub-done p{ margin:0; color:#DCD8CE; font-size:15.5px; line-height:1.8 }

/* 資料用途說明 */
.cta .privacy{
  margin:16px 0 0; font-size:12.5px; line-height:1.75; color:#9A968D;
}


/* ── 核心同工提醒 ＋ 分享圖卡（視覺層級刻意低於上面兩塊） ── */

.invite{
  background:var(--paper-2);
  border-radius:12px; padding:30px clamp(20px,4vw,34px);
  margin:0 0 42px;
}
.invite h3{
  font-family:var(--serif); font-weight:700; font-size:19px;
  margin:0 0 11px; color:var(--ink);
}
.invite p{ margin:0 0 20px; color:var(--ink-2); font-size:15.5px; line-height:1.85 }
.invite p span{ display:block }

.share-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }

/* 產生後的狀態說明。使用者要永遠知道剛剛發生了什麼事。 */
.share-msg{
  margin:14px 0 0; font-size:14px; line-height:1.7; color:var(--ink-2);
  min-height:1.7em;
}
.share-msg a{ color:var(--ink); font-weight:600 }

/* 圖卡預覽：產生後直接顯示在頁面上，右鍵或長按就能存 */
.share-prev{
  display:none; margin:16px 0 0;
  max-width:340px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--white);
  animation:rise .5s var(--ease) both;
}
.share-prev.on{ display:block }
.share-prev img{ display:block; width:100%; height:auto }
.ghost{
  background:transparent; border:1px solid var(--ink-3); color:var(--ink-2);
  border-radius:999px; padding:11px 22px; font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .16s, color .16s, background .16s;
}
.ghost.done{ border-color:var(--signal-d); color:var(--signal-d) }
.ghost[disabled]{ opacity:.55; cursor:progress }
/* 主要那顆（存圖卡）給一點重量，但仍低於 Kit CTA */
.ghost.solid{
  border-color:var(--ink); background:var(--ink); color:var(--paper);
}


/* ── 頁尾 ── */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding-top:26px; border-top:1px solid var(--line);
  font-size:var(--t-micro); color:var(--ink-3);
}

/* 重新測驗：加框的次要按鈕。
   強度刻意低於 Kit CTA —— 頁尾放一顆同重量的按鈕，
   會把還在猶豫要不要留 Email 的人拉走。 */
.restart{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 22px;
  background:transparent;
  border:1px solid var(--ink-3); border-radius:999px;
  font-size:15px; font-weight:600; color:var(--ink-2);
  transition:border-color .16s var(--ease), color .16s var(--ease),
             background .16s var(--ease);
}
.restart .ic{ font-size:15px; line-height:1 }


/* ── 捲到才淡入（象限以下的區塊） ──
   ⚠️ 預設是「看得見」。只有 JS 成功接手觀察器時才會加上 .js-reveal 把它藏起來。
      內容的可見性絕不能依賴 JS —— 觀察器沒跑、JS 出錯、瀏覽器不支援，
      使用者看到的都必須是完整內容，而不是一片空白。 */
.reveal{ opacity:1; transform:none }

.js-reveal .reveal{ opacity:0; transform:translateY(24px) }
.js-reveal .reveal.in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}


/* ══ Hover ════════════════════════════════════════════════════════
   ⚠️ 所有 hover 樣式一律關在這個 media query 裡面。

   觸控裝置會把 hover 狀態留在「手指最後點擊的座標」上，直到下一次
   觸碰為止。這個網站選完選項會自動換頁，新按鈕常常剛好長在同一個
   位置 —— 於是下一題就有一個選項預先帶著 hover 的深色外框，
   使用者會以為它已經被選取了。

   加了這一層，只有真的有滑鼠的裝置才會套用。      */

@media (hover: hover) and (pointer: fine){

  .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px -8px rgba(168,140,0,.6);
  }
  .btn:hover:not([disabled]) .arr{ transform:translateX(3px) }

  .cover .btn:hover{
    background:#000;
    box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  }

  .opt:hover{
    border-color:var(--ink-3); transform:translateY(-2px);
    box-shadow:0 8px 18px -12px rgba(23,22,26,.35);
  }

  .chip:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 12px -8px rgba(23,22,26,.5);
  }

  .linkbtn:hover{ color:var(--ink) }

  .ghost:hover{ border-color:var(--ink); color:var(--ink); background:var(--white) }
  .ghost.solid:hover{ background:#000; color:#fff }

  .restart:hover{ border-color:var(--ink); color:var(--ink); background:var(--white) }
}


/* ══ 手機 ═════════════════════════════════════════════════════════ */

@media (max-width:600px){
  :root{
    --t-body:16.5px;
    --stage-pad:18px;      /* hero 的負 margin 靠這個變數，兩邊必須一致 */
  }
  .screen{ padding:28px 0 26px }
  .screen.flow{ padding-top:34px }
  .screen.result{ padding-bottom:56px }

  /* 象限改成左圖右文的橫排，四格疊起來才不會太長。
     ⚠️ 格子裡必須只有「符號」與「.txt」兩個子元素。
        之前是符號 / h4 / p 三個，p 會折回第一欄那個 72px 的窄格，
        內文就變成一行四個字。加欄位或加元素前先想過這件事。 */
  .quad{ grid-template-columns:1fr; gap:10px }
  .quad .cell{
    display:grid; grid-template-columns:72px 1fr; gap:16px;
    align-items:start; padding:19px 17px;
  }
  .quad .glyph,
  .quad .cell.is-you .glyph{ width:72px; height:45px; margin:3px 0 0 }
  .quad .cell.is-you h4{ font-size:20px }
  .quad .cell .tag{ top:-10px; left:15px }

  .card li{ padding-left:32px; font-size:17px }
  .btn{ width:100%; padding:0 24px }
  .demo .submit-row .btn{ width:100% }
  .opt{ padding:16px 46px 16px 20px }
  .share-row .ghost{ flex:1 1 auto; justify-content:center }
}

/* 極窄機（iPhone SE 之類）再收一點 */
@media (max-width:360px){
  .chip{ padding:10px 15px; font-size:15px }
  .quad .cell{ grid-template-columns:60px 1fr; gap:13px }
  .quad .glyph,
  .quad .cell.is-you .glyph{ width:60px; height:38px }
}


/* ══ 尊重系統的減少動態設定 ════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* 保險：內容一定看得見 */
  .reveal, .js-reveal .reveal{ opacity:1; transform:none }
}