/* ============================================================================
   luxe-pickers — 日期 / 月份 / 時間選擇器（取代瀏覽器原生彈窗）

   為什麼需要這個檔案：原生 <input type=date|month|time> 的下拉面板是瀏覽器 chrome，
   不在頁面的 DOM 裡，CSS 碰不到。`accent-color` 對 Windows Chrome 的日曆無效，
   `::-webkit-calendar-picker-indicator` 只能改那顆小圖示、改不了面板本身。
   所以「把原生 picker 調成紙墨風」做不到 —— 唯一的辦法是自己畫一個。

   搭配 scripts/luxe-pickers.js 使用。兩個檔案一起複製到各站，不要各自抄一份。
   ========================================================================== */

/* seal() 會把 type=date|month|time 換成 text（原生 picker 從此在結構上不存在），
   之後這些欄位靠 data-luxe 認人。
   下面仍保留原生型別選擇器：HTML parse 完到 seal() 執行之間有一小段空窗，
   這段時間欄位還是原生型別，先把原生圖示藏掉、避免閃一下。 */
input[data-luxe],
input[type="date"],
input[type="month"],
input[type="time"]{
  color-scheme:light;
  cursor:pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{display:none}

/* 彈窗外殼：日期／月份／時間共用。
   ink 濃淡階 scope 在元件內：kit 的 tokens.css 有 --ink-25..60，但不是每個站都完整複製過去
   （衡與天樞只有 --ink）。有就用站上的，沒有就從該站的 --ink 現算 —— 不是新顏色，
   是同一個墨色的不同濃度。這樣元件可以直接丟進任何 luxe 家族的站，不必先去改它的 :root。
   依規範元件一律 scope，只有 token 可以全域。 */
.luxe-pop{
  --lp-ink-25:var(--ink-25,color-mix(in srgb,var(--ink) 25%,transparent));
  --lp-ink-30:var(--ink-30,color-mix(in srgb,var(--ink) 30%,transparent));
  --lp-ink-40:var(--ink-40,color-mix(in srgb,var(--ink) 40%,transparent));
  --lp-ink-45:var(--ink-45,color-mix(in srgb,var(--ink) 45%,transparent));
  --lp-ink-60:var(--ink-60,color-mix(in srgb,var(--ink) 60%,transparent));
  position:fixed;z-index:200;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  box-shadow:0 24px 60px -18px rgba(25,23,18,.34),0 0 0 1px var(--hair);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.luxe-pop.on{opacity:1;transform:none;pointer-events:auto}
.luxe-pop.lp-date,
.luxe-pop.lp-month{width:288px;padding:16px 16px 10px}
.luxe-pop.lp-time{width:212px;padding:14px 14px 10px}

@media (prefers-reduced-motion:reduce){
  .luxe-pop{transition:none;transform:none}
}

/* 頁首：標題 + 上/下一頁 */
.lp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lp-title{font-family:var(--serif-tc);font-size:var(--fs-md, 15px);font-weight:600;letter-spacing:var(--tk-title)}
/* 標題可下鑽(日格→月格→年格)。button 形態:字級與 span 版一致,只加可點的緩衝與 hover。
   2026-07-30:換掉原生日曆時只複刻了翻月箭頭,月/年跳轉能力靜默掉了 —— 這顆就是補回來的。 */
button.lp-title.lp-jump{
  border:0;background:none;cursor:pointer;color:var(--ink);
  padding:4px 8px;margin:-4px -8px;border-radius:9px;
  transition:background .2s var(--ease);
}
button.lp-title.lp-jump:hover{background:var(--paper-2)}
.lp-nav{display:flex;gap:4px}
.lp-nav button{
  width:32px;min-height:32px;
  border:1px solid var(--hair);border-radius:9px;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--lp-ink-60);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lp-nav button:hover:not(:disabled){background:var(--paper-2);color:var(--ink)}
.lp-nav button:disabled{opacity:.28;cursor:default}
.lp-nav svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* 頁尾：清除 / 今天 */
.lp-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--hair);
}
.lp-foot button{
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:var(--fs-caps, 12.5px);font-weight:500;
  min-height:32px;padding:4px 8px;color:var(--accent);
  letter-spacing:var(--tk-label);text-indent:var(--tk-label);
}
.lp-foot button:disabled{color:var(--lp-ink-25);cursor:default}
.lp-foot button.lp-clear{color:var(--lp-ink-45)}

/* ---- 日期 ---- */
.lp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.lp-dow{
  font-family:var(--latin);font-size:var(--fs-micro, 10.5px);font-weight:500;
  letter-spacing:.1em;text-indent:.1em;color:var(--lp-ink-40);
  text-align:center;padding:2px 0 6px;text-transform:uppercase;
}
.lp-day{
  aspect-ratio:1;min-height:0;border:none;background:transparent;border-radius:50%;cursor:pointer;
  font-family:var(--latin);font-size:var(--fs-xs, 13px);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);
  display:grid;place-items:center;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.lp-day:hover:not(:disabled){background:var(--wash)}
.lp-day.out{color:var(--lp-ink-25)}
.lp-day.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.lp-day.sel{background:var(--ink);color:var(--paper)}
.lp-day.sel.today{box-shadow:none}
.lp-day:disabled{opacity:.3;cursor:default;background:transparent}

/* ---- 月份 ---- */
.lp-mons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lp-mon{
  min-height:40px;border:none;background:transparent;border-radius:10px;cursor:pointer;
  font-family:var(--serif-tc);font-size:var(--fs-xs, 13px);color:var(--ink);
  display:grid;place-items:center;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.lp-mon:hover:not(:disabled){background:var(--wash)}
.lp-mon.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.lp-mon.sel{background:var(--ink);color:var(--paper)}
.lp-mon.sel.today{box-shadow:none}
.lp-mon:disabled{opacity:.3;cursor:default;background:transparent}

/* ---- 時間 ---- */
.lp-tv{
  display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:12px;
  font-family:var(--latin);font-size:var(--fs-3xl, 26px);font-weight:330;
  font-variant-numeric:lining-nums tabular-nums;
}
.lp-tv .sep{color:var(--lp-ink-30)}
.lp-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp-col{
  max-height:196px;overflow-y:auto;scrollbar-width:none;
  border:1px solid var(--hair);border-radius:12px;padding:4px;
}
.lp-col::-webkit-scrollbar{display:none}
.lp-cap{
  font-family:var(--latin);font-size:var(--fs-micro, 10.5px);font-weight:500;letter-spacing:.2em;text-indent:.2em;
  color:var(--lp-ink-40);text-align:center;padding:4px 0 6px;text-transform:uppercase;
  position:sticky;top:0;background:var(--paper);
}
.lp-item{
  width:100%;min-height:34px;border:0;background:none;border-radius:9px;cursor:pointer;
  font-family:var(--latin);font-size:var(--fs-sm, 14px);font-variant-numeric:lining-nums tabular-nums;color:var(--lp-ink-60);
  display:grid;place-items:center;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.lp-item:hover{background:var(--wash)}
.lp-item.sel{background:var(--ink);color:var(--paper)}

/* focus ring：鍵盤操作看得見 */
.luxe-pop button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================================
   luxe-select — 下拉選單（取代瀏覽器原生 <select> 面板）

   為什麼併進這個檔案而不是另開一支：這跟上面的日期／時間是**同一個問題**——
   原生下拉面板同樣是瀏覽器 chrome，同樣不在頁面 DOM 裡，CSS 同樣碰不到
   （Windows Chrome 的選項清單是藍底白字的系統 UI，`accent-color` 對它無效）。
   同一個概念只寫一次，所以 select 跟 date 共用同一個 .luxe-pop 彈窗與同一支 JS。
   2026-07-26：4 個 App 的每一個 <select> 都在噴系統藍，天樞報價頁最明顯。

   DOM 形狀（由 seal 產生，呼叫端一行都不用改）：
     <span class="luxe-sel">
       <select id="..." class="fi" data-luxe-sel="1">…</select>   ← 留著，值語意不變
       <button class="fi luxe-sel-btn">…</button>                  ← 使用者看到／點到的
     </span>
   原生 select 仍在 DOM 裡（.value 讀寫、onchange 接線、表單提交全部照常），
   只是被移出視覺與命中範圍 —— 面板沒得彈，而不是請它不要彈（同第 8 條的治本判準）。
   ========================================================================== */

.luxe-sel{display:block;position:relative}

/* 原生 select 留在 DOM 但退出視覺與命中：不能用 display:none（部分瀏覽器會連
   .value 的可及性一起弱化），用零尺寸 + clip 才是安全的隱藏。 */
.luxe-sel>select[data-luxe-sel]{
  position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
  pointer-events:none;opacity:0;
}

/* 觸發鈕：className 由 seal() 從 select 複製過來（.fi 之類的站台欄位樣式照舊生效），
   這裡只補「按鈕該有、輸入框沒有」的那幾件事。 */
.luxe-sel-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;cursor:pointer;font:inherit;color:var(--ink);
}
.luxe-sel-btn .luxe-sel-vl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.luxe-sel-btn .luxe-sel-vl[data-empty="1"]{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.luxe-sel-btn .luxe-sel-chev{
  flex:none;width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  color:color-mix(in srgb,var(--ink) 45%,transparent);
  transition:transform .22s var(--ease);
}
.luxe-sel-btn[aria-expanded="true"] .luxe-sel-chev{transform:rotate(180deg)}
.luxe-sel-btn:disabled{cursor:default;opacity:.5}

/* 選項清單：沿用 .luxe-pop 外殼，只定義內容 */
.luxe-pop.lp-select{padding:6px;max-height:min(320px,60vh);overflow-y:auto;scrollbar-width:none}
.luxe-pop.lp-select::-webkit-scrollbar{display:none}
.lp-optgrp{
  font-family:var(--latin);font-size:var(--fs-micro, 10.5px);font-weight:500;letter-spacing:.2em;text-indent:.2em;
  color:var(--lp-ink-40);text-transform:uppercase;padding:9px 10px 5px;
}
.lp-opt{
  display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;
  border:0;background:none;border-radius:10px;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:var(--fs-sm, 14px);color:var(--ink);
  transition:background .15s var(--ease);
}
.lp-opt .lp-opt-tx{flex:1;min-width:0;overflow-wrap:anywhere}
.lp-opt .lp-opt-tick{flex:none;width:15px;height:15px;stroke:var(--accent);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.lp-opt[aria-selected="true"]{background:var(--wash)}
.lp-opt[aria-selected="true"] .lp-opt-tick{opacity:1}
.lp-opt:hover:not(:disabled){background:var(--wash)}
.lp-opt:disabled{opacity:.34;cursor:default}

/* ---------------------------------------------------------------------------
   combo（`<input list>` + `<datalist>`）—— 同一族的第三個成員，2026-07-30 補上。

   Chrome 會在有 `list` 的框內自己畫一顆下三角箭頭，點下去彈出的建議清單是瀏覽器 chrome，
   CSS 碰不到（跟 select 的選項清單、date 的日曆是同一件事）。JS 端把 `list` 屬性
   摘掉讓原生面板結構上不存在，這裡只負責把我們自己畫的那顆 chevron 擺進欄位右緣。

   與 select 的差別：**combo 是可自由輸入的欄位**（授信科目、客戶名這種「有字典但不
   封閉」的欄位），所以 input 留在視覺與命中範圍內，照常打字；面板只是候選清單。

   DOM 形狀（由 seal 產生，呼叫端一行都不用改）：
     <span class="luxe-combo">
       <input class="fi" data-luxe="combo" data-luxe-list="fa-ctlist">   ← 照常打字
       <button class="luxe-combo-btn">chevron</button>                    ← 滑鼠捷徑
     </span>
   ------------------------------------------------------------------------ */
.luxe-combo{display:block;position:relative}
.luxe-combo>input{width:100%;padding-right:34px}   /* 讓出 chevron 的位置，字不會壓到 */
.luxe-combo-btn{
  position:absolute;top:0;right:0;bottom:0;width:34px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--ink);
}
.luxe-combo-btn .luxe-sel-chev{
  width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  color:color-mix(in srgb,var(--ink) 45%,transparent);
  transition:transform .22s var(--ease);
}
.luxe-combo-btn:disabled{cursor:default;opacity:.5}
/* 面板外殼與選項列直接沿用 select 的那一套 —— 同一個概念只寫一次。 */
.luxe-pop.lp-combo{padding:6px;max-height:min(320px,60vh);overflow-y:auto;scrollbar-width:none}
.luxe-pop.lp-combo::-webkit-scrollbar{display:none}

/* ---------------------------------------------------------------------------
   數字欄位的增減箭頭同樣是瀏覽器 chrome（::-webkit-inner-spin-button 是 shadow DOM，
   只能整顆關掉、改不了樣子）。各站的欄位樣式寫了 appearance:none，但那管的是外框，
   管不到這顆偽元素 —— 2026-07-26 天樞報價頁的數字框仍然掛著一組系統箭頭。
   金額與利率都是用鍵盤打的，不是按箭頭一格一格點出來的，直接關掉。
   真的需要增減鈕的欄位，用站上的 .btn 自己畫一對。
   ------------------------------------------------------------------------ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ---------------------------------------------------------------------------
   勾選框 / 單選鈕 —— 這一族的第四種,2026-08-02 使用者在羅盤的訂位表單抓到。

   RCA:前三輪(date/time → select → input list)找的都是「會彈出瀏覽器 chrome 面板」的控件,
   規則、閘門、CLAUDE.md 第 8 條全部以「面板」為判準。checkbox / radio 不彈面板 ——
   它是**原生直接畫在頁面上的控件**:Windows Chrome 一顆方角灰框,勾選時填系統藍。
   `accent-color` 只換得掉那塊藍,換不掉方角、框線粗細、勾號形狀與尺寸,
   所以它跟紙墨風永遠對不齊。判準要從「會不會彈面板」擴成「這個像素是誰畫的」:
   只要不是我們畫的,就得換皮。

   做法刻意是**純 CSS、零 JS、零 HTML 改動** —— `appearance:none` 之後 checkbox 就是一個
   普通盒子,我們自己畫框與勾號。既有的 `<input type=checkbox>` 一行都不用改,
   四個 App 只要載入這份 kit 就一起換皮(這正是把它放在 kit 而不是各站 CSS 的理由)。
   `:focus-visible` 保留鍵盤焦點環;`data-luxe-raw` 明示豁免,與 select 同一個逃生口。
   ------------------------------------------------------------------------ */
/* 註:這裡不能用上面 .luxe-pop 裡的 --lp-ink-* 別名 —— 那組變數 scope 在彈窗元件內,
   頁面上的 checkbox 拿不到(2026-08-02 實測 border-color 掉成黑色)。就地寫同一個 fallback。 */
input[type="checkbox"]:not([data-luxe-raw]),
input[type="radio"]:not([data-luxe-raw]){
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;flex:none;margin:0;padding:0;
  border:1px solid var(--ink-30,color-mix(in srgb,var(--ink) 30%,transparent));border-radius:6px;
  background:var(--paper);cursor:pointer;position:relative;
  display:inline-grid;place-content:center;vertical-align:-4px;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
input[type="radio"]:not([data-luxe-raw]){border-radius:50%}
input[type="checkbox"]:not([data-luxe-raw]):hover,
input[type="radio"]:not([data-luxe-raw]):hover{border-color:var(--ink-60,color-mix(in srgb,var(--ink) 60%,transparent))}
/* 勾號 = 描邊的線條,和 icons.svg 同一支筆(stroke-width 1.5、圓端點),不是實心色塊 */
input[type="checkbox"]:not([data-luxe-raw])::after{
  content:"";width:11px;height:6px;
  border-left:1.6px solid var(--paper);border-bottom:1.6px solid var(--paper);
  border-radius:1px;transform:rotate(-45deg) scale(.6);transform-origin:center;
  margin-top:-2px;opacity:0;transition:opacity .14s var(--ease),transform .16s var(--ease);
}
input[type="radio"]:not([data-luxe-raw])::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--paper);
  opacity:0;transform:scale(.5);transition:opacity .14s var(--ease),transform .16s var(--ease);
}
input[type="checkbox"]:not([data-luxe-raw]):checked,
input[type="radio"]:not([data-luxe-raw]):checked{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:not([data-luxe-raw]):checked::after{opacity:1;transform:rotate(-45deg) scale(1)}
input[type="radio"]:not([data-luxe-raw]):checked::after{opacity:1;transform:scale(1)}
input[type="checkbox"]:not([data-luxe-raw]):disabled,
input[type="radio"]:not([data-luxe-raw]):disabled{opacity:.45;cursor:default}
input[type="checkbox"]:not([data-luxe-raw]):focus-visible,
input[type="radio"]:not([data-luxe-raw]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 觸控目標刻意不在這裡用 ::before 撐大 —— 一塊 44px 的透明覆蓋層會吃掉旁邊元素的點擊,
   而各站的勾選框幾乎都包在 <label> 裡(整列本來就可點)。要放大命中區請在站上把 label
   的 padding 加大,不要在共用元件裡蓋一塊看不見的東西。 */

/* 檔案選擇鈕:`::-webkit-file-upload-button` 是系統灰鈕。多數站是把 input 藏起來、
   用自己的 .btn 觸發(正解);萬一直接顯示,至少讓那顆鈕長得像我們的膠囊鈕。 */
input[type="file"]:not([data-luxe-raw])::-webkit-file-upload-button{
  -webkit-appearance:none;appearance:none;font:inherit;font-size:var(--fs-caps);
  border:1px solid var(--ink-30,color-mix(in srgb,var(--ink) 30%,transparent));border-radius:999px;background:transparent;
  color:var(--ink);padding:6px 14px;margin-right:10px;cursor:pointer;
}
/* 進度條 / 滑桿的軌道與拇指也是系統畫的。目前各站沒用到 range;用到的那天
   一起補進來,不要就地在站上寫一份(這正是這份檔案存在的理由)。 */