/* 共用介面元件・樣子（票 03）。先載 /ui/tokens.css。class 一律 ui- 開頭；用法見 shared/docs/ui.md。
   規矩（cityapp DESIGN.md）：卡片沒有框線（線在陰影裡）、滑過不浮起只換底色、品牌色只給可以按的東西、
   狀態用色點或淡底標籤加文字、按下縮 3%。內容安全政策不准行內樣式：動態的值用 CSS 變數，不寫 style=。 */

/* ---------- 底 ---------- */

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

html {
  font-synthesis: none;
  text-spacing-trim: space-first;
  text-autospace: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(64px + var(--ui-safe-top));   /* 捲到某一段時不被頂欄蓋住 */
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-family: var(--ui-font);
  font-size: var(--ui-text);
  line-height: var(--ui-leading);
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: anywhere;
}

button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
input, textarea, select { font-size: max(16px, 1em); }   /* iPhone 小於 16px 會自動放大畫面 */
button, a, label, summary { touch-action: manipulation; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.ui-num { font-variant-numeric: tabular-nums lining-nums; }
.ui-prose { line-height: 1.75; }
.ui-muted { color: var(--ui-muted-fg); }
.ui-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-clamp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 按下去縮一點：手指一碰就有反應；減少動態時只剩顏色 */
.ui-press { transition: transform var(--ui-press-up) var(--ui-ease-out), background-color 150ms ease, color 150ms ease; }
.ui-press:active { transform: scale(0.97); transition-duration: var(--ui-press-down); }

.ui-icon { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.75; }

/* ---------- 頁 ---------- */

.ui-topbar {
  position: sticky; top: 0; z-index: 20;
  /* 左右兩欄平分標題以外的寬度（標題照樣在正中間），左上的返回鈕寫上一頁的名字，比 44px 寬也放得下。原本是 44px 一欄：
     「‹ 出勤異常」被撐成欄寬、內容置中往兩邊溢出，左邊切到畫面外（使用者 2026-10-20 在 iPhone 上看到） */
  display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; gap: 8px;
  min-height: calc(56px + var(--ui-safe-top)); padding: var(--ui-safe-top) 12px 0;
  background: var(--ui-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--ui-border);
}
.ui-topbar-title { font-weight: 700; text-align: center; }
.ui-topbar > :first-child { justify-self: start; min-width: 0; max-width: 100%; }
.ui-topbar > :last-child { justify-self: end; }
/* 返回鈕（nav.js）：圖示往左貼近頁緣，頁名太長就截掉加「…」，不壓到標題 */
.ui-topbar [data-ui-back] { padding-left: 6px; }
.ui-topbar [data-ui-back] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 公司章與頭像的字跟著框的大小（px），不跟字級放大：放大會撐破框 */
.ui-stamp { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-r-plate); background: var(--ui-primary); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0; }
.ui-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ui-tint); color: var(--ui-fg); font-size: 14px; font-weight: 700; letter-spacing: 0; }

.ui-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px var(--ui-gutter) calc(40px + var(--ui-safe-bottom)); }
/* 只有一欄清單或表單的頁（維護頁）：桌機上整列不要拉到 1200px，眼睛從名字到右邊的編號牌不用走太遠 */
.ui-page.ui-page-narrow { max-width: 760px; }
.ui-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ui-page-head > :first-child { min-width: 0; }
.ui-h1 { font-size: var(--ui-h1); line-height: 1.3; font-weight: 700; letter-spacing: 0.005em; }
.ui-sub { margin-top: 4px; font-size: var(--ui-text-sm); color: var(--ui-muted-fg); }
.ui-sub:empty { display: none; }
.ui-section-title { margin: 28px 0 10px; font-size: var(--ui-text-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--ui-muted-fg); }

/* ---------- 卡片：紙白、16 圓角、沒有框線 ---------- */

.ui-card { background: var(--ui-card); border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-card); padding: 16px; }
.ui-card + .ui-card { margin-top: 12px; }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ui-card-title { font-size: var(--ui-text); font-weight: 700; line-height: 1.35; }
.ui-card-flush { padding: 6px 0; }
.ui-card-flush > .ui-card-head { padding: 8px 16px 0; }

/* ---------- 按鈕：主要（鋼藍實心）、次要（玻璃）、危險（紅）、不顯眼（透明） ---------- */

.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ui-ctl); min-width: var(--ui-ctl-sm); padding: 0 18px;
  border: 0; border-radius: var(--ui-r-control);
  font-size: var(--ui-text); font-weight: 700; line-height: 1.2; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* 換頁的按鈕（button 給 href）是連結：不加底線、字色照按鈕的種類 */
a.ui-btn { text-decoration: none; }
.ui-btn-sm { min-height: var(--ui-ctl-sm); padding: 0 14px; font-size: var(--ui-text-sm); }
.ui-btn-lg { min-height: 56px; padding: 0 22px; }
.ui-btn-block { display: flex; width: 100%; }
.ui-btn-primary { background: var(--ui-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.ui-btn-primary:active { background: var(--ui-primary-active); }
.ui-btn-secondary { background: var(--ui-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ui-shadow-card); color: var(--ui-fg); }
.ui-btn-secondary:active { background: var(--ui-pressed); }
.ui-btn-danger { background: var(--ui-danger); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.ui-btn-danger:active { background: var(--ui-danger-active); }
.ui-btn-ghost { background: transparent; color: var(--ui-primary); }
.ui-btn-ghost:active { background: var(--ui-pressed); }
.ui-btn-ghost.ui-btn-danger-text { color: var(--ui-danger); }
.ui-btn[disabled] { opacity: 0.5; cursor: default; }
.ui-btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.ui-btn .ui-icon { width: 20px; height: 20px; }
.ui-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-fg); }
.ui-icon-btn:active { background: var(--ui-pressed); }
.ui-icon-btn .ui-icon { width: 22px; height: 22px; }

/* 今天的打卡（A 的打卡卡片）：上面兩格看狀態（淡底），下面兩顆鈕做事；主色只給現在該按的那一顆 */
.ui-punch { display: grid; gap: 12px; }
.ui-punch-slots, .ui-punch-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* 兩格並排放不下（字放大到 150%、200%）就上下排：寬度照字的大小算，平常的字在 360px 寬的手機上還是並排；時間不折行 */
.ui-punch-slots { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); }
.ui-punch-slot { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border-radius: var(--ui-r-row); background: var(--ui-muted); }
.ui-punch-label, .ui-punch-meta { font-size: var(--ui-text-xs); color: var(--ui-muted-fg); }
.ui-punch-time { font-size: var(--ui-kpi); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.ui-punch-meta { display: flex; align-items: flex-start; gap: 4px; overflow-wrap: anywhere; }
.ui-punch-meta .ui-icon { width: 14px; height: 14px; flex: none; margin-top: 0.15em; }

/* app 清單左邊的模組色磚（A 的入口頁）：白圖示、控制項圓角；顏色是 tokens.css 的 --ui-m-* */
.ui-app-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--ui-r-control); background: var(--ui-m-attendance); color: #fff; }
.ui-app-icon .ui-icon { width: 22px; height: 22px; }
.ui-app-shared { background: var(--ui-m-shared); }

/* ---------- 狀態標籤（淡底深字的膠囊）與色點 ---------- */

.ui-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-tag {
  display: inline-flex; align-items: center; flex: none; max-width: 100%;
  min-height: 26px; padding: 2px 10px; border-radius: 9999px;
  font-size: var(--ui-text-xs); font-weight: 700; line-height: 1.3; letter-spacing: 0.04em;
  background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg);
}
.ui-tone-ok { --ui-tone-fg: var(--ui-tone-ok-fg); --ui-tone-bg: var(--ui-tone-ok-bg); --ui-tone-dot: var(--ui-tone-ok-dot); }
.ui-tone-warn { --ui-tone-fg: var(--ui-tone-warn-fg); --ui-tone-bg: var(--ui-tone-warn-bg); --ui-tone-dot: var(--ui-tone-warn-dot); }
.ui-tone-danger { --ui-tone-fg: var(--ui-tone-danger-fg); --ui-tone-bg: var(--ui-tone-danger-bg); --ui-tone-dot: var(--ui-tone-danger-dot); }
.ui-tone-info { --ui-tone-fg: var(--ui-tone-info-fg); --ui-tone-bg: var(--ui-tone-info-bg); --ui-tone-dot: var(--ui-tone-info-dot); }
.ui-tone-plum { --ui-tone-fg: var(--ui-tone-plum-fg); --ui-tone-bg: var(--ui-tone-plum-bg); --ui-tone-dot: var(--ui-tone-plum-dot); }
.ui-tone-neutral { --ui-tone-fg: var(--ui-tone-neutral-fg); --ui-tone-bg: var(--ui-tone-neutral-bg); --ui-tone-dot: var(--ui-tone-neutral-dot); }
.ui-tag[class*="ui-tone-"] { background: var(--ui-tone-bg); color: var(--ui-tone-fg); }
.ui-dot { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--ui-text-sm); color: var(--ui-fg); }
.ui-dot::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ui-tone-dot, var(--ui-tone-neutral-dot)); }
.ui-plate { display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-plate); background: var(--ui-card); font-size: var(--ui-text-xs); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* 大字的代碼（oneTimeCode）：三個一組、等寬數字、置中；字放大擠不下時分兩行，不撐破畫面 */
.ui-otc { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.4em; margin: 4px 0; font-size: var(--ui-code); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* ---------- 清單列：分隔線從文字起點開始，首列不畫 ---------- */

.ui-list > li { position: relative; }
.ui-list > li + li::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--ui-border); }
.ui-list-indent > li + li::before { left: 64px; }
.ui-list-indent > li + li:has(.ui-app-icon)::before { left: 72px; }  /* 模組色磚比頭像大（44 對 34），分隔線跟著文字起點 */
.ui-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--ui-row); padding: 10px 16px;
  border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none;
}
button.ui-row, a.ui-row { cursor: pointer; }
button.ui-row:active, a.ui-row:active { background: var(--ui-pressed); }
.ui-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ui-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.ui-row-title > span { min-width: 0; }
/* 標題旁邊的標籤（listRow 的 tags）：標籤不縮，名字放不下時標籤換到下一行（不截掉名字） */
.ui-row-title:has(> .ui-row-tags) { flex-wrap: wrap; row-gap: 4px; }
.ui-row-tags { flex: none; font-weight: 400; }
.ui-row-sub { font-size: var(--ui-text-sm); color: var(--ui-muted-fg); }
.ui-row-trail { display: flex; align-items: center; gap: 8px; flex: none; max-width: 45%; }
.ui-chevron { width: 18px; height: 18px; flex: none; color: var(--ui-muted-fg); stroke-width: 2.25; }

/* ---------- 表單欄位：標籤在上、錯誤在下並連到欄位 ---------- */

.ui-form { display: grid; gap: 18px; }
.ui-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ui-label { font-size: var(--ui-text-sm); font-weight: 700; }
.ui-label small { margin-left: 6px; font-weight: 400; color: var(--ui-muted-fg); }
.ui-input {
  width: 100%; min-height: var(--ui-ctl); padding: 0 12px;
  border: 1px solid var(--ui-border-input); border-radius: var(--ui-r-control);
  background: var(--ui-card); box-shadow: inset 0 1px 1px rgba(34, 40, 49, 0.03); outline: 0;
}
/* 焦點一律畫主色外框（有錯的欄位本來就是紅框，只加光暈看不出焦點在哪） */
/* 日期欄位（Chromium）焦點在裡面的年／月／日小格上，欄位本身不算 :focus，要用 :focus-within */
.ui-input:focus, .ui-input:focus-within { border-color: var(--ui-primary); outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-input[aria-invalid="true"] { border-color: var(--ui-danger); }
textarea.ui-input { min-height: 96px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
/* 日期、時間：原生的選擇（時間是票 09 的班表）。iOS 預設把值置中、沒值時高度縮掉：靠左、高度照 .ui-input 的 min-height */
input.ui-input:is([type="date"], [type="time"]) { -webkit-appearance: none; appearance: none; display: flex; align-items: center; text-align: left; }
input.ui-input:is([type="date"], [type="time"])::-webkit-date-and-time-value { text-align: left; }
/* 日期欄位裡的年月日有最小寬度，在 grid 裡（.ui-field、並排的欄位）預設不肯比它窄，會凸出格子：min-width: 0 讓它照格子寬 */
input.ui-input:is([type="date"], [type="time"]), .ui-date { min-width: 0; }
/* 可以清的日期（field 的 clear）：✕ 疊在欄位框裡面靠右，欄位右邊留出它的位置；不佔欄寬，跟沒有 ✕ 的日期一樣寬。
   ✕ 用上下各留 2px 撐出高度、不用 transform 置中（按下時 .ui-press 的 transform 會蓋掉）。沒值時藏起來，點那裡就是點欄位 */
.ui-date { position: relative; }
.ui-date > .ui-input { padding-right: calc(var(--ui-ctl-sm) + 2px); }
.ui-date .ui-date-clear { position: absolute; top: 2px; bottom: 2px; right: 2px; width: var(--ui-ctl-sm); height: auto; }
.ui-date[data-empty] .ui-date-clear { visibility: hidden; }
select.ui-input {
  appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted-fg) 50%), linear-gradient(135deg, var(--ui-muted-fg) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ui-hint { font-size: var(--ui-text-xs); color: var(--ui-muted-fg); }
.ui-error { display: flex; align-items: flex-start; gap: 4px; font-size: var(--ui-text-xs); font-weight: 700; color: var(--ui-danger); }
.ui-error .ui-icon { margin-top: 0.15em; }
/* 擠不下（字放大、選項長）就換到下一行，不撐破畫面 */
.ui-choice { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 9999px; background: var(--ui-muted); }
.ui-choice label { position: relative; flex: 1 1 auto; display: grid; }
.ui-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ui-choice span {
  display: grid; place-items: center; min-height: var(--ui-ctl-sm); padding: 0 14px; border-radius: 9999px;
  font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-muted-fg); text-align: center;
}
/* 選中的不只靠白底（白對淡底只有 1.1:1）：加主色細框、字變主色 */
.ui-choice input:checked + span { background: var(--ui-card); color: var(--ui-primary); box-shadow: inset 0 0 0 1.5px var(--ui-primary), var(--ui-shadow-card); }
.ui-choice input:focus-visible + span { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
/* 四個選項（例如假日的種類，票 06）：手機上一排放不下四個，會排成 3＋1、膠囊外框也變形：改成兩排兩個、一樣寬，
   外框換成圓角方塊；桌機一排四個、照舊是膠囊 */
.ui-choice:has(> label:nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--ui-r-row); }
@media (min-width: 900px) {
  .ui-choice:has(> label:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 9999px; }
}
/* 可以選好幾個的膠囊（checkChips）：沒選的是白底細框、次要字；選中的多一個勾勾、主色框、主色字、淡主色底（不只靠顏色） */
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-chip-check { position: relative; display: grid; }
/* checkbox 蓋在最上層（z-index：膠囊按下時的 transform 會讓它疊到 checkbox 上面），按住時 input:active 才接得到 */
.ui-chip-check input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; }
.ui-chip-check span {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--ui-ctl-sm); padding: 0 14px; border-radius: 9999px;
  border: 1px solid var(--ui-border-input); background: var(--ui-card); font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-muted-fg);
  transition: transform var(--ui-press-up) var(--ui-ease-out), background-color 150ms ease, color 150ms ease;
}
.ui-chip-check .ui-icon { display: none; width: 16px; height: 16px; stroke-width: 3; }
.ui-chip-check input:checked + span { border-color: var(--ui-primary); background: var(--ui-primary-soft); color: var(--ui-primary); box-shadow: inset 0 0 0 0.5px var(--ui-primary); }
.ui-chip-check input:checked + span .ui-icon { display: block; }
.ui-chip-check input:focus-visible + span { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-chip-check input:active + span { transform: scale(0.97); transition-duration: var(--ui-press-down); }

/* ---------- 點一下才展開的一段（disclosure） ---------- */

.ui-disclosure { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.ui-disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--ui-ctl-sm);
  font-size: var(--ui-text-sm); font-weight: 700; cursor: pointer; list-style: none;
}
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; border-radius: var(--ui-r-control); }
.ui-disclosure > summary .ui-chevron { transition: transform var(--ui-press-up) var(--ui-ease-out); }
.ui-disclosure[open] > summary .ui-chevron { transform: rotate(90deg); }
.ui-disclosure .ui-section-title { margin: 16px 0 2px; }

/* ---------- 空狀態、載入中、錯誤訊息 ---------- */

.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; }
.ui-empty > .ui-icon { width: 32px; height: 32px; stroke-width: 1.5; color: var(--ui-muted-fg); margin-bottom: 4px; }
.ui-empty-title { font-weight: 700; }
.ui-empty-desc { max-width: 32ch; font-size: var(--ui-text-sm); line-height: 1.7; color: var(--ui-muted-fg); }
.ui-empty .ui-btn { margin-top: 10px; }

.ui-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--ui-row); padding: 12px; color: var(--ui-muted-fg); font-size: var(--ui-text-sm); }
.ui-spinner { display: inline-block; width: 1.2em; height: 1.2em; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin 600ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--ui-r-row); background: var(--ui-tone-bg, var(--ui-muted)); color: var(--ui-tone-fg, var(--ui-fg)); }
.ui-alert > .ui-icon { margin-top: 0.15em; }
.ui-alert-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ui-alert-title { font-weight: 700; }
.ui-alert-detail { font-size: var(--ui-text-sm); line-height: 1.6; }
.ui-alert .ui-btn { flex: none; align-self: center; }

/* ---------- 底部面板（<dialog>）：手機貼底（頂角 24、握把），桌機置中（20 圓角） ---------- */

.ui-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92dvh;
  display: flex; flex-direction: column; padding: 0; border: 0;
  border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0;
  background: var(--ui-card); color: var(--ui-fg);
  /* 第二層是補底：彈簧衝過原位、往上拉的橡皮筋時，面板底下不露縫（往下 60px 才開始，蓋不到頂角的圓角） */
  box-shadow: var(--ui-shadow-modal), 0 240px 0 180px var(--ui-card);
  overscroll-behavior: contain;
  transform: translateY(0);
  transition: transform var(--ui-sheet-in) var(--ui-ease-drawer), overlay var(--ui-sheet-in) allow-discrete, display var(--ui-sheet-in) allow-discrete;
}
.ui-sheet:not([open]) { display: none; }
.ui-sheet::backdrop { background: var(--ui-scrim); opacity: 1; transition: opacity 160ms var(--ui-ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete; }
@starting-style {
  .ui-sheet[open] { transform: translateY(100%); }
  .ui-sheet[open]::backdrop { opacity: 0; }
}
.ui-sheet.ui-closing { transform: translateY(100%); transition-duration: var(--ui-sheet-out); transition-timing-function: var(--ui-ease-out); }
.ui-sheet.ui-closing::backdrop { opacity: 0; }
/* 手機上（沒有減少動態）滑上來、拖、關都是 ui.js 的彈簧（sheetMotion，CSSOM 設 transform、關掉 transition）；
   上面的轉場只給桌機的對話框與減少動態用。握把與標題列可以往下拉（enableDragToClose）：瀏覽器不要拿這一塊去捲動 */
.ui-sheet-grabber { width: 36px; height: 4px; margin: 0 auto; border-radius: 9999px; background: var(--ui-border-strong); flex: none; box-sizing: content-box; padding-top: 8px; background-clip: content-box; touch-action: none; }
.ui-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 12px 8px 20px; flex: none; touch-action: none; }
.ui-sheet-head > div { min-width: 0; }
.ui-sheet-title { font-size: var(--ui-title); font-weight: 700; line-height: 1.35; }
.ui-sheet-sub { margin-top: 2px; font-size: var(--ui-text-sm); color: var(--ui-muted-fg); }
.ui-sheet-head .ui-icon-btn { background: var(--ui-muted); }
.ui-sheet-body { display: grid; gap: 14px; padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.ui-sheet-foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 12px 20px calc(12px + var(--ui-safe-bottom)); border-top: 1px solid var(--ui-border); flex: none; }

/* 面板裡的單選清單：背後是原生 radio（方向鍵換選項、讀屏念「選項，第 2 個，共 4 個」都照瀏覽器） */
.ui-options { display: grid; margin: 0; padding: 0; border: 0; }
.ui-option { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: var(--ui-row); padding: 8px 4px; cursor: pointer; }
.ui-option + .ui-option { box-shadow: inset 0 1px 0 var(--ui-border); }
.ui-option:active { background: var(--ui-pressed); }
.ui-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-option:has(input:focus-visible) { outline: 2px solid var(--ui-primary); outline-offset: -2px; border-radius: var(--ui-r-control); }
.ui-option small { display: block; font-size: var(--ui-text-xs); color: var(--ui-muted-fg); }
.ui-options .ui-error { margin-top: 8px; }
.ui-radio { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ui-border-input); color: transparent; }
.ui-option input:checked ~ .ui-radio { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }
.ui-radio .ui-icon { width: 14px; height: 14px; stroke-width: 3; }

@media (min-width: 900px) {
  .ui-sheet {
    inset: 50% auto auto 50%; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    border-radius: var(--ui-r-dialog); box-shadow: var(--ui-shadow-modal);
    transform: translate(-50%, -50%);
    transition: transform var(--ui-overlay-in) var(--ui-ease-out), opacity var(--ui-overlay-in) var(--ui-ease-out), overlay var(--ui-overlay-in) allow-discrete, display var(--ui-overlay-in) allow-discrete;
  }
  .ui-sheet-wide { width: min(680px, calc(100vw - 32px)); }
  @starting-style { .ui-sheet[open] { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } }
  .ui-sheet.ui-closing { opacity: 0; transform: translate(-50%, -50%) scale(0.98); transition-duration: var(--ui-overlay-out); }
  .ui-sheet-grabber { display: none; }
  .ui-sheet-head { padding: 20px 16px 8px 24px; }
  .ui-sheet-body { padding: 4px 24px 20px; }
  .ui-sheet-foot { display: flex; justify-content: flex-end; padding: 14px 24px; }
  .ui-sheet-foot .ui-btn { min-width: 96px; }
}

/* ---------- 提示：手機在下方、桌機在右下；面板開著時放在面板裡的頂端（ui.js 的 toastRegion） ---------- */

.ui-toasts { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(16px + var(--ui-safe-bottom) + var(--ui-tabbar-space, 0px)); display: grid; justify-items: center; pointer-events: none; }
@media (min-width: 900px) { .ui-toasts { left: auto; right: 24px; bottom: calc(24px + var(--ui-tabbar-space, 0px)); } }
.ui-toast {
  display: flex; align-items: center; gap: 10px; max-width: 520px; min-height: 52px; padding: 8px 8px 8px 16px;
  border-radius: var(--ui-r-row); background: var(--ui-card); box-shadow: var(--ui-shadow-elevated), 0 0 0 0.5px rgba(34, 40, 49, 0.08);
  font-weight: 700; line-height: 1.45; pointer-events: auto;
  transition: opacity var(--ui-overlay-in) var(--ui-ease-out), transform var(--ui-overlay-in) var(--ui-ease-out);
}
.ui-toast > .ui-icon { color: var(--ui-tone-ok-dot); }
@starting-style { .ui-toast { opacity: 0; transform: translateY(8px); } }
/* 面板外面被 showModal 設成 inert：面板開著時提示放在面板裡、貼面板頂端；從上面進出（方向跟它在的位置一致） */
.ui-toasts.ui-in-sheet { position: absolute; top: 10px; right: 12px; bottom: auto; left: 12px; }
@starting-style { .ui-in-sheet .ui-toast { opacity: 0; transform: translateY(-8px); } }
.ui-in-sheet .ui-toast.ui-closing { transform: translateY(-4px); }
.ui-toast.ui-closing { opacity: 0; transform: translateY(4px); transition-duration: var(--ui-overlay-out); }
.ui-toast .ui-btn { flex: none; }

/* ---------- 換頁與分頁列（nav.js；decisions 第 51 條「C 彈」） ---------- */

/* 一疊頁：每頁一層、各自捲動，頂列黏在每頁上面。左右的拖拉歸 nav.js（左邊緣往右拖返回），上下捲動歸瀏覽器。
   全畫面用 fixed；放在別的框裡（總覽頁的手機框）由那個框改成 absolute */
.ui-stack { position: fixed; inset: 0; overflow: hidden; }
.ui-stack-page {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-bg); touch-action: pan-y;
}
.ui-stack-page > .ui-page { padding-bottom: calc(40px + var(--ui-safe-bottom) + var(--ui-tabbar-space, 0px)); }
/* 看不到的頁：visibility 藏（display:none 會讓捲動位置歸零） */
.ui-stack-page.ui-stack-off { visibility: hidden; }
.ui-stack-page.ui-stack-moving { will-change: transform; }
/* 推進來的那頁：左邊一道影子像疊在上面的紙；右邊一塊同色的實心影子，彈簧微微過頭往左時，右邊不露出下面那頁 */
.ui-stack-page.ui-stack-pushed { box-shadow: -12px 0 32px rgba(34, 40, 49, 0.12), 40px 0 0 0 var(--ui-bg); }
/* 舊的那頁往左退時蓋上去的暗面（下面那頁 1、暗面 2、上面那頁 3） */
.ui-stack-dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }

/* 浮在最下面的毛玻璃分頁列：內容從玻璃後面透出來。網頁做不到 iOS 26 液態玻璃的折射，這裡是霧面毛玻璃（模糊＋加飽和）
   加一圈細白邊與上緣的亮線。選到的那一格底下有一顆淡主色的膠囊（nav.js 用彈簧移它）。桌機放在下面中間、最寬 440px */
.ui-has-tabbar { --ui-tabbar-space: 88px; }
.ui-tabbar {
  position: fixed; z-index: 30; left: 16px; right: 16px; bottom: calc(12px + var(--ui-safe-bottom));
  display: grid; grid-template-columns: repeat(var(--ui-tab-count, 2), minmax(0, 1fr)); padding: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.6);
  /* 模糊不超過 20px：換頁時底下整頁在動，每一格都要重算（票 09 的動畫審查） */
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 0.5px rgba(34, 40, 49, 0.1),
    0 12px 32px -10px rgba(34, 40, 49, 0.28);
}
@media (min-width: 900px) { .ui-tabbar { left: 50%; right: auto; width: 440px; transform: translateX(-50%); bottom: 20px; } }
.ui-tabbar-pill {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--ui-tab-count, 2));
  border-radius: 9999px; background: var(--ui-primary-soft); box-shadow: inset 0 0 0 0.5px rgba(40, 85, 126, 0.14);
}
.ui-tab {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 0;
  border: 0; border-radius: 9999px; background: none; color: var(--ui-muted-fg);
  font: inherit; font-size: var(--ui-text-xs); font-weight: 700; line-height: 1.2; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-tab[aria-current="page"] { color: var(--ui-primary); }
.ui-tab:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }
/* 按下去圖示縮一下（按下 100ms、放開 160ms，跟按鈕一樣；按下回饋 0.95～0.98） */
.ui-tab .ui-icon { width: 24px; height: 24px; transition: transform var(--ui-press-up) var(--ui-ease-out); }
.ui-tab:active .ui-icon { transform: scale(0.95); transition-duration: var(--ui-press-down); }

/* ---------- 滑鼠才有的懸停；觸控只用按下的回饋 ---------- */

@media (hover: hover) and (pointer: fine) {
  .ui-btn-primary:hover { background: var(--ui-primary-hover); }
  .ui-btn-danger:hover { background: var(--ui-danger-hover); }
  .ui-btn-secondary:hover, .ui-btn-ghost:hover, .ui-icon-btn:hover,
  button.ui-row:hover, a.ui-row:hover, .ui-option:hover, .ui-chip-check:hover input:not(:checked) + span { background: var(--ui-hover); }
}

/* ---------- 減少動態、減少透明 ---------- */

@media (prefers-reduced-motion: reduce) {
  /* 減少動態：拿掉位移與縮放，面板與提示改成短短的淡入淡出（不是完全沒有回饋） */
  .ui-press:active, .ui-chip-check input:active + span, .ui-tab:active .ui-icon { transform: none; }
  .ui-sheet { transition: opacity 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete; }
  .ui-sheet, .ui-sheet.ui-closing, .ui-toast, .ui-in-sheet .ui-toast.ui-closing { transform: none; }
  .ui-sheet.ui-closing { opacity: 0; }
  @starting-style { .ui-sheet[open] { transform: none; opacity: 0; } .ui-toast, .ui-in-sheet .ui-toast { transform: none; } }
  @media (min-width: 900px) {
    .ui-sheet, .ui-sheet.ui-closing { transform: translate(-50%, -50%); }
    @starting-style { .ui-sheet[open] { transform: translate(-50%, -50%); } }
  }
  .ui-spinner { animation-duration: 1.6s; }
}
@media (prefers-reduced-transparency: reduce) {
  .ui-topbar, .ui-btn-secondary, .ui-tabbar { background: var(--ui-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}