/* 落單頁 + 追蹤頁專用版面。
   同 styles.css 一齊用(先 link styles.css,再 link 呢個)。
   ⚠️ Token 一律由 styles.css 提供,呢度唔准自創顏色(docs/DESIGN.md)。

   唯一例外 —— `--color-border-strong`(2026-09-05,sps-designer)。
   點解要開:`--color-border` 對 `--color-bg` 只有 1.33:1(淺)/ 1.63:1(深),
   而輸入框、radio 卡呢類**控件邊界**受 WCAG 2.1 SC 1.4.11 管,要 ≥3:1。
   即係話「呢度可以打字」呢個訊號一路都低過標準,唔係美觀問題。
   點解暫時擺喺呢度:控件而家只喺 order / track 兩版出現,而 styles.css 嘅
   :root 區塊本 session 由主 session 佔住。**規範位置係 styles.css :root**,
   下次郁 styles.css token 區塊嗰陣要搬過去,見 docs/DESIGN.md「邊界同控件對比」。 */

:root { --color-border-strong: #8B7F63; }   /* 對 bg 3.69:1 / 對 surface 3.36:1 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-border-strong: #748679; }  /* 4.45 / 3.84 */
}
:root[data-theme="dark"] { --color-border-strong: #748679; }

/* UA 自己畫嘅控件(radio、date picker、number 上下掣)要跟返主題,
   唔係深色模式下未揀嘅 radio 會係一嚿白餅,同版面完全唔夾。
   只落喺 .page,唔想影響其餘 40 幾版已經 pixel 驗過嘅頁面。
   兩條 [data-theme] 係畀 tools/preview-page.py 嘅深色副本用(佢改 attribute,唔改 OS 設定)。 */
.page { color-scheme: light dark; }
:root[data-theme="dark"] .page { color-scheme: dark; }
:root[data-theme="light"] .page { color-scheme: light; }

.page { max-width: 680px; margin-inline: auto; padding-inline: var(--space-6); }
.page > section { padding-block: var(--space-12); }
.page__head { padding-block: var(--space-8) var(--space-4); }
.page__lede { font-size: 19px; color: var(--color-text-muted); }

/* ---------- 三款卡 ---------- */

.pkg-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pkg { background: var(--color-surface); border: 1px solid var(--color-border);
       border-radius: var(--radius-lg); padding: var(--space-6); }
.pkg h3 { margin-bottom: var(--space-2); }
.pkg p { margin-bottom: var(--space-2); }
.pkg p:last-child { margin-bottom: 0; }
.pkg__price { font-weight: 600; }

/* ---------- 表單 ---------- */

.form { margin-top: var(--space-8); }
.field { margin-bottom: var(--space-8); }
.field__label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.field__hint { display: block; font-size: 15px; line-height: 1.7;
               color: var(--color-text-muted); margin-bottom: var(--space-3); }
.field__opt { font-weight: 400; font-size: 15px; color: var(--color-text-muted); }

.field input[type="text"], .field input[type="email"], .field input[type="date"],
.field input[type="number"], .field select, .field textarea {
  display: block; width: 100%; box-sizing: border-box;
  /* 17px:手機唔可以細過 16px,否則 iOS 一 focus 就自動放大成版(docs/DESIGN.md) */
  font: inherit; font-size: 17px; line-height: 1.6;
  min-height: 48px; padding: var(--space-3) var(--space-4);
  color: var(--color-text); background: var(--color-bg);
  /* 框線係「呢度可以打字」嘅唯一訊號(底色同頁底一樣),所以佢要當控件邊界計:
     SC 1.4.11 要 ≥3:1。--color-border 得 1.33 / 1.63,唔夠。 */
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
/* Focus 要比「有邊框」再明顯一級:全域 :focus-visible 已經畀咗 3px 朱紅外框,
   呢度再將框線本身轉朱紅 + 加粗。用 outline 唔用 box-shadow —— DESIGN.md 禁陰影。
   ⚠️ 加粗唔可以改 border-width(會令入面啲字跳 1px):用 outline 做粗度。 */
.field input[type="text"]:focus-visible, .field input[type="email"]:focus-visible,
.field input[type="date"]:focus-visible, .field input[type="number"]:focus-visible,
.field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary); outline-offset: 2px;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.8; }
/* 地址格得兩行 —— 唔要上面嗰個 140px 底高度,否則一個兩行嘅欄位望落似留言板。 */
.field textarea.textarea--short { min-height: 0; }
/* ⚠️ 2026-09-05:呢度本來寫 `appearance:none; padding-right:var(--space-8)` ——
   即係剝走咗原生嘅落拉三角,但從來冇畫返一個上去。render 出嚟個 select 同
   text input 一模一樣,客人睇唔出撳得開。留返個 32px 右邊距,等於留咗個位畀
   一個唔存在嘅箭嘴。
   點解唔用 SVG data-URI 補返:data-URI 入面要寫死 hex,而 token 唔跟得住深淺兩個
   模式(DESIGN.md「顏色一律用 CSS 變數」)。改用原生控件:`.page` 已經有
   `color-scheme`,原生箭嘴會自動跟主題,而 border / background / radius 仍然係我哋嘅。 */
.field select { appearance: auto; padding-right: var(--space-3); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); opacity: .8; }

/* 錯誤:唔准淨靠顏色。所以同時做三樣 —— ⚠ 符號、粗體字、加粗左邊框。 */
.field__err { display: flex; gap: var(--space-2); align-items: flex-start;
              margin-top: var(--space-2); font-size: 15px; line-height: 1.6;
              font-weight: 600; color: var(--color-primary); }
.field__err:empty { display: none; }
.field__err::before { content: "\26A0"; flex: 0 0 auto; }
.field.is-error { border-left: 4px solid var(--color-primary);
                  padding-left: var(--space-4); margin-left: calc(var(--space-4) * -1); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-width: 2px; }

/* 揀款:一格一個 radio,成格點得到 */
.choice { margin: 0; padding: 0; border: 0; }
.choice legend { font-weight: 600; padding: 0; margin-bottom: var(--space-3); }
/* 成格都撳得 = 佢係一個控件,唔係一張卡 —— 邊界同樣要 3:1(SC 1.4.11)。
   底色 surface 對頁底 bg 只差 1.10:1,所以「邊度到邊度係一格」全靠條框。 */
.choice__opt { display: flex; gap: var(--space-4); align-items: flex-start;
               background: var(--color-surface); border: 1px solid var(--color-border-strong);
               border-radius: var(--radius-md); padding: var(--space-4);
               cursor: pointer; }
.choice__opt + .choice__opt { margin-top: var(--space-3); }
.choice__opt input { flex: 0 0 auto; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--color-primary); }
.choice__opt:has(input:checked) { border-color: var(--color-primary); border-width: 2px; padding: calc(var(--space-4) - 1px); }
.choice__opt strong { display: block; }
.choice__opt span { display: block; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

.count { font-size: 14px; color: var(--color-text-muted); margin-top: var(--space-2); }

.form__actions { margin-top: var(--space-8); }
.form__actions .btn { width: 100%; }
@media (min-width: 560px) { .form__actions .btn { width: auto; min-width: 220px; } }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* 表單層錯誤 / 提示 */
.notice { border-left: 4px solid var(--color-accent); background: var(--color-surface);
          border-radius: 0 var(--radius-md) var(--radius-md) 0;
          padding: var(--space-4) var(--space-6); }
.notice--warn { border-left-color: var(--color-primary); }
.notice p:last-child { margin-bottom: 0; }
.notice:empty { display: none; }
.notice h2 { font-size: 21px; margin-bottom: var(--space-3); }
/* 落單前嘅重點框:貼住 h1 出,所以唔跟 `.page > section` 嗰個 space-12 大padding,
   自己開一組窄啲嘅 margin。2026-09-06:東主手機實測「表格太低」,呢個框係解法嘅一半,
   另一半係表格搬咗上嚟(order.html)。 */
.notice--lead { margin-block: var(--space-4) var(--space-8); }

/* 解釋文字精簡做 point 之後用嘅清單。唔改全域 ul / ol ——
   .pkg-list、.steps 呢啲已經 pixel 驗過嘅清單係 list-style:none,郁全域會整爛佢哋。 */
.list-tight { padding-left: 1.35em; margin: 0 0 var(--space-4); }
.list-tight li { line-height: 1.8; }
.list-tight li + li { margin-top: var(--space-3); }
.notice .list-tight:last-child { margin-bottom: 0; }

/* ---------- 落單成功 ---------- */

.done { border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
        background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }
.done__id { font-family: var(--font-serif); font-size: 26px; letter-spacing: .04em;
            word-break: break-all; margin: 0 0 var(--space-4); }
.done__link { display: block; word-break: break-all; font-size: 15px;
              background: var(--color-bg); border: 1px dashed var(--color-border);
              border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
              margin-bottom: var(--space-4); }

/* ---------- 追蹤頁 ---------- */

.facts { margin: 0; }
.facts div { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
             padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.facts dt { flex: 0 0 7.5em; font-weight: 600; color: var(--color-text-muted); font-size: 15px; }
/* pre-line:落單時間會分兩行(香港時間 / 你當地時間),見 track.js when() */
.facts dd { flex: 1 1 12em; margin: 0; word-break: break-word; white-space: pre-line; }

/* 證明相。真實尺寸未知(P3 未開),所以用 aspect-ratio 佔位防 CLS,唔亂寫 width/height。 */
.step__proof { margin-top: var(--space-4); }
.step__proof:empty { display: none; }
.proof-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
             background: var(--color-surface); border: 1px solid var(--color-border);
             border-radius: var(--radius-md); }

.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: var(--space-4); align-items: flex-start; padding-block: var(--space-4); }
.step + .step { border-top: 1px solid var(--color-border); }
.step__n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-full);
           display: grid; place-items: center; font-weight: 600; font-size: 15px;
           background: var(--color-surface); border: 1px solid var(--color-border);
           color: var(--color-text-muted); }
/* 狀態唔准淨靠顏色 —— 圓圈入面嘅字同下面嘅狀態字都會變。 */
.step--done .step__n { background: var(--color-primary); border-color: var(--color-primary);
                       color: var(--color-on-primary); }
.step__body { flex: 1 1 auto; }
.step__body h3 { margin-bottom: var(--space-1); }
.step__state { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.step--done .step__state { color: var(--color-accent-text); }
.step p { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus-visible { position: static; display: inline-block; margin: var(--space-3) var(--space-6); }