/* ══════════════════════════════════════════════════════════════════════
   交收站 —— 風格 D「編輯排版」
   （定案 2026-08-15，五選一見 ../mock/styles.html；motion 見 ../mock/motion.html）

   幾乎冇色、冇框：層次全靠字級同留白。粉紅係**唯一**強調色，全場只出現
   四次 —— 剔中嘅 box、主掣、未同步點、收訖印。第一版 neo-brutalist（3px 黑
   粗邊 + 全屏飽和粉紅）已推翻，原因係「用強度冒充意圖」。

   Motion 憲法（兩條預算，唔係「有／冇動畫」）：
     · staff 徑（搵人 → 剔項）≤180ms、純 feedback、**零等待**，重複幾百次
     · 會員徑（交機 → 確認）每人一次，容許兩個 moment
   只郁 transform / opacity · quart / quint-out · 無 bounce ·
   prefers-reduced-motion 全部退化成 fade。
   ══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"PingFang HK","Noto Sans HK","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px; line-height:1.45;
  background:var(--bg); color:var(--ink);
  min-height:100svh;
  /* 現場快速連續操作：唔好彈長按選字 / 雙擊放大 */
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
button{font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer}
input{font:inherit; color:inherit}

:root{
  /* 風格 D tokens —— 同 mock/styles.html [data-v="D"] 一致 */
  --bg:oklch(99% .003 90);
  --ink:oklch(20% .008 60);
  --ink2:oklch(46% .008 60);
  --ink3:oklch(68% .006 60);
  --rule:oklch(89% .005 60);
  --pink:oklch(55% .2 8);
  --danger:oklch(52% .19 25);

  --ez:cubic-bezier(.25,1,.5,1);      /* quart-out：預設 */
  --ez-x:cubic-bezier(.22,1,.36,1);   /* quint-out：剔／印 */
  --t-screen:200ms; --t-step:260ms; --t-tick:170ms; --t-box:100ms;
  --t-bump:140ms; --t-res:140ms; --t-stamp:240ms;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ── 頂 bar ───────────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:baseline; gap:.55rem;
  padding:calc(.9rem + var(--safe-t)) 1.15rem .55rem;
  background:var(--bg);
}
.bar[hidden]{display:none}
.bar__s{font-size:1.15rem; letter-spacing:-.02em; cursor:pointer; -webkit-appearance:none; appearance:none}
.bar__d{font-size:.68rem; color:var(--ink3); font-variant-numeric:tabular-nums}
.sync{
  margin-left:auto; display:flex; align-items:center; gap:.35rem;
  font-size:.68rem; color:var(--ink3); font-variant-numeric:tabular-nums;
  padding:.35rem .1rem .35rem .6rem; min-height:34px;
}
.sync .dot{width:.44rem; height:.44rem; background:var(--pink); display:none; flex:none}
.sync[data-s="pending"] .dot{display:block}
.sync[data-s="syncing"] .dot{display:block; animation:pulse 1.8s ease-in-out infinite}
.sync[data-s="failed"] .dot{display:block; background:var(--danger)}
.sync[data-s="pending"] .sync__t,
.sync[data-s="syncing"] .sync__t{color:var(--ink2)}
.sync[data-s="failed"] .sync__t{color:var(--danger)}
@keyframes pulse{50%{opacity:.3}}

/* ── 畫面 ─────────────────────────────────────────────────────────── */
#app{display:block}
.screen[hidden]{display:none}
.screen{animation:screenIn var(--t-screen) var(--ez) backwards}
@keyframes screenIn{from{opacity:0; transform:translateY(6px)}}
@keyframes fadeOnly{from{opacity:0}}
@keyframes stepIn{from{opacity:0; transform:translateY(8px)}}

.pad{padding:.4rem 1.15rem calc(2rem + var(--safe-b))}
.pad--list{padding-bottom:calc(6rem + var(--safe-b))}

.eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink3); font-weight:600; margin:0 0 .5rem}
.h1{font-size:2rem; font-weight:400; letter-spacing:-.035em; margin:0 0 .4rem}
.lede{font-size:.88rem; color:var(--ink2); margin:0 0 1.6rem; line-height:1.55}
.hint{font-size:.72rem; color:var(--ink3); margin:.35rem 0 0}
.err{font-size:.82rem; color:var(--danger); margin:0 0 1rem; line-height:1.5;
  animation:fadeOnly 120ms var(--ez)}          /* 錯誤零位移：文案做嘢唔靠 motion */
.err[hidden]{display:none}

/* ── 表單 ─────────────────────────────────────────────────────────── */
.field{display:block; margin-bottom:1.4rem}
.field__l{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink3); font-weight:600; margin-bottom:.5rem}
.field input{
  width:100%; border:0; outline:0; background:transparent; border-radius:0;
  font-size:1.15rem; font-weight:300; letter-spacing:.02em;
  border-bottom:1px solid var(--ink3); padding:.2rem 0 .45rem;
}
.field input:focus{border-bottom-color:var(--pink)}
.adv{margin:-.6rem 0 1.4rem}
.adv summary{font-size:.74rem; color:var(--ink3); padding:.4rem 0; cursor:pointer}
.adv[open] summary{margin-bottom:.8rem}

/* ── 搵人 ─────────────────────────────────────────────────────────── */
.search{display:flex; align-items:flex-end; gap:.8rem; margin-top:1.2rem}
.search__f{position:relative; flex:1; min-width:0; display:flex}
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; border-radius:0;
  font-size:1.5rem; font-weight:300; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--ink3); padding:.2rem 0 .35rem;
  /* 留位俾 × —— 唔留嘅話長姓名會揼落個掣底下睇唔到 */
  padding-right:2.4rem;
}
.search input:focus{border-bottom-color:var(--pink)}
.search input::placeholder{color:var(--ink3); font-size:.95rem; font-weight:400; letter-spacing:0}

/* 清除 —— 疊喺 input 右邊，共用同一條底線。
   有字先出（JS 控 hidden）：冇字嗰陣個 × 淨係製造視覺噪音同誤觸。
   🔴 tap target 撐到 44px（會場單手用），但**視覺**保持細 —— 用 padding 撐，
   唔好靠加大字體，否則會同「搜尋」爭注意力。 */
.clearbtn{
  position:absolute; right:0; bottom:.72rem;   /* 對齊 input 文字內容中心（量返嚟，唔係估）*/
  display:flex; align-items:center; justify-content:center;
  width:1.55rem; height:1.55rem; padding:0; border-radius:50%;
  background:var(--rule); color:var(--ink2);
  font-size:.72rem; line-height:1;
}
/* 🔴 tap target 撐到 44px 用**透明 ::after**，唔係把個圓整大 —— 圓一大就同
   「搜尋」爭注意力，而 44px 係手指要求唔係視覺要求，兩者唔應該綁埋。
   ⚠️ **實測**（430px viewport）呢個 44px 區同「搜尋」個掣淨係差 **3.2px**。
   冇重疊，但好窄 —— 改 `.search` 個 gap、改圓嘅大細、或者「搜尋」變長，
   都要重量一次，唔可以靠心算（我第一次心算出 10px，量返係 3.2px）。 */
.clearbtn::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.clearbtn[hidden]{display:none}
.clearbtn:active{background:var(--pink); color:var(--bg)}
.gobtn{color:var(--pink); font-weight:500; padding:.5rem 0 .5rem .5rem; font-size:.95rem; min-height:44px}

/* loading 線：150ms 後先出現 —— 快答唔閃 */
.loadline{height:1px; position:relative; overflow:hidden; margin-top:-1px}
.sweepbar{position:absolute; inset:0; width:38%; background:var(--pink);
  transform:translateX(-110%); display:none}
.loading .sweepbar{display:block; animation:sweep 900ms var(--ez) infinite}
@keyframes sweep{to{transform:translateX(290%)}}
.searching{font-size:.72rem; color:var(--ink3); margin:.5rem 0 0; min-height:1.1em}
.empty{font-size:.85rem; color:var(--ink2); margin:1.6rem 0 0; line-height:1.6}
.empty[hidden]{display:none}

/* 結果整組 fade，唔逐行 stagger —— 日用幾百次，stagger 會累積成慢 */
.results{margin-top:1.2rem; animation:screenIn var(--t-res) var(--ez) backwards}
.results[hidden]{display:none}
.r{display:flex; align-items:baseline; gap:.6rem; width:100%; text-align:left;
  padding:.9rem 0; border-bottom:1px solid var(--rule); min-height:56px}
.r__t{font-size:1.05rem; font-variant-numeric:tabular-nums; letter-spacing:.04em; flex:none}
.r__n{font-size:.92rem; color:var(--ink2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.r__c{margin-left:auto; font-size:.72rem; color:var(--ink3); font-variant-numeric:tabular-nums; text-align:right}

/* 返回 —— D 風格：純文字、細、唔搶眼，但 tap target 夠 44px */
.backlink{
  display:block; margin:-.1rem 0 .9rem; padding:.55rem .6rem .55rem 0;
  font-size:.8rem; color:var(--ink3); min-height:44px; text-align:left;
}
.backlink:active{color:var(--pink)}

/* ── 執貨 ─────────────────────────────────────────────────────────── */
.who{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding-top:.2rem}
.who b{font-size:2rem; font-weight:400; letter-spacing:-.035em}
.who i{font-style:normal; font-size:.85rem; color:var(--ink2);
  font-variant-numeric:tabular-nums; letter-spacing:.06em}
.verify{font-size:.68rem; color:var(--ink3); margin:.3rem 0 0}
/* 另一個號碼：同層級但要睇得出係補充，唔係主號碼 */
.verify--alt{font-variant-numeric:tabular-nums; margin-top:.12rem}
/* 同電話另一行：要 staff 一眼睇到，但唔可以扮成錯誤（佢未必係同一個人）*/
.alsohere{margin:.55rem 0 0; padding:.5rem .6rem; font-size:.72rem; line-height:1.5;
  color:var(--ink1); background:var(--warn-bg,#fdf6e3); border-left:2px solid var(--warn,#c9a227)}
.alsohere b{font-weight:600}
.r__w{grid-column:1/-1; font-size:.66rem; color:var(--warn,#c9a227); margin-top:.15rem}
.r__w--hold{color:var(--hold,#b4405a); font-weight:600}
/* 人層備註 —— 同貨品層 reason_text 視覺上要分得開 */
.rmk{margin:.6rem 0 0; padding:.6rem .7rem; border-left:3px solid var(--warn,#c9a227);
  background:var(--warn-bg,#fdf6e3); border-radius:2px}
.rmk--hold{border-left-color:var(--hold,#b4405a); background:var(--hold-bg,#fdf0f3)}
.rmk__h{margin:0 0 .3rem; font-size:.74rem; font-weight:650; color:var(--ink1)}
.rmk--hold .rmk__h{color:var(--hold,#b4405a)}
.rmk__t{margin:.2rem 0 0; font-size:.76rem; line-height:1.6; color:var(--ink1); white-space:pre-wrap}
.rmk .pick{margin-top:.55rem; width:100%}
/* 核對號碼：貼住件貨、夠大眼睇得清；tabular-nums 令逐位對得快 */
.vno{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end;
  font-variant-numeric:tabular-nums; font-size:.95rem; font-weight:600;
  color:var(--ink); letter-spacing:.02em; white-space:nowrap; padding-left:.5rem}
.vno i{font-style:normal; font-size:.6rem; font-weight:400; color:var(--ink3);
  letter-spacing:.06em; margin-bottom:.05rem}
/* 今日已派 —— 只讀，視覺上要明顯低一級，唔可以同「要派」爭注意力 */
.donebox{margin:1rem 0 0; border-top:1px solid var(--rule); padding-top:.5rem}
.donebox summary{font-size:.74rem; color:var(--ink2); cursor:pointer; padding:.3rem 0;
  list-style:none; display:flex; align-items:center; gap:.35rem}
.donebox summary::-webkit-details-marker{display:none}
.donebox summary::before{content:'▸'; color:var(--ink3); font-size:.7rem}
.donebox[open] summary::before{content:'▾'}
.donerow{display:flex; justify-content:space-between; gap:.8rem; padding:.32rem 0 .32rem .9rem;
  font-size:.78rem; color:var(--ink2); border-bottom:1px solid var(--rule)}
.donerow:last-child{border-bottom:0}
.donerow__t i{font-style:normal; color:var(--ink3); margin-left:.35rem}
.donerow__m{color:var(--ink3); font-size:.7rem; white-space:nowrap; font-variant-numeric:tabular-nums}

.sec{margin-top:1.9rem}
.sec__hd{display:flex; align-items:baseline; gap:.5rem; padding-bottom:.15rem}
.sec__t{font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink3); font-weight:600}
.sec__n{margin-left:auto; font-weight:600; font-size:.82rem; font-variant-numeric:tabular-nums}

.pick{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  width:100%; text-align:left; padding:.75rem 0; min-height:48px;
  border-bottom:1px solid var(--rule)}
.box{width:1.15rem; height:1.15rem; margin-top:.15rem; flex:none;
  border:1px solid var(--ink3); background:transparent; display:grid; place-items:center;
  transition:background var(--t-box) var(--ez), border-color var(--t-box) var(--ez)}
.box svg{width:.85rem; height:.85rem; stroke:var(--bg); stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
/* 剔 = 筆畫畫出（落墨感）；取消剔 80ms 即退 —— 修正要快過確認 */
.box svg path{stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 80ms var(--ez)}
.pick[aria-checked="true"] .box{background:var(--pink); border-color:var(--pink)}
.pick[aria-checked="true"] .box svg path{stroke-dashoffset:0;
  transition:stroke-dashoffset var(--t-tick) var(--ez-x)}
.pick__t{font-weight:400; line-height:1.35; font-size:.95rem}
.pick__m{font-size:.72rem; color:var(--ink3); margin-top:.08rem}
/* 可以派但要留意（例：預設寄・人到咗可派）—— 琥珀，同「派唔到」嘅灰分得開 */
.pick__m--notice{color:oklch(52% .12 75)}
.pick--parent{opacity:.7}
.pick--parent .box{border-style:dashed}
.kids{margin-left:1.85rem; padding-left:.75rem; border-left:1px solid var(--rule)}

.later{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  padding:.6rem 0; color:var(--ink2); border-bottom:1px solid var(--rule)}
.later__i{width:1.15rem; height:1.15rem; flex:none; margin-top:.15rem; display:grid;
  place-items:center; font-size:.72rem; color:var(--ink3); border:1px dashed var(--ink3)}
.later__t{font-size:.88rem}
.later__w{font-size:.72rem; color:var(--ink3); margin-top:.05rem}

/* 代取 checkbox —— 同貨品剔項同一個視覺，但同清單分開（上面留白） */
.proxy{margin-top:1.9rem; border-top:1px solid var(--rule); border-bottom:none}

/* 底掣 */
.act{position:fixed; left:0; right:0; bottom:0; z-index:15;
  padding:.75rem 1.15rem calc(1rem + var(--safe-b));
  background:linear-gradient(to top, var(--bg) 72%, transparent)}
.cta{width:100%; min-height:52px; padding:.9rem 0;
  background:transparent; color:var(--pink); border-top:2px solid var(--pink);
  font-weight:500; font-size:.98rem;
  display:flex; align-items:center; justify-content:space-between; gap:.55rem}
.cta[disabled]{color:var(--ink3); border-top-color:var(--rule); cursor:default}
.cta--ghost{color:var(--ink2); border-top:1px solid var(--rule); justify-content:center; margin-top:1.6rem}
.cta__n{background:var(--pink); color:var(--bg); padding:.05rem .45rem;
  font-size:.85rem; font-variant-numeric:tabular-nums}
.cta[disabled] .cta__n{background:var(--ink3)}
.cta__n[hidden]{display:none}
.cta__n.bump{animation:bump var(--t-bump) var(--ez)}
@keyframes bump{from{opacity:.2; transform:translateY(.3em)}}

/* 按壓：狀態變化（即時），唔係 motion */
button:active{opacity:.5; transition:opacity 40ms}
button{transition:opacity 120ms var(--ez)}

/* ── 會員確認 ─────────────────────────────────────────────────────── */
.mem{padding:calc(1.5rem + var(--safe-t)) 1.15rem calc(1.2rem + var(--safe-b));
  display:grid; align-content:start; min-height:100svh}
.mem__hand{font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:1.1rem}
.mem__who{font-size:2.2rem; font-weight:400; margin:0 0 .15rem; letter-spacing:-.04em}
.mem__sub{font-size:.72rem; color:var(--ink3); margin:0 0 1.5rem; font-variant-numeric:tabular-nums}
.mem h2{font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  font-weight:600; color:var(--ink3); margin:0 0 .7rem}
.mem ul{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.5rem}
.mem li{font-size:1.05rem; line-height:1.35; border-bottom:1px solid var(--rule); padding-bottom:.5rem}
.mem li span{display:block; font-size:.74rem; color:var(--ink3); margin-top:.1rem}
.mem__later{border-top:1px solid var(--rule); padding-top:1rem}
.mem__cta{width:100%; min-height:56px; padding:1rem; margin-top:.6rem;
  background:transparent; color:var(--pink); border:1px solid var(--pink); font-weight:500; font-size:1rem}
.mem__back{margin-top:.9rem; font-size:.78rem; color:var(--ink3); min-height:44px}
/* 兩步入場：名先、清單後 —— 完全藏喺實體遞機嗰 1–2 秒入面，staff 零等待 */
.screen--member .step2{animation:stepIn var(--t-step) var(--ez) 90ms backwards}
.screen--member .step3{animation:stepIn var(--t-step) var(--ez) 160ms backwards}

/* ── 收訖 ─────────────────────────────────────────────────────────── */
.done{padding:calc(2.4rem + var(--safe-t)) 1.15rem calc(1.2rem + var(--safe-b));
  position:relative; display:grid; align-content:start; min-height:100svh}
.done__t{font-size:1.6rem; font-weight:400; letter-spacing:-.02em; margin:.4rem 0 .2rem}
.done__sub{font-size:.74rem; color:var(--ink3); margin:0 0 1.6rem; font-variant-numeric:tabular-nums}
.done__remind{font-size:.8rem; color:var(--ink2); line-height:1.6;
  border-top:1px solid var(--rule); padding-top:1rem; margin:0}
.stamp{position:absolute; right:1.1rem; top:calc(4.2rem + var(--safe-t));
  padding:.5rem .75rem; border:2px solid var(--pink); color:var(--pink);
  font-size:1.7rem; font-weight:600; letter-spacing:.14em;
  transform:rotate(-4deg); mix-blend-mode:multiply; opacity:.92}
/* 紙先、字後、印最後落 —— 全 flow 粉紅唯一一次大出場，係 peak-end */
.screen--done .done__t,.screen--done .done__sub{animation:stepIn var(--t-step) var(--ez) backwards}
.screen--done .done__remind,.screen--done .next{animation:fadeOnly var(--t-step) var(--ez) 240ms backwards}
.screen--done .stamp{animation:stampIn var(--t-stamp) var(--ez-x) 180ms backwards}
@keyframes stampIn{from{opacity:0; transform:rotate(-4deg) scale(1.16)}
  to{opacity:.92; transform:rotate(-4deg) scale(1)}}
.next{width:100%; min-height:52px; margin-top:2rem;
  background:transparent; color:var(--pink); border:1px solid var(--pink);
  font-weight:500; font-size:.98rem}
.drainwrap{margin-top:.7rem; height:1px; background:var(--rule)}
.drain{height:1px; background:var(--pink); transform-origin:left; transform:scaleX(1)}
.drain.run{transform:scaleX(0); transition:transform 8s linear}
.draincap{font-size:.65rem; color:var(--ink3); margin:.35rem 0 0; text-align:right}

/* ── 同步隊列 ─────────────────────────────────────────────────────── */
.qrow{padding:.85rem 0; border-bottom:1px solid var(--rule)}
.qrow__h{display:flex; align-items:baseline; gap:.5rem}
.qrow__n{font-size:1rem}
.qrow__s{margin-left:auto; font-size:.72rem; color:var(--ink3); font-variant-numeric:tabular-nums}
.qrow__s[data-s="failed"]{color:var(--danger)}
.qrow__m{font-size:.75rem; color:var(--ink2); margin-top:.25rem; line-height:1.5}
.qrow__act{margin-top:.5rem; display:flex; gap:1.1rem}
.qrow__act button{font-size:.78rem; color:var(--pink); min-height:40px}
.qrow__act button.warn{color:var(--danger)}

/* ── reduced motion：空間位移全退化成 fade，功能性動態保留 ─────────── */
@media (prefers-reduced-motion:reduce){
  .screen,.results,
  .screen--member .step2,.screen--member .step3,
  .screen--done .done__t,.screen--done .done__sub,
  .screen--done .done__remind,.screen--done .next{
    animation:fadeOnly 120ms ease-out backwards !important;
  }
  .screen--done .stamp{animation:fadeOnly 200ms ease-out 100ms backwards !important}
  .sync .dot,.sweepbar,.cta__n.bump{animation:none !important}
  .box svg path{transition:none}
  /* .drain 保留 —— 佢係計時器唔係裝飾，郁緊代表「仲有幾耐自動走」 */
}