/* 視覺 token 沿用 HR 招募儀表板（朵薩官網色票），讓兩座看板看起來是同一套系統 */
:root {
  --color-text-primary: #35312F;
  --color-text-primary-alt: #292523;
  --color-text-secondary: #665E58;
  --color-surface-white: #FFFFFF;
  --color-surface-cream: #F9F6F2;
  --color-surface-gray: #F3F3F3;
  --color-accent-warm-gray: #B09D8F;
  --color-accent-warm-gray-2: #BCA99B;
  --color-accent-terracotta: #A54D3A;
  --color-accent-terracotta-dark: #99412E;
  --color-accent-cta: #DD6420;
  --color-accent-sage: #C6C09C;
  --color-accent-apricot: #FFC988;
  --color-accent-blush: #F5CEC7;
  --color-sage-ink: #4F6B52;

  --font-latin-body: 'Lato', sans-serif;
  --font-latin-heading: 'Poppins', sans-serif;
  --font-zh: 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  --font-stack: var(--font-zh), var(--font-latin-body);

  --radius-base: 12px;
  --radius-lg: 16px;

  --shadow-hover: 0 4px 12px rgba(53, 49, 47, 0.12);
  --transition-hover: all 0.18s ease;

  /* 草稿狀態色：待處理／已編修／已複製／略過／需複查 */
  --status-pending: #B09D8F;
  --status-edited: #DD6420;
  --status-copied: #4F7A62;
  --status-skipped: #C9C4BF;
  --status-flagged: #A54D3A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-stack);
  background: var(--color-surface-cream);
  color: var(--color-text-primary);
}

button { font-family: inherit; }

/*
 * hidden 屬性的 UA 樣式只是 display:none，任何帶 display 的 class 選擇器都會蓋掉它
 * （.signin-gate 的 display:grid 就曾讓登入畫面在登入後仍留在頁面下方）。
 * 這條把 hidden 拉回它該有的意思，避免每加一個面板就要記得補一條 [hidden] 規則。
 */
[hidden] { display: none !important; }

/* ── 頁首 ─────────────────────────────────────────────── */
.page-header {
  padding: 1rem clamp(1rem, 3vw, 2rem);
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-surface-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header h1 {
  font-family: var(--font-latin-heading), var(--font-zh);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin: 0 0 0.5rem;
  color: var(--color-text-primary-alt);
}

/* 品牌列：logo ＋ 工具名。留著工具名是刻意的——單一個 logo 認不出這是哪一支工具，
   而這個網頁還有待固化、開發進度、設定三個分頁。 */
.brand { display: flex; align-items: center; gap: 0.65rem; }

.brand-logo {
  /* 原圖 561×197（比例 2.85），用高度定尺寸讓它跟中文字級對齊 */
  height: clamp(1.5rem, 3.2vw, 1.9rem);
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* logo 與標題之間的分隔，比直接並排更清楚兩者是不同層級 */
.brand-title {
  padding-left: 0.65rem;
  border-left: 1px solid var(--color-surface-gray);
}

@media (max-width: 480px) {
  /* 手機上橫排會擠掉日期列，改成 logo 在上、標題在下 */
  .brand { flex-wrap: wrap; gap: 0.4rem; }
  .brand-title { padding-left: 0; border-left: none; }
}

.header-side { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.date-bar { display: flex; align-items: center; gap: 0.5rem; }

.date-nav {
  width: 44px; height: 44px;
  border: 1px solid var(--color-accent-warm-gray-2);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-base);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-hover);
}
.date-nav:hover { background: var(--color-surface-cream); }

.date-display { min-width: 190px; }
.date-display strong { display: block; font-size: 1.05rem; }

.date-hint { font-size: 0.78rem; color: var(--color-text-secondary); }
/* 讀錯日期是這套流程最常見的事故，非明日一律用警示色標出來 */
.date-hint.is-warning { color: var(--color-accent-terracotta-dark); font-weight: 700; }

.date-reset {
  border: 0; background: transparent;
  color: var(--color-accent-terracotta);
  cursor: pointer; font-size: 0.82rem;
  padding: 0.5rem; min-height: 44px;
}
.date-reset[hidden] { display: none; }

.source-meta { font-size: 0.78rem; color: var(--color-text-secondary); text-align: right; }
.auth-actions { display: flex; align-items: center; gap: 0.6rem; }
.auth-status { font-size: 0.82rem; color: var(--color-accent-terracotta-dark); font-weight: 600; }

/* ── 通用按鈕 ─────────────────────────────────────────── */
.btn-primary, .btn-ghost {
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: var(--transition-hover);
  font-size: 0.88rem;
}
.btn-primary {
  border: 0;
  background: var(--color-accent-cta);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary:active { transform: none; }
.btn-primary:disabled { background: var(--color-accent-warm-gray-2); cursor: not-allowed; transform: none; }

.btn-ghost {
  border: 1px solid var(--color-accent-warm-gray-2);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
}
.btn-ghost:hover { background: var(--color-surface-cream); transform: translateY(-1px); }
.btn-ghost:active { transform: none; }

.btn-subtle {
  min-height: 44px;
  margin-top: 0.65rem;
  padding: 0.45rem 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-subtle:disabled { opacity: 0.42; cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--color-accent-cta); outline-offset: 2px; }

/* ── 特殊需求列 ───────────────────────────────────────── */
.notepad-bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem clamp(1rem, 3vw, 2rem);
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-surface-gray);
  flex-wrap: wrap;
}
.notepad-bar label { font-size: 0.85rem; color: var(--color-text-secondary); white-space: nowrap; }
.notepad-bar input {
  flex: 1; min-width: 240px;
  border: 1px solid var(--color-surface-gray);
  border-radius: 13px;
  padding: 0.6rem 0.8rem;
  font-family: inherit; font-size: 0.88rem;
}

.inline-status { font-size: 0.8rem; color: var(--color-text-secondary); }
/* 批次判讀失敗要留在畫面上（等一分鐘才失敗，toast 淡出等於沒說） */
.inline-status--error { color: var(--color-accent-terracotta-dark); font-weight: 700; }

/* ── 統計 ─────────────────────────────────────────────── */
.stats {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.8rem clamp(1rem, 3vw, 2rem) 0;
}
.stat-pill {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
}
.stat-pill b { color: var(--color-text-primary-alt); }
.stat-pill.is-alert { border-color: var(--color-accent-terracotta); color: var(--color-accent-terracotta-dark); }
.stat-pill--sent {
  background: color-mix(in srgb, var(--color-accent-sage) 34%, white);
  border-color: var(--color-accent-sage);
}

/* ── 雙欄工作區 ───────────────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem) 3rem;
  align-items: start;
}

.list-pane {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  position: sticky;
  top: 1rem;
}

.draft-list { display: flex; flex-direction: column; gap: 0.3rem; }

.list-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-base);
  padding: 0.6rem 0.7rem;
  min-height: 44px;
  cursor: pointer;
  transition: var(--transition-hover);
}
.list-item:hover { background: var(--color-surface-cream); transform: translateY(-1px); }
.list-item:active { transform: none; }
.list-item.is-active {
  background: var(--color-surface-cream);
  border-color: var(--color-accent-warm-gray);
}
.list-item.is-sent {
  background: color-mix(in srgb, var(--color-accent-sage) 28%, white);
  border-color: color-mix(in srgb, var(--color-accent-sage) 72%, white);
}
.list-item.is-sent.is-active {
  background: color-mix(in srgb, var(--color-accent-sage) 42%, white);
  border-color: var(--color-sage-ink);
}
.list-item.is-skipped { background: var(--color-surface-gray); border-color: transparent; }
.list-item.is-skipped .list-name { color: var(--color-text-secondary); text-decoration: line-through; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-pending); }
.status-dot.pending { background: var(--status-pending); }
.status-dot.edited { background: var(--status-edited); }
.status-dot.copied { background: var(--status-copied); }
.status-dot.skipped { background: var(--status-skipped); }

.list-body { min-width: 0; }
.list-name {
  font-size: 0.88rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-meta { font-size: 0.75rem; color: var(--color-text-secondary); }
.list-flag { color: var(--status-flagged); font-size: 0.75rem; font-weight: 700; }
.status-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  margin: 0.28rem 0.28rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
}
.status-tag--sent { background: var(--color-accent-sage); color: #33483A; }
.status-tag--line { background: var(--color-accent-apricot); color: #69461F; }
.status-tag--gm { background: var(--color-accent-blush); color: var(--color-accent-terracotta-dark); }
.status-tag--birthday { background: var(--color-accent-apricot); color: var(--color-accent-terracotta-dark); }

/* ── 主條卡片 ─────────────────────────────────────────── */
.card-pane { min-width: 0; }

.card, .card-empty {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: 0 10px 26px rgba(92, 68, 58, .08);
}
.card-empty { color: var(--color-text-secondary); text-align: center; padding: 3rem 1rem; }
.card.is-sent {
  border-color: var(--color-accent-sage);
  box-shadow: inset 5px 0 0 var(--color-accent-sage), 0 10px 26px rgba(92, 68, 58, .08);
}

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 1.15rem; color: var(--color-text-primary-alt); }
.card-title-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.card-nav { display: flex; align-items: center; gap: 0.55rem; }
.card-nav span { color: var(--color-text-secondary); font-size: 0.8rem; white-space: nowrap; }
.card-facts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.7rem 0 0; }
.fact {
  background: var(--color-surface-cream);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}
.fact span { color: var(--color-text-secondary); }

.banner {
  border-radius: var(--radius-base);
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  border: 1px solid;
}
.banner.warn { background: #FDF3EE; border-color: var(--color-accent-terracotta); color: var(--color-accent-terracotta-dark); }
.banner.info { background: var(--color-surface-cream); border-color: var(--color-accent-warm-gray-2); color: var(--color-text-secondary); }
.banner ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

.card-message { margin-top: 1rem; }
.card-message label { display: block; font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 0.35rem; }
.card-message textarea {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.9rem;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.75;
  resize: vertical;
}

/* 編修理由：跟訊息本文同寬，視覺上是同一組輸入而不是附屬的小欄位 */
.card-note { margin-top: 0.9rem; }
.card-note label { display: block; font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 0.35rem; }
.card-note input {
  width: 100%;
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.92rem;
  min-height: 44px;
}
.card-note input::placeholder { color: var(--color-accent-warm-gray); }

.card-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; }
.notice-toggle.is-active {
  background: var(--color-accent-apricot);
  border-color: var(--color-accent-apricot);
  color: #69461F;
  font-weight: 700;
}
.notice-toggle.is-active:hover { background: #FFC276; }
.checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.83rem; min-height: 44px; cursor: pointer; }
.checkbox--persistent {
  border: 1px solid var(--color-accent-warm-gray-2);
  border-radius: 999px;
  padding: 0 0.75rem;
}
.checkbox--persistent small {
  color: var(--color-accent-terracotta-dark);
  font-size: 0.68rem;
}

.card-raw { margin-top: 1rem; font-size: 0.82rem; color: var(--color-text-secondary); }
.card-raw summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.card-raw dl { margin: 0.3rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; }
.card-raw dt { color: var(--color-text-primary); font-weight: 600; }
.card-raw dd { margin: 0; word-break: break-word; }

/* ── 引導頁 / 登入閘 ──────────────────────────────────── */
.onboarding { padding: 2rem clamp(1rem, 3vw, 2rem); }
.onboarding-inner { max-width: 900px; margin: 0 auto; }
.onboarding h2 { font-size: 1.15rem; color: var(--color-text-primary-alt); }
.onboarding-sub { color: var(--color-text-secondary); font-size: 0.9rem; }
.onboarding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.onboarding-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: 0 8px 20px rgba(92, 68, 58, .07);
}
.onboarding-card h3 { margin: 0 0 0.5rem; font-size: 0.98rem; }
.onboarding-card p { font-size: 0.86rem; line-height: 1.7; margin: 0 0 0.6rem; }
.onboarding-card textarea {
  width: 100%;
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.6rem;
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
  margin-bottom: 0.6rem;
}
.muted { color: var(--color-text-secondary); }
code { background: var(--color-surface-gray); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

/* ── LINE 登入（主線）＋四碼登入（過渡期 fallback） ────────────── */
.signin-gate { display: grid; place-items: center; padding: 3rem 1rem; }
.signin-inner { text-align: center; max-width: 340px; }
.signin-inner h2 { font-size: 1.1rem; }
.signin-logo { display: block; margin: 0 auto 1rem; width: 140px; height: auto; }
.signin-status { color: var(--color-text-secondary); font-size: 0.85rem; margin-top: 0.8rem; min-height: 1.2em; }
.signin-error { color: var(--color-accent-terracotta-dark); font-size: 0.85rem; margin-top: 1rem; }
#line-login-btn { margin-top: 1.4rem; width: 100%; }

/* ── 邀請碼綁定面板 ───────────────────────────────────── */
.invite-panel { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--color-surface-gray); text-align: left; }
.invite-panel .muted { font-size: 0.82rem; }
.invite-preview {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface-cream);
  border-radius: var(--radius-base);
  font-size: 0.85rem;
  color: var(--color-text-primary);
}
.invite-form { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.invite-form input {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--color-accent-warm-gray-2);
  border-radius: var(--radius-base);
  padding: 0.55rem 0.7rem;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-surface-white);
}
.invite-form .btn-primary { min-width: 5.5rem; }
#invite-status { display: block; margin-top: 0.5rem; font-size: 0.82rem; }

/* ── 四碼登入 fallback：折疊區塊，改用 <details> ───────── */
.pin-fallback { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--color-surface-gray); text-align: left; }
.pin-fallback summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 0.4rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-fallback[open] summary { color: var(--color-text-primary); }

.pin-display { display: flex; justify-content: center; gap: 0.9rem; margin: 1.6rem 0 1.4rem; }
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 1.5px solid var(--color-accent-warm-gray-2);
  background: transparent;
  transition: var(--transition-hover);
}
.pin-dot.is-filled { background: var(--color-accent-cta); border-color: var(--color-accent-cta); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.keypad button {
  min-height: 62px;
  font-size: 1.35rem;
  font-family: var(--font-latin-body);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent-warm-gray-2);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-hover);
}
.keypad button:hover { background: var(--color-surface-cream); transform: translateY(-1px); }
.keypad button:active { transform: scale(0.97); background: var(--color-surface-gray); }
.keypad button.key-alt { font-size: 0.9rem; color: var(--color-text-secondary); }
/* 送出中就別再收輸入，免得手快多按一顆變成下一次登入的第一碼 */
.keypad.is-busy { pointer-events: none; opacity: 0.55; }

/* ── 設定面板 ─────────────────────────────────────────── */
.setup { padding: 1.2rem 1.4rem 2rem; }
.setup-inner {
  max-width: 720px; margin: 0 auto;
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
}
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setup-head h2 { font-size: 1.05rem; }
.setup-block { margin-top: 1.6rem; }
.setup-block h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.setup-block .muted { font-size: 0.82rem; margin-top: 0.5rem; }
.setup-steps { padding-left: 1.2rem; font-size: 0.87rem; line-height: 1.85; }

.bookmarklet-slot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 1rem 0 0.2rem; }
.bookmarklet-link {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  min-height: 44px;
  background: var(--color-accent-cta);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: grab;
}
.bookmarklet-link:active { cursor: grabbing; }
.bookmarklet-base { font-size: 0.78rem; }

/* ── 使用者管理（LINE 綁定＋邀請）──────────────────────── */
.users-list { margin: 0.8rem 0; }
.user-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-surface-gray);
  font-size: 0.87rem;
}
.user-row.is-inactive { opacity: 0.5; }
.user-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.user-code { font-family: ui-monospace, monospace; font-weight: 700; }
.user-name { font-weight: 600; }
.user-role { color: var(--color-text-secondary); font-size: 0.8rem; }
.user-bind-status { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; }
.user-bound { color: var(--color-accent-sage-dark, var(--color-text-secondary)); }
.user-unbound { color: var(--color-accent-terracotta-dark); }
.user-invite-info { color: var(--color-text-secondary); }
.user-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.user-actions button { padding: 0.35rem 0.8rem; min-height: 36px; font-size: 0.8rem; }

.invite-issue-form, .invite-result {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--color-surface-cream);
  border-radius: var(--radius-base);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
}
.invite-allow-rebind { display: flex; align-items: center; gap: 0.4rem; }
.invite-result-code {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}
.invite-result-link {
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  word-break: break-all;
  flex-basis: 100%;
}
.invite-result-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.user-add { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.user-add input, .user-add select {
  border: 1px solid var(--color-accent-warm-gray-2);
  border-radius: var(--radius-base);
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.87rem;
  background: var(--color-surface-white);
}
.user-add #new-name { flex: 1; min-width: 8rem; }

/* ── 開發進度分頁（項目 1／2）────────────────────────── */
.devplan {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--color-surface-cream);
  z-index: 40;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
}
.devplan-inner { max-width: 820px; margin: 0 auto; }
.devplan-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.devplan-head h2 { font-size: 1.15rem; color: var(--color-text-primary-alt); margin: 0; }

/* build-stamp 對帳條 */
.dp-build {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem;
  border: 1px solid; border-radius: var(--radius-base);
  padding: 0.7rem 0.9rem; font-size: 0.85rem; margin-bottom: 1.2rem;
}
.dp-build--ok { background: #EEF4F0; border-color: var(--status-copied); color: var(--status-copied); }
.dp-build--info { background: var(--color-surface-white); border-color: var(--color-accent-warm-gray-2); color: var(--color-text-secondary); }
.dp-build--warn { background: #FDF3EE; border-color: var(--color-accent-terracotta); color: var(--color-accent-terracotta-dark); }
.dp-build-meta { font-size: 0.76rem; color: var(--color-text-secondary); font-family: ui-monospace, monospace; }

.dp-section-title { font-size: 1rem; margin: 1.6rem 0 0.8rem; color: var(--color-text-primary-alt); }

/* 時間軸（里程碑與版本共用）：六角節點＋逐段連接線。
   連接線不畫在 <ol> 上，而是每個節點自己畫一段：從自己的中心（距項目頂端 17px）
   往下延伸「一整個項目高度」，剛好接到下一個節點的中心。這樣每一段線都明確屬於
   「節點 N → 節點 N+1」，里程碑的已完成／未完成轉色點必定落在節點之間，
   不需假設每筆等高，也不需用百分比估算。 */
/* 浮動幅度用「可過渡的自訂屬性」控制，而不是靠 hover 開關 animation。
   理由：animation 被移除時 transform 會直接跳回原值，transition 攔不到，離開 hover 會「閃歸」。
   改成幅度 0 ↔ 滿幅之間漸變後，離開時幅度緩慢收斂到 0，動畫自然停在原位。
   需要 @property 註冊型別，瀏覽器才知道怎麼內插這兩個值。 */
@property --dp-lift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --dp-grow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.dp-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.dp-node {
  position: relative; padding: 0 0 1.1rem 2.6rem;
  --dp-lift: 0px; /* 卡片浮動幅度 */
  --dp-grow: 0;   /* 節點脈動幅度 */
  transition: --dp-lift 0.55s ease, --dp-grow 0.55s ease;
}
.dp-node::before {
  content: ""; position: absolute; left: 14px; top: 17px;
  width: 2px; height: 100%; background: var(--color-surface-gray);
}
.dp-node:last-child::before { display: none; }
/* 里程碑由最終目標往回推，已完成的在最底部，所以綠色段由 renderDevPlan() 依「下面那個節點
   完成了沒」標記（dp-node--seg-done），而不是節點自己的狀態。 */
.dp-node--seg-done::before { background: var(--status-copied); }

/* 六角節點：外層 cream 六角遮住穿過來的連接線、並兼作 hover 光環；內層才是狀態色塊。
   注意 clip-path 會把 box-shadow 一起裁掉，所以光環只能靠外層自己變色，不能加陰影。 */
.dp-hex {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 34px;
  display: grid; place-items: center;
  background: var(--color-surface-cream);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* 與浮動幅度同步的 0.55s，離開 hover 時光環才不會比卡片先收掉 */
  transition: background-color 0.55s ease;
}
.dp-hex-face {
  width: 24px; height: 27px;
  display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-family: var(--font-latin-heading), var(--font-zh);
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  background: var(--color-accent-warm-gray);
  color: var(--color-surface-white);
  transition: transform 0.55s ease;
}
.dp-node--done .dp-hex-face { background: var(--status-copied); }
.dp-node--todo .dp-hex-face { background: var(--color-accent-warm-gray-2); }
.dp-node--released .dp-hex-face { background: var(--color-accent-warm-gray); }
.dp-node--current .dp-hex-face { background: var(--color-accent-cta); }

.dp-node-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.8rem 1rem;
  box-shadow: 0 4px 12px rgba(92, 68, 58, .05);
  transition: box-shadow 0.55s ease;
}
.dp-node--current .dp-node-card { border-color: var(--color-accent-cta); }

/* hover：卡片緩慢上下浮（呼吸感）、節點同步輕微脈動並亮出光環。
   只動 transform 與陰影，不動尺寸與邊距，所以整段動畫期間都是零 layout shift。
   兩組 keyframes 同週期（2.6s），卡片與節點才會一起呼吸而不是各浮各的。
   幅度來自 --dp-lift／--dp-grow：兩者為 0 時 keyframes 算出來就是原位，
   所以動畫可以常駐掛著，靠幅度漸變來進場與歸位。 */
@keyframes dp-float {
  0%, 100% { transform: translateY(calc(var(--dp-lift) * 0.2)); }
  50% { transform: translateY(var(--dp-lift)); }
}
@keyframes dp-breathe {
  0%, 100% { transform: scale(calc(1 + var(--dp-grow) * 0.5)); }
  50% { transform: scale(calc(1 + var(--dp-grow) * 1.5)); }
}
/* 沒 hover 時暫停，不佔用每幀的合成成本；幅度歸零已足以讓它停回原位 */
.dp-node-card { animation: dp-float 2.6s ease-in-out infinite paused; }
.dp-hex-face { animation: dp-breathe 2.6s ease-in-out infinite paused; }
.dp-node:hover .dp-node-card,
.dp-node:hover .dp-hex-face { animation-play-state: running; }

.dp-node:hover { --dp-lift: -5px; --dp-grow: 0.08; }
.dp-node:hover .dp-node-card { box-shadow: var(--shadow-hover); }
.dp-node:hover .dp-hex {
  background: var(--color-accent-warm-gray-2);
  background: color-mix(in srgb, var(--color-accent-warm-gray) 40%, var(--color-surface-cream));
}
/* 觸控裝置沒有真正的 hover，浮動只會在點下去時閃一下，直接關掉 */
@media (hover: none) {
  .dp-node:hover { --dp-lift: 0px; --dp-grow: 0; }
  .dp-node:hover .dp-node-card, .dp-node:hover .dp-hex-face { animation-play-state: paused; }
}
/* 會暈眩的使用者：不浮動，改回一次到位的靜態微浮，回饋仍在 */
@media (prefers-reduced-motion: reduce) {
  .dp-node, .dp-node-card, .dp-hex, .dp-hex-face { transition-duration: 0.01ms; }
  .dp-node-card, .dp-hex-face { animation: none; }
  .dp-node:hover .dp-node-card { transform: translateY(-2px); }
  .dp-node:hover .dp-hex-face { transform: scale(1.08); }
}

.dp-node-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dp-ver { font-weight: 700; font-family: var(--font-latin-heading), var(--font-zh); color: var(--color-text-primary-alt); }
.dp-commit { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--color-text-secondary); }
.dp-date { font-size: 0.76rem; color: var(--color-text-secondary); }
.dp-badge { font-size: 0.72rem; background: var(--color-accent-cta); color: #fff; padding: 0.1rem 0.5rem; border-radius: 999px; }
.dp-node-title { font-size: 0.9rem; font-weight: 600; margin: 0.35rem 0 0.3rem; }
.dp-highlights { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.7; color: var(--color-text-secondary); }

/* 里程碑卡片內容（外框與節點共用上面的 .dp-node-card；狀態改由六角節點表達，不再加左色條） */
.dp-ms-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dp-ms-phase { font-weight: 700; font-size: 0.82rem; color: var(--color-text-primary-alt); }
.dp-ms-status { font-size: 0.74rem; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.dp-node--done .dp-ms-status { background: #EEF4F0; color: var(--status-copied); }
.dp-node--todo .dp-ms-status { background: var(--color-surface-gray); color: var(--color-text-secondary); }
.dp-ms-title { font-size: 0.92rem; font-weight: 600; margin: 0.4rem 0 0.3rem; }
.dp-ms-items { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.7; color: var(--color-text-secondary); }

/* ── Toast ────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--color-text-primary-alt);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 50;
  box-shadow: var(--shadow-hover);
}

/* ── 手機：收合成單欄（清單 → 卡片 → 返回）───────────── */
@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; }
  .list-pane { position: static; max-height: none; }
  /* 選了貴賓後，清單讓位給卡片，避免在小螢幕上兩者互相擠壓 */
  body.is-card-open .list-pane { display: none; }
  body:not(.is-card-open) .card-pane { display: none; }
  .card-back { display: inline-flex !important; }
  .header-side { width: 100%; justify-content: space-between; }
  .source-meta { text-align: left; }
}

.card-back { display: none; }

@media (hover: none) {
  .btn-primary:hover, .btn-ghost:hover, .list-item:hover, .date-nav:hover,
  .keypad button:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── 作業分頁列 ────────────────────────────────────────────────────────────── */
.view-tabs {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.9rem clamp(1rem, 3vw, 2rem) 0;
}
/* 沿用 .btn-ghost 的語彙（同色票、同圓角、同 transition），選中態才需要額外規則 */
.view-tab {
  border: 1px solid var(--color-accent-warm-gray-2);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-hover);
}
.view-tab:hover { background: var(--color-surface-cream); transform: translateY(-1px); }
.view-tab:active { transform: none; }
.view-tab.is-active {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: #fff;
}

/* ── 抽卡 ───────────────────────────────────────────────────────────────────── */
.card-pull-body {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2rem) 3rem;
}
.card-pull-summary {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 20px rgba(92, 68, 58, .07);
}
.card-pull-summary-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.card-pull-eyebrow {
  margin: 0 0 0.2rem;
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  letter-spacing: .08em;
}
.card-pull-summary h2 { margin: 0; font-size: 1.25rem; }
.card-pull-stats { display: flex; align-items: stretch; gap: 0.55rem; }
.card-pull-stat {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 88px;
  border-radius: var(--radius-base);
  background: var(--color-surface-cream);
  padding: 0.55rem 0.75rem;
}
.card-pull-stat small { color: var(--color-text-secondary); font-size: 0.74rem; }
.card-pull-stat b { font-size: 1.1rem; color: var(--color-text-primary-alt); }
.card-pull-stat--done { background: color-mix(in srgb, var(--color-accent-sage) 34%, white); }
.card-pull-progress {
  height: 8px;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-gray);
}
.card-pull-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-sage-ink);
  transition: width .18s ease;
}
.card-pull-status { min-height: 1.4rem; padding: 0.55rem 0.2rem 0; }
.card-pull-groups { display: flex; flex-direction: column; gap: 1rem; }
.card-pull-group {
  overflow: hidden;
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(92, 68, 58, .07);
}
.card-pull-group.is-warning { border-color: var(--color-accent-apricot); }
.card-pull-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.65rem 1rem;
  background: var(--color-surface-cream);
  border-bottom: 1px solid var(--color-surface-gray);
}
.card-pull-group.is-warning .card-pull-group-head {
  background: color-mix(in srgb, var(--color-accent-apricot) 30%, white);
}
.card-pull-group-head h3 { margin: 0; font-size: 1rem; }
.card-pull-group-head span { color: var(--color-text-secondary); font-size: 0.78rem; }
.card-pull-list { display: flex; flex-direction: column; }
.card-pull-item {
  display: grid;
  grid-template-columns: 28px minmax(64px, 86px) minmax(64px, 92px) 1fr;
  align-items: center;
  gap: 0.7rem;
  min-height: 58px;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--color-surface-gray);
  cursor: pointer;
  transition: background .18s ease;
}
.card-pull-item:last-child { border-bottom: 0; }
.card-pull-item:hover { background: var(--color-surface-cream); }
.card-pull-item.is-pulled { background: color-mix(in srgb, var(--color-accent-sage) 28%, white); }
.card-pull-checkbox { width: 21px; height: 21px; cursor: pointer; accent-color: var(--color-sage-ink); }
.card-pull-card-type {
  width: fit-content;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  background: var(--color-surface-cream);
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
}
.card-pull-code { font-variant-numeric: tabular-nums; font-size: 0.93rem; }
.card-pull-person { min-width: 0; display: flex; align-items: baseline; gap: 0.7rem; }
.card-pull-person b { flex: none; font-size: 0.9rem; }
.card-pull-person small {
  min-width: 0;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-pull-item.is-pulled .card-pull-person { opacity: .7; }
.card-pull-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface-white);
  border-radius: var(--radius-lg);
}

@media (max-width: 720px) {
  .card-pull-summary { position: static; }
  .card-pull-item { grid-template-columns: 28px 58px 70px 1fr; padding-inline: 0.7rem; gap: 0.5rem; }
  .card-pull-person { flex-direction: column; gap: 0.1rem; align-items: flex-start; }
  .card-pull-person small { width: 100%; }
}

/* ── 廚房備餐（項目 3）────────────────────────────────────────────── */
/* 統計區釘在頂端：清單有二十幾列，同仁邊出餐邊往下捲，總量不該捲出畫面。
   top 值是分頁列的高度，兩者一起黏住才不會出現「分頁不見了但統計還在」。 */
.kitchen-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
  padding: 1rem clamp(1rem, 3vw, 2rem) 1.1rem;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface-cream);
}
.k-stat-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 1rem 1.2rem 0.9rem;
  box-shadow: 0 8px 20px rgba(92, 68, 58, .07);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.k-stat-head {
  font-size: 0.82rem;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
}
/* 主角：今天要做幾份。字級刻意拉到跟頁面其他數字不同量級，站遠一點也讀得到。 */
.k-stat-figure { display: flex; align-items: baseline; gap: 0.25rem; line-height: 1; }
.k-stat-figure b {
  font-size: clamp(2.4rem, 6vw, 3.1rem);
  font-weight: 700;
  color: var(--color-text-primary-alt);
  font-variant-numeric: tabular-nums;
}
.k-stat-unit { font-size: 1rem; color: var(--color-text-secondary); }
.k-stat-progress {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; color: var(--color-text-secondary);
}
.k-stat-progress b {
  font-size: 1.15rem;
  color: var(--color-text-primary-alt);
  font-variant-numeric: tabular-nums;
}
.k-stat-dot { color: var(--color-accent-warm-gray-2); }
/* 進度條讓「出到哪了」不必讀數字就看得出來；只跟逐位貴賓的份數比（見 statCard 註解） */
.k-stat-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-gray);
  overflow: hidden;
  margin-top: 0.15rem;
}
.k-stat-bar i {
  display: block; height: 100%;
  background: var(--color-accent-cta);
  border-radius: 999px;
  transition: width .18s ease;
}
/* 註腳：份數怎麼來的。是佐證不是主角，字級壓到最小；空的也保留，讓兩張卡等高。 */
.k-stat-foot {
  min-height: 1.9rem;
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.k-buffer-input {
  width: 3.2rem;
  border: 1px solid var(--color-accent-warm-gray-2);
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
  min-height: 32px;
  font-family: inherit; font-size: 0.82rem;
  text-align: center;
}
/* 未知卡別提示：獨立一行，寬度吃滿，不要跟兩條統計線擠在一起 */
.k-stat-warn {
  flex-basis: 100%;
  background: #FDF3EE;
  border: 1px solid var(--color-accent-terracotta);
  color: var(--color-accent-terracotta-dark);
  border-radius: var(--radius-base);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.kitchen-status { padding: 0.4rem clamp(1rem, 3vw, 2rem) 0; min-height: 1.1rem; }

.kitchen-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem) 3rem;
}
.k-slot-head {
  font-size: 0.88rem; font-weight: 700;
  color: var(--color-text-primary-alt);
  margin: 0.9rem 0 0.1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-surface-gray);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.k-slot-head:first-child { margin-top: 0; }
.k-slot-head .k-add-toggle { font-size: 0.76rem; padding: 0.3rem 0.9rem; min-height: 36px; }

/* 新增姓名：欄位一行排開，窄螢幕自動換行。放在該時段標題正下方，補人的入口就在要補的那一區 */
.k-add-form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  background: var(--color-surface-white);
  border: 1px dashed var(--color-accent-warm-gray-2);
  border-radius: var(--radius-base);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.2rem;
}
.k-add-field {
  border: 1px solid var(--color-surface-gray);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  min-height: 44px;
  font-family: inherit; font-size: 0.9rem;
  flex: 1 1 8rem; min-width: 0;
}
.k-add-vip { flex: 0 1 8rem; font-family: var(--font-latin-body); letter-spacing: .04em; }
.k-add-qty { flex: 0 0 5rem; }
.k-add-time { flex: 0 1 10rem; }
.k-add-form .k-add-submit, .k-add-form .k-add-cancel { flex: 0 0 auto; min-height: 44px; }

.k-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(14rem, 1fr) auto 5rem;
  gap: 0.9rem;
  align-items: start;
  background: var(--color-surface-white);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.75rem 0.9rem;
  box-shadow: 0 4px 12px rgba(92, 68, 58, .05);
  transition: var(--transition-hover);
}
/* 手動新增：左側改用暖灰色條，與未知卡別的紅色區分開——一個是要人確認，一個只是來源不同 */
.k-row.is-manual { border-left: 4px solid var(--color-accent-warm-gray); }
/* 未知卡別：整列標紅，左側加一道色條當視覺錨點，方便在長清單裡一眼掃到 */
.k-row.is-unknown {
  border-color: var(--color-accent-terracotta);
  border-left: 4px solid var(--color-accent-terracotta);
  background: #FDF3EE;
}
/* 已出餐：整體淡化但保留可讀性，不用太低的 opacity */
.k-row.is-served { opacity: 0.62; }

.k-cell-time { font-weight: 600; padding-top: 0.5rem; font-size: 0.92rem; }
.k-name { font-weight: 600; font-size: 0.92rem; }
/* 卡別與卡號同一行。卡號是廚房拿來對號抄記錄的目標，用等寬數字與較高對比，
   不跟卡別一起被弱化成灰字——降權重是為了讓主角突出，不是把要用的東西藏起來。 */
.k-idline {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  margin-top: 0.15rem; font-size: 0.78rem; color: var(--color-text-secondary);
}
.k-vip {
  font-family: var(--font-latin-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-primary-alt);
}
.k-dot { color: var(--color-accent-warm-gray-2); }
.k-badge {
  font-size: 0.68rem;
  background: var(--color-surface-cream);
  border: 1px solid var(--color-accent-warm-gray-2);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--color-text-secondary);
}
.k-cards { font-size: 0.78rem; }
.k-marks { margin-top: 0.4rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.k-mark {
  font-size: 0.72rem;
  background: var(--color-surface-cream);
  border: 1px solid var(--color-surface-gray);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  color: var(--color-text-secondary);
}
.k-source-warn {
  margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600;
  color: var(--color-accent-terracotta-dark);
}

/* 一種餐別一塊；餐別數量由 API 決定（目前套餐／優格精力湯／員工餐三種） */
.k-cell-portions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.k-portion { width: 9rem; display: flex; flex-direction: column; gap: 0.15rem; }
/* 份數為零的餐別淡化但仍可點擊編輯——貴賓臨時要加一份時得改得到 */
.k-portion.is-zero { opacity: 0.45; }
.k-portion.is-zero:focus-within { opacity: 1; }
.k-cell-actions { display: flex; justify-content: flex-end; }
.k-cell-actions .k-remove { font-size: 0.72rem; padding: 0.3rem 0.7rem; min-height: 44px; }

.k-qty-label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.76rem; color: var(--color-text-secondary);
}
.k-qty-input {
  width: 100%;
  border: 1px solid var(--color-surface-gray);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  min-height: 44px;
  font-family: inherit; font-size: 0.92rem;
}
.k-manual-note {
  margin-top: 0.4rem; font-size: 0.72rem; color: var(--color-text-secondary);
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.k-manual-note .k-revert { padding: 0.25rem 0.9rem; min-height: 44px; font-size: 0.72rem; }

.k-cell-served { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.3rem; }
/* 出餐勾選是廚房現場最頻繁的動作，整個 label 都要是可點區域且不低於 44px——
   現場多半站著、手上忙，勾選框本身那 13px 按不準。 */
.k-served-cb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 0.8rem;
  cursor: pointer;
}
.k-served-cb input { width: 20px; height: 20px; flex: none; cursor: pointer; }

/* ── 備註（append-only）────────────────────────────────────────────── */
.k-note { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.k-note-latest {
  font-size: 0.8rem;
  color: var(--color-text-primary-alt);
  background: var(--color-surface-cream);
  border-left: 3px solid var(--color-accent-warm-gray-2);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}
.k-note-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.k-note-input {
  flex: 1 1 12rem; min-width: 0;
  border: 1px solid var(--color-surface-gray);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-height: 40px;
  font-family: inherit; font-size: 0.82rem;
}
.k-note-row .btn-ghost { font-size: 0.72rem; padding: 0.25rem 0.7rem; min-height: 40px; }
.k-note-list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.2rem; }
.k-note-item { font-size: 0.78rem; display: flex; gap: 0.5rem; align-items: baseline; }
.k-note-meta { color: var(--color-text-secondary); flex: none; font-variant-numeric: tabular-nums; }
.k-note-body { color: var(--color-text-primary); }

/* ── 貴賓用餐習慣（長期資料）──────────────────────────────────────────── */
.k-dining { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
/* 沿用 .k-mark 的字級與圓角，只是換底色分辨警示與一般提示——pill 形狀已經是既有慣例 */
.k-chip {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  color: var(--color-text-primary);
}
.k-chip--info { background: color-mix(in srgb, var(--color-accent-sage) 38%, var(--color-surface-white)); }
.k-chip--warn { background: var(--color-accent-blush); }
.k-chip--birthday { background: var(--color-accent-apricot); color: var(--color-accent-terracotta-dark); font-weight: 600; }
.k-dining-empty { font-size: 0.8rem; color: var(--color-text-secondary); }
.k-dining .k-dining-edit { font-size: 0.72rem; padding: 0.2rem 0.7rem; min-height: 36px; }

.k-dining-form {
  margin-top: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: var(--color-surface-cream);
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.k-dining-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
}
.k-dining-input {
  min-height: 44px;
  border: 1px solid var(--color-surface-gray);
  border-radius: var(--radius-base);
  padding: 0.45rem 0.6rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text-primary);
}
.k-dining-source { grid-column: 1 / -1; font-size: 0.78rem; color: var(--color-text-secondary); }
.k-dining-source summary { cursor: pointer; }
.k-dining-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}
.k-dining-form-actions button { min-height: 44px; }
.k-dining-status { font-size: 0.78rem; color: var(--color-accent-terracotta-dark); }

/* 當日備註（廚房自己的那一條）與清單同一組左右留白 */
.kitchen-note-bar { border-bottom: none; }
.k-day-note-latest:not(:empty), .k-day-note-list:not([hidden]) {
  margin: 0 clamp(1rem, 3vw, 2rem);
}
.k-day-note-list:not([hidden]) { margin-bottom: 0.5rem; }

/* 窄螢幕（現場公用電腦也可能是直式螢幕）：表格式版面改逐列卡片，
   一律單欄堆疊，不讓內容把頁面撐出橫向捲動。 */
@media (max-width: 720px) {
  .k-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .k-cell-time { padding-top: 0; }
  .k-cell-served { padding-top: 0; }
  .k-portion { width: 100%; }
  .k-cell-actions { justify-content: flex-start; }
  .k-add-field { flex: 1 1 100%; }
  .k-add-qty, .k-add-time, .k-add-vip { flex: 1 1 45%; }
  .k-dining-form { grid-template-columns: 1fr; }

  /* 統計卡在窄螢幕改並排、整體壓扁。卡片若照桌機那樣堆疊，釘住的區塊會吃掉
     半個螢幕高，清單只剩下方一小條——釘住反而害了它要服務的那份清單。
     三種餐別一律擠在同一列（v0.9.0 加了員工餐），換行就等於多吃一整排視高。 */
  .kitchen-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.7rem 1rem 0.8rem;
  }
  .k-stat-card { padding: 0.6rem 0.6rem 0.5rem; gap: 0.2rem; }
  .k-stat-head { font-size: 0.72rem; }
  .k-stat-figure b { font-size: 1.7rem; }
  .k-stat-unit { font-size: 0.8rem; }
  .k-stat-progress { font-size: 0.72rem; gap: 0.25rem; }
  .k-stat-progress b { font-size: 0.85rem; }
  .k-stat-foot { font-size: 0.68rem; min-height: 1.4rem; }
  .k-buffer-input { width: 2.6rem; min-height: 28px; }
}