/* 扛扛 KangKang — 會員中心（account.html；一頁式 app，程式在 js/account/）
   版面沿用登入頁（login.css 的 .lg__grid、.lg__mascot、.lg__fine）；顏色字體用 tokens.css，元件用 components.css 的 .key .card .field .badge .notice。
   手機優先：375px 不能左右滑；主要按鍵 44px 以上。沒有行內 style（CSP）：星星位置、動態尺寸都用 class 或 CSS 變數。 */

/* ---------- 外框與版面 ---------- */
/* 星星放在「會員中心」標題旁邊（y 用 px：頁面長短不同，用 % 會跑到內容上） */
.acc__sp1 { --x: 47%; --y: 70px; --size: 24px; }   /* 900px 以下 login.css 會把這顆固定到標題右邊 */
.acc__sp2 { --x: 64%; --y: 58px; --size: 18px; }
@media (min-width: 900px) {
  .acc__sp1 { --x: 19%; --y: 140px; --size: 28px; }
  .acc__sp2 { --x: 22%; --y: 290px; }
}
@media (min-width: 900px) {
  .acc .lg__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}
@media (min-width: 1200px) {
  .acc .lg__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
.acc__side { min-width: 0; }
.acc__main { display: grid; gap: var(--space-6); min-width: 0; align-content: start; }
.acc__loading { margin: 0; font-weight: var(--fw-bold); }
html:not(.js) .acc__loading { display: none; }
.acc-boot noscript { display: grid; gap: var(--space-4); }
.acc__noscript { margin: 0; font-weight: var(--fw-bold); }
.acc__logout { display: flex; }

/* 選單：手機、平板是標題下面 5 欄 × 2 列的固定格子；900px 以上在左欄直排 */
.acc__nav { min-width: 0; }
.acc__nav-list { display: flex; gap: 8px; padding: 2px 0 6px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.acc__nav-list::-webkit-scrollbar { display: none; }
.acc__nav-list li { flex: none; }
.acc__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--cream);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--ink);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
.acc__nav-link:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.acc__nav-link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.acc__nav-link[aria-current="page"] { background: var(--ink); color: var(--paper); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.acc__nav-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* 手機、平板（900px 以下）：10 個鍵排成 5 欄 × 2 列的固定格子，全部看得到、不會左右滑、不會被畫面邊切到
   （2026-10-01 老闆：原本一排左右滑，最左邊的鍵被切到，整排還會跟著手指飄來飄去）。字太長的（新增代採購）自動折成兩行；
   通知的紅色數字貼在格子右上角。app.js 的 navEdges／centerNav 看到沒有可以捲的寬度就什麼都不做。 */
@media (max-width: 899.98px) {
  .acc__nav-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; margin: 0; padding: 2px 0 8px; overflow: visible; }
  .acc__nav-list li { min-width: 0; }
  .acc__nav-link {
    position: relative;
    display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 52px; padding: 6px 4px;
    border-radius: 14px;
    font-size: 0.8125rem; line-height: 1.25; text-align: center;
    white-space: normal; overflow-wrap: anywhere;
  }
  .acc__nav-link .acc__nav-badge { position: absolute; top: -9px; right: -7px; margin: 0; }
}
@media (min-width: 900px) {
  .acc__nav-list { flex-direction: column; gap: 10px; margin: 0; padding: 4px 0 6px; overflow: visible; }
  .acc__nav-link { font-size: 1rem; padding: 10px 18px; }
}

/* ---------- 每一頁的外框 ---------- */
.acc-view { display: grid; gap: var(--space-5); min-width: 0; }
.acc-view__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.acc-view__titles { display: grid; gap: 4px; min-width: 0; }
.acc-view__title { margin: 0; font-size: var(--fs-h2); line-height: 1.15; overflow-wrap: anywhere; }
.acc-view__title:focus { outline: none; }
.acc-view__lead { margin: 4px 0 0; color: var(--fg-muted); max-width: 40em; }
.acc-view__actions { padding-bottom: 5px; }
.acc-view__body { display: grid; gap: var(--space-5); min-width: 0; }   /* 每一頁標題下面放內容的那一格（載入中、錯誤、資料卡都放這裡） */
.acc-card { gap: var(--space-4); }
.acc-card > * { margin: 0; }
.acc-section { display: grid; gap: var(--space-3); }
.acc-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acc-h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-black); line-height: 1.3; }
.acc-h4 { margin: 0; font-size: 1rem; font-weight: var(--fw-bold); }
.acc-list { display: grid; gap: var(--space-3); }
/* 文字連結：點擊範圍至少 44px 高（手機手指按得到）。.acc-link 用在單獨一行或一排按鍵旁邊；
   句子中間的連結用 .acc-tap（上下加透明的可按範圍、再用負的外距抵掉，不會把那一行撐高） */
.acc-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-bold); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.acc-tap { display: inline-block; padding-block: 12px; margin-block: -12px; font-weight: var(--fw-bold); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.acc-kv__with-link { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 1em; }
.acc-kv__row:has(> dd > .acc-link, > dd > .acc-kv__with-link) { align-items: center; }   /* 連結撐高那一列時，左邊的標題跟著置中對齊 */
/* 長得像連結的按鈕（登出這種次要動作） */
.acc-textbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--ink); font: inherit; font-weight: var(--fw-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: pointer; }
.acc-textbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.acc-textbtn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.acc-firstout { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0; color: var(--fg-muted); font-size: var(--fs-small); }
.acc-opt { font-weight: var(--fw-regular); color: var(--fg-muted); font-size: 0.875em; }
.acc-status { margin: 0; font-weight: var(--fw-bold); }
.acc-status:empty { display: none; }
.acc-loading { margin: 0; font-weight: var(--fw-bold); color: var(--fg-muted); }
.acc-notice { margin: 0; }
.acc-notice p { margin: 0; }
.acc-notice--error::before { background: var(--red); }
.acc-notice .key { margin-top: 8px; }
.acc-empty { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-5) var(--space-4); border: var(--border-w) dashed var(--ink); border-radius: var(--radius-field); background: var(--paper); }
.acc-empty p { margin: 0; font-weight: var(--fw-medium); }
.acc-empty--inline { padding: var(--space-4); }
.acc-empty__mascot { --size: 110px; }
.acc-pager { justify-content: center; }
.acc-filter { margin-bottom: 4px; }

/* 小表（dl） */
.acc-kv { display: grid; gap: 8px; margin: 0; }
.acc-kv__row { display: grid; grid-template-columns: minmax(6.5em, 30%) minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.acc-kv dt { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--fg-muted); line-height: 1.6; }
.acc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }

/* 扛仔小圖（ui.mascot）；大小用 --size */
/* 扛仔放在正方形的框裡（寬的圖如「扛著走」不會變得太扁小）；--size 由 ui.mascot() 設 */
.acc-mascot { display: grid; place-items: center; width: var(--size, 96px); height: var(--size, 96px); flex: none; }
.acc-mascot img { width: 100%; height: 100%; object-fit: contain; }
.acc-dot { display: inline-block; width: 14px; height: 14px; border: var(--border-w) solid var(--ink); border-radius: 50%; background: var(--oat); }

/* 狀態標籤：等客人動作的用朱紅外框＋紅點（朱紅底上放小字不夠對比，所以不用紅底） */
.badge--red { background: var(--paper); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.badge--red::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- 登入畫面 ---------- */
.acc-login { gap: var(--space-4); }
.acc-login p { margin: 0; }

/* ---------- 首頁 ---------- */
.acc-who { flex-direction: row; align-items: center; gap: 16px; }
.acc-who__avatar { --size: 72px; box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 3px var(--ink); }
.acc-who__text { min-width: 0; display: grid; gap: 2px; }
.acc-who__text p { margin: 0; }
.acc-who__name { font-weight: var(--fw-black); font-size: 1.125rem; overflow-wrap: anywhere; }
.acc-who__no { font-weight: var(--fw-bold); }
.acc-quick { padding-bottom: 5px; }
.acc-home { display: grid; gap: var(--space-6); }
.acc-todos { display: grid; gap: var(--space-3); }
.acc-todo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; }
.acc-todo__main { flex: 1 1 14em; min-width: 0; display: grid; gap: 2px; }
.acc-todo__main p { margin: 0; }
.acc-todo__t { font-weight: var(--fw-black); }
.acc-todo__d { font-size: var(--fs-small); color: var(--fg-muted); }
.acc-todo__num { font-weight: var(--fw-bold); }
.acc-todo .key { flex: none; }

/* 訂單卡（列表、首頁） */
.acc-order { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.acc-order:hover { transform: translate(-2px, -3px); box-shadow: 8px 9px 0 var(--ink); }
.acc-order:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.acc-order__mascot { --size: 56px; }
.acc-order .acc-dot { margin-inline: 21px; }
.acc-order__text { min-width: 0; display: grid; gap: 2px; }
.acc-order__text p { margin: 0; }
.acc-order__no { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: var(--fw-bold); }
.acc-order__next { font-weight: var(--fw-medium); font-size: 0.9375rem; line-height: 1.5; }
.acc-order__next .muted { font-size: var(--fs-small); }
.acc-order__meta { font-size: var(--fs-small); }

/* 通知（首頁最近 5 則、#/notices 通知頁、訂單頁「我們通知過你的」共用 views/notices.js 的 notifCard） */
.acc-notif { gap: 8px; padding: 14px 16px; }
.acc-notif__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: var(--fs-small); }
.acc-notif__event { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.9375rem; }
.acc-notif__new { min-height: 1.5em; font-size: 0.75rem; }
.acc-notif.is-new { border-left-width: 6px; border-left-color: var(--red); }   /* 新通知：左邊一條粗的朱紅 */
.acc-notif__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.7; }
.acc-notif__body.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* 「展開全文」與「看訂單」連結沿用 .acc-textbtn／.acc-link 的 44px 點擊範圍（第四輪審查修正：原本 36、40px）；用負的外距抵掉多出來的高度，卡片不會變鬆 */
.acc-notif__more { justify-self: start; align-self: flex-start; margin-block: -6px; font-size: var(--fs-small); }
.acc-notif__links { display: flex; flex-wrap: wrap; column-gap: 18px; margin-block: -8px -6px; }
.acc-notif__links .acc-link { font-size: 0.9375rem; }
.acc-notif time { white-space: nowrap; }
/* 選單「通知」旁邊的新通知數字 */
.acc__nav-badge { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: 6px; padding: 0 5px; background: var(--red); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 800; line-height: 1; }
.acc__nav-link[aria-current="page"] .acc__nav-badge { border-color: var(--paper); }

/* 合計 0 元的請款單：「已用回饋折抵，不用付款」 */
.acc-zero { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 1.8em; background: var(--oat-soft); border: 2px solid var(--ink); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.4; }
.acc-zero::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.acc-zero--big { justify-self: start; margin-top: 4px; font-size: 1rem; padding: 4px 14px; }

/* ---------- 訂單明細 ---------- */
.acc-order-head { gap: var(--space-4); }
.acc-order-head__top { display: flex; align-items: center; gap: 14px; }
.acc-order-head__top > .acc-dot { margin-inline: 25px; }
.acc-order-head__text { display: grid; gap: 6px; min-width: 0; }
.acc-order-head__next { margin: 0; font-weight: var(--fw-bold); line-height: 1.5; }
.acc-order-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.acc-order-actions:empty { display: none; }
.acc-order-actions { padding-bottom: 5px; }
.acc-inv { gap: 4px; padding: 14px 16px; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.acc-inv:hover { transform: translate(-2px, -3px); box-shadow: 8px 9px 0 var(--ink); }
.acc-inv p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.acc-item-ro { gap: 10px; padding: 16px 18px; }
.acc-item-ro__name { display: flex; align-items: center; gap: 10px; margin: 0; overflow-wrap: anywhere; }
.acc-item-ro__seq { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; background: var(--oat); border: var(--border-w) solid var(--ink); border-radius: 50%; font-weight: 800; font-size: 0.875rem; }

/* 包裹卡與時間軸 */
.acc-parcel { gap: var(--space-4); }
.acc-parcel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.acc-parcel__no, .acc-address__line { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.acc-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 0; }
.acc-step::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: 0.25; }
.acc-step:first-child::before { top: 50%; }
.acc-step:last-child::before { bottom: 50%; }
.acc-step__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; min-height: 28px; }
.acc-step__mascot { --size: 40px; background: var(--card-bg, var(--paper)); border-radius: 50%; }
.acc-step.is-current .acc-step__mascot { --size: 56px; }
.acc-step__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.acc-step__label { font-weight: var(--fw-bold); }
.acc-step__at { font-size: var(--fs-tiny); color: var(--fg-muted); }
/* 還沒走到的步驟：字用次要文字色（暖白上 6.1:1，夠讀），小圓點改成灰色虛線空心；不要整列半透明（字會淡到 3:1 左右） */
.acc-step.is-todo .acc-step__label { color: var(--fg-muted); font-weight: var(--fw-medium); }
.acc-step.is-todo .acc-dot { background: var(--paper); border-color: var(--fg-muted); border-style: dashed; }
.acc-step.is-done .acc-dot { background: var(--red); }
.acc-step.is-current .acc-step__label { font-weight: var(--fw-black); font-size: 1.0625rem; }
.acc-step.is-current .acc-dot { background: var(--red); box-shadow: 0 0 0 4px var(--oat); }
.acc-step.is-exception .acc-step__label { color: var(--ink); }
.acc-step[aria-current="step"] .acc-step__mark::after { content: ""; position: absolute; inset: -4px; border: var(--border-w) solid var(--red); border-radius: 50%; }
@media (min-width: 600px) {
  .acc-steps { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px 0; padding-top: 4px; }
  .acc-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 6px; padding: 0 2px; }
  .acc-step::before { left: 0; right: 0; top: 24px; bottom: auto; width: auto; height: 2px; }
  .acc-step:first-child::before { top: 24px; left: 50%; }
  .acc-step:last-child::before { bottom: auto; right: 50%; }
  .acc-step__mark { width: 100%; min-height: 48px; }
  .acc-step__text { flex-direction: column; align-items: center; gap: 0; }
}

/* 照片影片 */
.acc-media { display: grid; gap: var(--space-3); }
.acc-media__group { display: grid; gap: 8px; }
.acc-media__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.acc-media__thumb { display: block; padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in; }
.acc-media__thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.acc-media__img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border: var(--border-w) solid var(--ink); border-radius: 12px; background: var(--oat-soft); }
.acc-media__video { grid-column: 1 / -1; width: 100%; max-height: 60vh; border: var(--border-w) solid var(--ink); border-radius: 12px; background: var(--ink); }
.acc-media__big { width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 12px; }

/* 紀錄列（狀態紀錄、付款紀錄、回饋紀錄） */
.acc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acc-log__row { display: grid; grid-template-columns: minmax(7em, auto) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 0; border-bottom: 2px dashed var(--ink); }
.acc-log__row:last-child { border-bottom: 0; }
.acc-log__at { font-size: var(--fs-small); color: var(--fg-muted); white-space: nowrap; }
.acc-log__label { min-width: 0; overflow-wrap: anywhere; }
.acc-log__label small { color: var(--fg-muted); }
.acc-log__reason { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--fg-muted); overflow-wrap: anywhere; }   /* 給客人看的退回、取消原因 */
@media (max-width: 420px) { .acc-log__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 請款單 ---------- */
.acc-inv-head { gap: var(--space-4); }
.acc-inv-lines { margin: 0; }
.acc-inv-lines .receipt__row { align-items: baseline; padding: 10px 2px; }
.acc-inv-lines dt { font-weight: var(--fw-bold); line-height: 1.45; min-width: 0; }
.acc-inv-lines dt .badge { margin-left: 6px; font-size: 0.6875rem; min-height: 1.5em; padding: 0 7px; }
.acc-inv-lines dt small { display: block; margin-top: 3px; font-size: var(--fs-tiny); font-weight: var(--fw-regular); line-height: 1.55; color: var(--fg-muted); overflow-wrap: anywhere; }
.acc-inv-lines dd { margin: 0; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.acc-inv-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 2px 0; border-top: var(--border-w) solid var(--ink); font-weight: var(--fw-black); }
.acc-inv-total b { font-size: 1.25rem; }
.acc-bank { gap: 4px; padding: 14px 16px; }
.acc-bank p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acc-act { gap: var(--space-3); }
.acc-act p { margin: 0; }
.acc-inv-jump { padding-bottom: 5px; }
.acc-banks { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
.acc-banks:focus { outline: none; }
.acc-banks:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 8px; }

/* ---------- 表單 ---------- */
/* 輸入框的焦點框用炭黑粗框，和「填錯了」的朱紅框分開（components.css 兩個都是朱紅；第一次登入姓名欄自動取得焦點時會像填錯） */
.page-account .input:focus, .page-account .select:focus, .page-account .textarea:focus,
.page-account .input:focus-visible, .page-account .select:focus-visible, .page-account .textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* 數字欄位拿掉瀏覽器的上下箭頭（375 寬時會壓到數字；手機本來就用 inputmode 跳數字鍵盤），和員工後台 admin-ops.css 一樣 */
.page-account input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.page-account input[type="number"]::-webkit-inner-spin-button, .page-account input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 勾選框停用（條款還沒載入）：看得出不能按 */
.page-account .check input:disabled { opacity: 0.45; cursor: not-allowed; }
.page-account .check:has(input:disabled) { cursor: not-allowed; color: var(--fg-muted); }
.acc-agree-note { margin: 0; }
.acc-agree-note[hidden] { display: none; }
.acc-form { display: grid; gap: var(--space-4); }
.acc-form > .field { min-width: 0; }
.acc-form .key[type="submit"] { justify-self: stretch; }
.acc-orderform { gap: var(--space-5); }
/* 表單的步驟標題（和包裹時間軸的 .acc-step 不同） */
.acc-fstep { display: grid; gap: var(--space-2); }
.acc-fstep__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.acc-fstep__no { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; font-size: 0.85em; font-weight: 800; line-height: 1; color: var(--ink); background: var(--red); border: var(--border-w) solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--ink); rotate: -6deg; }
.acc-item { gap: var(--space-4); container-type: inline-size; }
.acc-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acc-item__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-black); }
.acc-item__grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-span-all { grid-column: 1 / -1; }
.acc-span-2 { grid-column: span 2; }
@container (min-width: 540px) { .acc-item__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
@container (max-width: 539.98px) { .acc-item__qty, .acc-item__dom { grid-column: 1 / -1; } }   /* 手機：數量、國內運費各占一整列 */
.acc-item__size { margin: 0; padding: 8px 14px; background: var(--paper); border: var(--border-w) dashed var(--ink); border-radius: var(--radius-field); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.55; }
.acc-options { gap: var(--space-4); container-type: inline-size; }
.acc-options .segmented label > span { padding-inline: 12px; white-space: nowrap; }
.acc-addr { gap: 8px; }
.acc-addr-line { margin: 0; }
.acc-agree { gap: 8px; }
.acc-agree .check { align-items: flex-start; }
.acc-agree .check input { margin-top: 10px; }
.acc-checks { display: grid; gap: 6px; }
.acc-checks .check { align-items: flex-start; }
.acc-checks .check input { margin-top: 9px; }
.acc-checks .check small { display: block; }
.segmented .field__error { margin-top: 4px; }
/* 預約送貨：和第二期收費方式對不上的選項不能選（整合者 2026-10-02） */
.page-account .segmented input:disabled { cursor: not-allowed; }
.page-account .segmented input:disabled + span { border-style: dashed; box-shadow: none; color: var(--fg-muted); background: transparent; text-decoration: line-through; }
.page-account .segmented label:hover > input:disabled + span { transform: none; box-shadow: none; }
.acc-form .notice[hidden] { display: none; }

/* 估價單（照抄試算頁的 .q-receipt，class 改成 acc-est-*） */
.acc-est { padding: 0; gap: 0; container-type: inline-size; }
.acc-est__head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 14px; background: var(--red); border-bottom: var(--border-w) solid var(--ink); border-radius: calc(var(--radius-card) - var(--border-w)) calc(var(--radius-card) - var(--border-w)) 0 0; }
.acc-est__title { margin: 0; font-size: 1.3125rem; line-height: 1.1; font-weight: var(--fw-black); color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: 0.04em; }
.acc-est__body { display: flex; flex-direction: column; gap: var(--space-4); padding: 20px; }
.acc-est__body > * { margin: 0; }
.acc-est__total { display: grid; gap: 2px; }
.acc-est__total > * { margin: 0; }
.acc-est__label { font-weight: var(--fw-black); font-size: 1.0625rem; }
.acc-est__num { font-size: clamp(2.2rem, 14cqi, 3.4rem); line-height: 1; margin: 4px 0 6px; white-space: nowrap; }
.acc-est__note { justify-self: start; padding: 4px 10px; background: var(--oat-soft); border: var(--border-w) solid var(--ink); border-radius: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.5; }
.acc-est__rate { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; }
.acc-est__rate b { display: block; }
.acc-est__rate span { display: block; font-size: var(--fs-tiny); color: var(--fg-muted); }
.acc-est__pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 359.98px) { .acc-est__pay { grid-template-columns: minmax(0, 1fr); } }
.acc-est__part { display: grid; gap: 2px; align-content: start; padding: 10px 12px; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-field); }
.acc-est__k { font-size: var(--fs-tiny); font-weight: var(--fw-bold); line-height: 1.4; color: var(--fg-muted); }
.acc-est__v { font-size: 1.25rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.acc-est__pay1 { font-weight: var(--fw-bold); }
.acc-est__lines { display: grid; gap: var(--space-4); }
.acc-est__phase { display: grid; gap: 4px; }
.acc-est__phase-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 6px 12px; background: var(--ink); color: var(--paper); border-radius: 10px; font-size: 0.9375rem; font-weight: var(--fw-black); line-height: 1.5; }
.acc-est__phase-title .num { font-weight: 800; font-size: 1.0625rem; }
.acc-est__rows { margin: 0; }
.acc-est__rows .receipt__row { align-items: baseline; padding: 10px 2px; }
.acc-est__rows .receipt__row:last-child { border-bottom: 0; }
.acc-est__rows dt { font-weight: var(--fw-bold); line-height: 1.45; min-width: 0; }
.acc-est__rows dt small { display: block; margin-top: 3px; font-size: var(--fs-tiny); font-weight: var(--fw-regular); line-height: 1.55; color: var(--fg-muted); overflow-wrap: anywhere; }
.acc-est__rows dd { margin: 0; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.acc-est__foot { padding-inline: 20px 20px; padding-bottom: 16px; }
.acc-est-panel { display: grid; gap: var(--space-3); }

/* ---------- 大阪倉收件地址、推薦碼 ---------- */
.acc-osaka { gap: var(--space-3); }
.acc-osaka__line b { font-size: 1.0625rem; }
.acc-osaka__how { white-space: pre-wrap; margin: 0; }
.acc-osaka__must { margin: 0; padding: 8px 12px; background: var(--oat-soft); border: 2px dashed var(--ink); border-radius: var(--radius-field); font-weight: var(--fw-bold); line-height: 1.6; }
.acc-osaka__kv { gap: 10px; }
.acc-osaka__row { align-items: center; }
.acc-osaka__row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.acc-osaka__val { min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-bold); }
.acc-osaka__line { font-size: 1.0625rem; }
.acc-osaka__row .key { flex: none; }
@media (max-width: 479.98px) { .acc-osaka__row { grid-template-columns: minmax(0, 1fr); } }   /* 手機：標題在上、值和複製鍵在下 */
.acc-osaka--missing h3 { font-size: 1.125rem; }
.acc-osaka-host:empty { display: none; }
.acc-code__label { font-weight: var(--fw-bold); color: var(--fg-muted); }
.acc-code__code { font-size: clamp(1.8rem, 9cqi, 2.6rem); font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; }
.acc-balance { gap: 4px; }

/* ---------- 條款 ---------- */
.acc-terms { max-height: 40vh; min-height: 160px; overflow: auto; padding: 14px 16px; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-field); font-size: 0.9375rem; line-height: 1.75; overscroll-behavior: contain; }
.acc-terms:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acc-terms--page { max-height: none; min-height: 0; overflow: visible; padding: 0; background: none; border: 0; font-size: var(--fs-body); }
.acc-terms h3 { margin: 0 0 8px; font-size: 1.25rem; }
.acc-terms h4 { margin: 18px 0 6px; font-size: 1.0625rem; font-weight: var(--fw-black); }
.acc-terms h5 { margin: 12px 0 4px; font-size: 1rem; }
.acc-terms p { margin: 0 0 8px; }
.acc-terms ol, .acc-terms ul { margin: 0 0 8px; padding-left: 1.4em; }
.acc-terms li { margin-bottom: 4px; }
.acc-terms-page { gap: var(--space-3); }

/* ---------- toast（手機底部置中、桌機右上） ---------- */
.acc-toasts { position: fixed; left: 50%; bottom: 16px; z-index: 70; display: grid; gap: 8px; width: min(420px, calc(100% - 2 * var(--gutter))); translate: -50% 0; pointer-events: none; }
.acc-toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; background: var(--paper); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); pointer-events: auto; }
.acc-toast.is-in { opacity: 1; transform: none; }
.acc-toast__text { flex: 1 1 auto; margin: 0; font-weight: var(--fw-bold); line-height: 1.45; overflow-wrap: anywhere; }
.acc-toast .key { flex: none; }
.acc-toast__x { --key-bg: var(--cream); }
@media (min-width: 900px) {
  .acc-toasts { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 12px); translate: 0; }
  .acc-toast { transform: translateY(-8px); }
}

/* ---------- 對話框 ---------- */
.acc-dialog { width: min(560px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 32px); margin: auto; padding: 0; background: var(--paper); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.acc-dialog--wide { width: min(900px, calc(100% - 2 * var(--gutter))); }
.acc-dialog::backdrop { background: rgba(32, 30, 29, 0.55); }
.acc-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: var(--border-w) solid var(--ink); background: var(--oat-soft); }
.acc-dialog__title { margin: 0; font-size: 1.125rem; font-weight: var(--fw-black); }
.acc-dialog__body { padding: 20px; overflow: auto; overscroll-behavior: contain; }
.acc-dialog__body > .stack > * { margin: 0; }
.acc-dialog__keys { padding-top: 4px; }
html.acc-dialog-open { overflow: hidden; }

/* ---------- 以客人身分檢視（#140；account.html?view_as=<會員編號>） ---------- */
/* 頁首下面一條炭黑色條＋朱紅底線；600px 以上捲動時黏在頁首下面。手機上色條會佔掉太多畫面，所以不黏，改成整個畫面外圍一圈朱紅框提醒。 */
.acc-viewas { position: relative; z-index: calc(var(--z-header) - 1); background: var(--ink); color: var(--paper); border-bottom: 6px solid var(--red); }
@media (min-width: 600px) { .acc-viewas { position: sticky; top: var(--header-h); } }
.acc-viewas__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 10px; }
.acc-viewas__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--red); color: var(--ink); border: 2px solid var(--paper); border-radius: 50%; }
.acc-viewas__icon .icon { width: 22px; height: 22px; }
.acc-viewas__text { flex: 1 1 18em; min-width: 0; display: grid; gap: 2px; }
.acc-viewas__title { margin: 0; font-weight: var(--fw-black); font-size: 1.0625rem; line-height: 1.45; color: var(--paper); }
.acc-viewas__who { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--oat); overflow-wrap: anywhere; }
.acc-viewas__who b { color: var(--paper); }
.acc-viewas .key { flex: none; --key-shadow: var(--red); }
.acc-viewas .key:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
@media (max-width: 599.98px) {
  html.acc-viewing::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-header) + 1); border: 4px solid var(--red); pointer-events: none; }
  .acc-viewas__icon { display: none; }
  .acc-viewas__title { font-size: 1rem; }
}
/* 送出鍵停用（app.js 的 lockWrites 加 is-viewlocked）：看得出不能按 */
.acc-viewing .is-viewlocked { cursor: not-allowed; }
.acc-textbtn:disabled, .acc-textbtn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.acc-viewfail { gap: var(--space-3); }

/* ---------- 列印、減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .acc-toast, .acc-order, .acc-inv, .acc__nav-link { transition: none; }
}
@media (max-width: 479.98px) {
  .acc-who__avatar { --size: 56px; }
  .acc-est__body { padding: 16px; }
  .acc-est__head { padding-inline: 16px; }
  .acc-est__foot { padding-inline: 16px; }
}

/* 以客人身分檢視（#140）：頁首的「登入」是客人的 LINE 登入，員工按了會跑到客人的登入頁 → 藏起來（色條上有「回員工後台」；第四輪審查修正） */
.acc-viewing [data-member-key] { display: none !important; }

/* 個人資料頁的「登入方式」（views/logins.js；2026-10-01）：LINE、Email 各一列，沒綁的旁邊放「綁定」鍵；
   綁 email 的兩個步驟（填 email 寄驗證碼 → 填 6 位數驗證碼）在卡片下半部，虛線隔開 */
.acc-logins { display: grid; gap: var(--space-4); }
.acc-logins__lead { margin: -8px 0 0; font-size: var(--fs-small); }
.acc-login-way { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.acc-bind { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: 2px dashed rgba(32, 30, 29, 0.35); }
.acc-bind__to { overflow-wrap: anywhere; font-weight: var(--fw-bold); }
.acc-bind__sent { margin: 0; line-height: 1.7; text-wrap: pretty; }
.acc-bind__keys { align-items: center; }
.acc-bind__row { margin: -6px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.acc-bind__code .input { max-width: 14em; font-size: 1.5rem; font-weight: var(--fw-black); letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }

/* email 打錯常見網域時的「是不是要填 …？ 改成這個」（check.js 的 emailField） */
.acc-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; color: var(--ink); font-weight: var(--fw-bold); }
.acc-suggest__text { overflow-wrap: anywhere; }
.acc-suggest .acc-textbtn { min-height: 36px; }

/* 選單的長短名字（app.js 的 NAV 第三欄）：電腦版顯示完整的「新增代採購」，手機格子顯示「代採購」 */
.acc__nav-short { display: none; }
@media (max-width: 899.98px) {
  .acc__nav-full { display: none; }
  .acc__nav-short { display: inline; }
}