/* ── 跨階段任務卡（等待/紀錄/完成統一，Dogfood-6）：任務收進同款輕區塊、視覺一致 ── */
    /* ⑤ 定案 2026-08-24（走查回合 1 後修訂）：**無框 ＋ --surface 淡底。**
       規則是〈主體要界線，引用要底色〉——這一條 selector 在紀錄／照片／完成三頁上是**引用**：
       一個小方塊，裝著「你剛才選的是什麼」，不是那一頁的主體。底色在說「這段話是從別的地方
       引過來的」，跟引用區塊是同一個語意；小面積用底色是安靜的。
       ⚠️ 等待頁那張是**主體**，它覆寫成紙底＋細框，見下方 .waiting-card。這不是例外，
          是規則的另一半——同一個 class 在不同頁扮演不同角色。
       ⚠️ 這一條 selector 命中**四個畫面**（index.html 158 等待／187 紀錄／220 照片／248 完成）。
          改它＝改四頁，別只走查一頁就下判斷。
       ⚠️ 紀錄頁那張是 .record-header 裡的 sticky 卡，**刻意無框**（2026-08-24 討論過並否決了
          「固定層保留框」的例外）：.record-header 自己有 background:var(--bg)（40-chat.css:52），
          對話文字是從那條不透明紙帶**底下**捲過去的；「固定層／捲動層」的分界由它的
          padding-bottom:2.5rem 撐出來，從來不是這條框在做。別為了「標示固定層」把框加回來。 */
    .info-card {
      border-radius: var(--radius);
      background: var(--surface); padding: 1.125rem 1.25rem; margin-bottom: 2.5rem;
    }
    .info-card .task-line { color: var(--text); font-size: var(--font-primary); line-height: 1.75; }
    .info-card .task-sub  { color: var(--text-faint); font-size: var(--font-secondary); }

    /* ── 等待執行頁版型整合：時間／任務／提示／CTA 收進單一 .waiting-card，
       全部 scope 到 #s-waiting／.waiting-card，不動上面 .info-card／.task-line 共用 token。
       32px 頂距只加桌機，手機維持原本 48px 起點（見下方 480px 斷點覆寫）。 */
    #s-waiting { margin-top: 2rem; }
    /* 字重 700 → 600（04e）：中文粗體筆畫多、容易糊成一塊；600 已經夠分量，且與全站 h1 一致 */
    #s-waiting h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.45; margin-bottom: 1.5rem; }
    /* ⑤ 走查回合 1（founder 2026-08-24 對照三版後拍板）：**紙底 ＋ 細框。**
       規則〈主體要界線，引用要底色〉的另一半：這張卡是等待頁的**主體**，裝著今天那件事、
       占掉上半屏。主體用底色會宣告面積——整片 --surface 讓它從「紙上的一段話」變成
       「App 給了你一塊面板」；而框是**局部**訊號，只在邊界上存在，中間什麼都沒發生。
       要讓人**離開**的頁面該用界線，不該用面板。
       ⚠️ background:var(--bg) 是刻意寫回來的，不是忘了刪：它要跟紙同材質，只是被圈起來。
          border 也是——.info-card 已經沒有 border 了，這裡不寫就真的沒有框。
       ⚠️ 曾經反過來做過一版（無框＋--surface，commit 46c82e0），founder 對照三版後否決。
          否決理由：那片淡底占掉上半屏，量太重；而 --surface 在這個 app 裡幾乎都是**回應色**
          （.card:hover、.j-card-photo:hover），整頁塗滿等於長期停在「有東西正在被碰」的狀態。
          **別再推一次「四頁一律無框」。**
       ⚠️ border-radius 不寫，繼承 .info-card 的 --radius(14px)。1rem(16px) 已經退役。
       ⇒ 這一頁刻意只有**兩個東西有輪廓**：這張卡，和「我完成了」。其餘全是文字。 */
    .waiting-card {
      background: var(--bg); border: 1px solid var(--border);
      padding: 2rem; margin-bottom: 0;
    }
    /* ⑤ 走查回合 1（founder 2026-08-24 拍板）：**拿掉 background／border-radius／padding，三行一起走。**
       ⚠️ 這一條的理由在走查後**換過**，別照舊的讀：原本是「卡片改吃 --surface 之後 pill 會同色消失」
          （被動的、不得不拿掉）。卡片改回紙底之後那個理由不成立了——pill 在紙上看得見。
       現在的理由是**主動的**：這張卡上原本有三種「我是一個容器」的訊號（卡框、pill、黑鈕），
       分量幾乎一樣重，眼睛要花力氣才排得出誰重要。而 pill 講的是**已經被講過兩次的事**——
       時鐘圖示說了「這是時間」，位置與灰階說了「這是附註」，膠囊是第三遍。
       拿掉之後整頁只剩兩個東西有輪廓：任務卡（這是今天那件事）、「我完成了」（這是你可以按的）。
       一個元素只做一件工作（判準 2）。
       橫向 padding 一起走：沒了底色承載，它只會讓這一行比下面的任務句往右縮 12px。
       縱向間距由 #waiting-chosen 的 margin-top:1.5rem 在做，這裡不必補。
       ⇒ 連帶：999px 白名單少一個，app 內只剩 .photo-progress-track。
       ⚠️ display:inline-flex **必須留**：70-waiting.js 用 style.display='' 把它顯示回來
          （自建任務不顯示預計時間），那行還原的是 CSS 宣告的值；刪掉會退回 inline，
          gap 與 align-items 一起失效，時鐘圖示會跟文字錯開基線。
       ⚠️ 字色維持 --text-muted，不要改成 --text-faint：等待頁只有三行內容，這是其中一行、
          是內容不是註腳。（②「預計時間」原本被列在 --text-faint 那層是**寫錯了**，2026-08-24 已修正。）*/
    .waiting-budget-pill {
      display: inline-flex; align-items: center; gap: 0.375rem;
      color: var(--text-muted); font-size: var(--font-secondary);
    }
    .waiting-clock-icon {
      width: 1rem; height: 1rem; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    /* .task-line 的 color/line-height 共用不變；這裡只加等待卡專屬的字級/字重/間距 */
    #waiting-chosen { font-size: 1.25rem; font-weight: 600; line-height: 1.65; margin-top: 1.5rem; }
    .waiting-hint {
      color: var(--text-muted); font-size: var(--font-secondary); line-height: 1.75;
      margin-top: 1.5rem;
    }
    .waiting-actions { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
    .waiting-btn { width: 152px; min-height: 48px; }
    /* 兩條誠實出口（批次 E）：置中一排、字比 .waiting-hint 再小一階，量感刻意低於「我完成了」。
       中間用一條淡色豎線分隔，不用「｜」字元——字元會跟著字重變粗，看起來像第三個選項。 */
    .waiting-exits {
      margin-top: 1.75rem; display: flex; justify-content: center; align-items: center;
      gap: 1rem; flex-wrap: wrap;
    }
    .waiting-exits .link-btn { font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--border); }
    .waiting-exits .link-btn:hover { border-bottom-color: var(--text-muted); }
    #err-waiting { margin-top: 0.75rem; }
    #err-waiting:empty { display: none; min-height: 0; margin-top: 0; }

    /* ── 完成畫面：分區＋層次（E）。段落標清楚，Q&A 收進細左框區塊，可掃讀 ── */
    .section-label { color: var(--text); font-weight: 600; font-size: var(--font-secondary); margin-bottom: 0.875rem; }
    .transcript { border-left: 2px solid var(--border); padding-left: 1rem; margin-bottom: 2.5rem; }
    /* ⚠️ 這兩行的顏色是 founder 對照兩版截圖後拍板的，**不要為了 WCAG AA 再改一次**（2026-08-19）。
       試過的版本：q＝--text-muted(5.38:1)、a＝--text(14.25:1)，兩層都過 AA——被否決，理由是
       「太強烈、突顯高調」。實際問題有兩個：
         ① a 用 --text 就跟 h1、任務卡同一個 token，逐字稿變成跟畫面上最重要的兩個元素同重量；
         ② 這塊是**重播**不是主要內容——那兩句使用者剛剛在對話裡已經用全對比讀過了。完成畫面
            的角色是收尾，安靜本身在做事，拉高對比等於跟這個角色打架。
       維持 q＝--text-faint(3.86:1)、a＝--text-muted(5.38:1)。q 未達 AA 4.5:1 是**已知且刻意**的
       取捨（HANDOFF〈Known Gaps〉有記；改版前是 2.81:1，這批仍是改善）。真要同時滿足 AA 與這個
       視覺層次，得靠字重或字級分層、不是靠顏色——AA 會把 q 擠進 4.5～5.38 這條窄縫，跟 a 幾乎同色。 */
    /* ⚠️ 提問這一行 2026-08-27 再降一階（字級 0.8125rem，顏色沒動）：founder 走查後
       「使用者留下的東西 > AI 問了什麼」。連同 90-done.js 拿掉「提問：／回答：」前綴，
       層級改用**大小差**拉開——顏色那一層是 2026-08-19 拍板過的，不重開。 */
    .transcript .record-q { color: var(--text-faint); font-size: 0.8125rem; margin-bottom: 0.3rem; line-height: 1.75; }
    .transcript .record-a { color: var(--text-muted); font-size: var(--font-secondary); margin-bottom: 1.25rem; line-height: 1.75; }
    .transcript .record-a:last-child { margin-bottom: 0; }
    /* 終點宣告非內容：水平置中＋沉進「內容底～視窗底」剩餘空白的垂直中央，當「流程結束」頁腳。
       置中是這一行的刻意例外（整頁其他元素維持左對齊骨架），別類推到標題或其他區塊。
       s-done 撐滿視窗剩餘高度（＝視窗高扣掉 body 上下各 3rem 的 margin，就這樣而已），
       margin auto 讓這行在剩餘空白垂直置中；內容超過一屏時 auto 歸零、padding-top 保底——
       flex item 不跟子層收合 margin，上方 .transcript／.info-card 的 2.5rem 會實佔，
       故保底用 1.5rem 湊回原本 4rem 總間距。手機／長內容下就是原本的固定間距，不多出可滑空間 */
    /* 🔴 **這條算式 2026-08-28 解耦過，別把 `--input-bar-h` 加回來**：舊版是
       `calc(100dvh - 6rem - var(--input-bar-h,6rem) - 1rem)`——完成頁根本沒有輸入框，
       它扣那一格純粹因為 `has-fixed-input` 掛在 body 上、全站生效。那格預留移除後
       （見 10-base.css），這裡也必須跟著少扣，否則容器會比視窗短一截。
       收尾群組的位置**逐像素不變**：剩餘空白全部留在群組底下（`margin-bottom: auto`），
       容器變高只是那段空白變長，群組自己貼著上方內容不動。 */
    #s-done.active {
      display: flex; flex-direction: column;
      min-height: calc(100vh - 6rem);
      min-height: calc(100dvh - 6rem);
    }
    /* ── 收尾群組（完成畫面與「今天先不做」的收尾共用）────────────────────────
       ⚠️ 垂直間距掛在**群組**上，不是掛在單獨那一句上（founder 2026-08-27）：改版前
       「下一段路，明天再繼續。」與 CTA 各自散在很大的垂直空白裡，看起來像三個互不相關的區塊。
       ⚠️ 上距是**固定的 4.5rem**，不是 auto（走查後第二輪修正）：第一版用
       `margin-top:auto; margin-bottom:auto` 把整組吊在剩餘空白的正中，結果它掉得太下面，
       上下兩塊失去關係——那不是呼吸感，是斷開。剩下的空白改成全部留在群組**底下**
       （#s-done 那條 margin-bottom:auto），所以群組仍然靠著上方內容。
       ⚠️ 別把 4.5rem 再加大回去：founder 明確要它「感覺仍然是同一個完成畫面的結尾」。 */
    /* 3rem ＋ 上方 .transcript 自己的 2.5rem 下距 ＝ 完成畫面實際約 88px 的間隔
       （改版前那個 auto 置中版是約 210px）。founder 要的是「往上拉 100～160px」。 */
    .done-closing { margin-top: 3rem; padding-top: 0; }
    #s-done.active .done-closing { margin-bottom: auto; }
    /* 群組**裡面**的間距要小（它們是一組）：承接口那顆的 4rem 上距在群組裡不適用 */
    .done-closing .skipthanks-start { margin-top: 0; }
    #done-tomorrow {
      color: var(--text-faint); font-size: var(--font-secondary);
      text-align: center;
    }
    /* 「看看走過的路」（完成畫面與「今天先不做」的收尾共用）——**流程的終點，不是返回鍵**。
       樣式刻意跟 .skipthanks-start 同一款：小字、置中、.link-btn 的 hover。
       ⚠️ 不准做成大 CTA：今天已經走完了，這顆只是「回去看看路」的出口，
       不該有任何推他再做點什麼的份量。 */
    .done-journey {
      display: block; margin: 2.5rem auto 0;
      font-size: var(--font-secondary); color: var(--text-muted);
    }
    /* 在收尾群組裡就靠緊上面那一句（兩者是同一組）；收尾那一頁沒有群組，維持 2.5rem */
    .done-closing .done-journey { margin-top: 0.875rem; }
    .done-journey:hover { color: var(--text); }

    /* ── 完成畫面的資訊層級（founder 2026-08-27 走查後）──────────────────────────
       這一頁最重要的新資訊是**他自己留下的那句話**，不是已經完成的任務卡。
       所以任務卡降一階（次級字級＋次級灰），讓它退成「剛剛做的是什麼」的脈絡；
       「這次的收穫」靠 .section-label 的 --text／600 當標頭，整組自然比它重。
       ⚠️ 只 scope 到 #s-done：等待頁與紀錄頁的 .info-card／.task-line 一格都不能動。
       ⚠️ **刻意不去提亮 .record-a**——`a` 用 --text 的那一版 founder 2026-08-19 對照後
       否決過（太強烈、突顯高調；而且那塊是重播不是主要內容）。這次換的是「誰比較小」，
       不是「誰比較亮」，那個決定沒有被推翻。 */
    #s-done .info-card { padding: 0.875rem 1.125rem; margin-bottom: 2rem; }
    #s-done .info-card .task-line { color: var(--text-muted); font-size: var(--font-secondary); }


    /* ── 畫面 3.5：留一張照片（2026-08-22 批次 D）──
       版型沿用既有 .info-card（等待／紀錄／完成三頁同款輕區塊），不另起一套視覺語言；
       顏色全部走 10-base.css 的 token，沒有一個字面色碼。 */
    .photo-card { text-align: left; }
    .photo-hint {
      color: var(--text-muted); font-size: var(--font-secondary); line-height: 1.75;
    }
    /* 預覽用 object-fit: cover 裁進固定高度：使用者要確認的是「是不是這一張」，
       不是構圖細節；讓直拍照片把整張卡撐成一根柱子反而更難確認。 */
    #photo-preview {
      display: block; width: 100%; max-height: 14rem; object-fit: cover;
      border-radius: var(--radius-sm); margin-top: 1.25rem; background: var(--surface-strong);
    }
    #photo-preview[hidden] { display: none; }
    .photo-actions { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
    .photo-actions button { min-height: 48px; }   /* 手指目標下限，同 .waiting-btn */
    .photo-progress { margin-top: 1.25rem; }
    .photo-progress[hidden] { display: none; }
    .photo-progress-track {
      height: 4px; border-radius: 999px; background: var(--surface-strong); overflow: hidden;
    }
    /* 寬度由 JS 設（XHR 的 upload.onprogress）；transition 讓數字跳動看起來是連續的。
       上傳完成後改成「處理中…」的不定態——後端還在壓縮，那一段沒有百分比可報，
       假裝有才是騙人。 */
    .photo-progress-bar {
      height: 100%; width: 0%; background: var(--text); transition: width 0.2s ease;
    }
    .photo-progress-bar.indeterminate {
      width: 40%; animation: photo-indeterminate 1.1s ease-in-out infinite;
    }
    @keyframes photo-indeterminate {
      0%   { margin-left: -40%; }
      100% { margin-left: 100%; }
    }
    /* 動態偏好：關掉動畫的人不該看到跑馬燈，改成靜止的滿條 */
    @media (prefers-reduced-motion: reduce) {
      .photo-progress-bar { transition: none; }
      .photo-progress-bar.indeterminate { animation: none; width: 100%; margin-left: 0; }
    }
    #photo-progress .photo-hint { margin-top: 0.5rem; }
    #err-photo:empty { display: none; min-height: 0; margin-top: 0; }
    .photo-retry { margin-top: 1rem; }
    .photo-retry[hidden] { display: none; }
    /* Skip 在卡片外、置中、淡色：它是逃生口不是第二個 CTA（見 index.html 那段註解） */
    .photo-skip { text-align: center; margin-top: 2rem; }

    /* ── 未完成任務的回顧表單與送出後那兩句話（04e 批次 G，2026-08-22 走查後改版）──
       ⚠️ **功能版**：只用既有 token，沒有新色、沒有陰影、沒有裝飾。
       擺在本檔（不另開 90-*.css）當初是為了不跟「最後一支必須是 80-nav.css」打架；
       80-nav.css 已在「旅程當首頁」那批退場，但**留在本檔的理由沒變**：多開一支樣式
       就多一個要想覆寫順序的地方（acceptance X6d 仍釘著最後一支是誰）。

       整體方向（founder 2026-08-22）：**整頁資訊量要比改版前更少**。
       不該讓人覺得「我沒完成，所以現在要填一份原因調查」，
       而是「我回頭看了一眼這次發生了什麼」。關鍵字：簡單、安靜、有人味、有一點啟發、
       有希望，但不說教。所以這一段的每一個數字都是在**加留白、減密度**。 */

    /* 標題→說明用 0.75rem（比全站 h1 的 2rem 緊）：這兩行是同一句話的兩半，
       貼近才讀得出「標題丟出問題、說明給方向」。說明→第一個問題才拉開到 2.5rem。 */
    #s-skipform h1 { margin-bottom: 0.75rem; }
    .skipform-lead {
      color: var(--text-muted); font-size: var(--font-secondary); line-height: 1.75;
      margin-bottom: 2.5rem;
    }
    /* fieldset 的預設邊框／內距在這裡只會多一個框；歸零之後用間距分層，跟全站一致 */
    .skipform-group { border: none; padding: 0; margin-bottom: 2.5rem; }
    /* 選項區標題用主文字色、不用 .section-label 的最淡灰：它是一個**問句**，
       不是欄位標籤，太淡會讓三個選項看起來沒有人在問。 */
    .skipform-legend {
      font-size: var(--font-primary); color: var(--text); line-height: 1.6;
      margin-bottom: 1rem; padding: 0;
    }
    /* 整列可點（label 包住 input）：手機上只點得到 18px 的方框是常見的挫折來源。
       0.625rem 的上下 padding ＝ 三個選項之間約 20px 的呼吸，比改版前六個選項時鬆一階。 */
    .skipform-check {
      display: flex; align-items: flex-start; gap: 0.75rem;
      padding: 0.625rem 0; margin: 0; cursor: pointer;
      font-size: var(--font-primary); line-height: 1.6; color: var(--text);
    }
    .skipform-check input[type="checkbox"] {
      width: 1.125rem; height: 1.125rem; margin-top: 0.28rem; flex-shrink: 0;
      accent-color: var(--text); cursor: pointer;
    }
    .skipform-note-label {
      font-size: var(--font-secondary); color: var(--text-muted); margin-bottom: 0.5rem;
    }
    /* 初始高度刻意小、由 fitTextarea 跟著內容長高（92-skipform.js 掛的 input 事件）。
       寫法比照 #custom-text（30-layout.css）——**不要另外寫一支 autogrow**：
         resize:none    蓋掉全域的 textarea{resize:vertical}，高度由程式管，
                        不讓使用者拖出跟內容對不上的框；
         overflow-y:hidden  超過上限時由 fitTextarea 自己改成 auto；
         line-height 1.5    明寫，否則 UA 的 line-height:normal 會蓋掉 body 的 1.75，
                            高度換算得靠實測。
       min-height 4.25rem ≈ 兩行：比改版前的 rows="3" 明顯矮一階（founder：沒有很多話的人
       不該先看到一大片空白），但**不是壓到單行**——那會讓人以為只能寫一句。
       max-height 12rem ≈ 6 行才進入內部捲動：真的有細節想寫的人不會太快看到捲軸。
       實際上限仍由 fitTextarea 的「可視高 35%」動態夾（手機開鍵盤時不會吃掉整個畫面）。 */
    #skipform-note {
      margin-bottom: 0;
      border-radius: var(--radius-sm);
      padding: 0.8rem 0.9rem;
      line-height: 1.5;
      min-height: 4.25rem; max-height: 12rem;
      resize: none; overflow-y: hidden;
    }
    /* CTA 與上方內容拉開 2.5rem：跟「說明→選項」「選項→輸入框」同一個區塊間距，
       整頁只有一個節奏，不讓送出鈕看起來像另外一區。
       ⚠️ **水平置中**（founder 2026-08-23 走查），跟等待頁的「我完成了」靠右不同：
       那一頁的鈕是「往前走」的主動作，這一頁是一個安靜的收束，置中比靠右不急。 */
    .skipform-actions { margin-top: 2.5rem; display: flex; justify-content: center; }
    .skipform-btn { width: 152px; min-height: 48px; }   /* 與等待頁的「我完成了」同尺寸 */
    /* 沒選任何一項就按送出時的提示。⚠️ **不是** .error（--danger 紅字）：這不是錯誤、
       只是還沒選。淡灰、次級字級、靠右對齊 CTA，出現時不推動版面（min-height 佔位）。 */
    .skipform-hint {
      margin-top: 0.75rem; text-align: center;   /* 跟著 CTA 走，2026-08-23 一起由靠右改置中 */
      color: var(--text-muted); font-size: var(--font-secondary); line-height: 1.6;
    }
    .skipform-hint[hidden] { display: none; }
    #err-skipform:empty { display: none; min-height: 0; margin-top: 0; }

    /* 送出後那一頁**只有兩句話**（founder 裁定）。所以版面上也不該有第三樣東西——
       不加插圖、不加按鈕、不加「明天見」。留白本身是那一頁的內容。
       ⚠️ 兩句用**同一套視覺語言**（同一個 class、同字級、同色、同行距），直接上下排列。
          第二句**刻意不做成 quote／引用線／卡片／大字／不同字體**：整頁只有兩句，
          把第二句包裝成金句會變成「系統現在要送你一句話」。它們只靠 typography、
          行距、兩句之間的間距與整頁留白成立。
       行距 1.9 比全站 1.75 再鬆一階、兩句間 1.5rem：這一頁的內容量小到留白就是設計本身。 */
    #s-skipthanks { margin-top: 6rem; }
    .skipthanks-line {
      font-size: var(--font-primary); line-height: 1.9; color: var(--text);
    }
    .skipthanks-line + .skipthanks-line { margin-top: 1.5rem; }
    /* 承接口「開始今天」（founder 2026-08-23 加入，2026-08-27 統一字面）：**只有舊圈才出現**（見 92-skipform.js）。
       位置與樣式沿用完成畫面那句「下一段路，明天再繼續。」（#done-tomorrow）——
       置中、次級字級、離兩句話遠一點。兩者是同一個位置上的兩種狀態
       （今天的圈＝明天見；舊圈＝現在就可以開始），刻意長得像。
       差別只有一個：那句是**訊息**，這個是**可以按的**，所以用 .link-btn（有 hover、有指標）
       而不是純文字。⚠️ 但它仍然是小字、不是按鈕——收掉一圈之後不該有一顆大 CTA 推他再開一輪
       （紅線：出口是使用者自己伸手拿）。 */
    .skipthanks-start {
      display: block; margin: 4rem auto 0;
      font-size: var(--font-secondary); color: var(--text-muted);
    }
    .skipthanks-start:hover { color: var(--text); }
    .skipthanks-start[hidden] { display: none; }