:root {
  /* Font Awesome Free 6.7.2 遮罩（CC BY 4.0，ADR 0048）：給 ::before/::after 用的箭頭與勾號。 */
  --fa-mask-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  --fa-mask-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  --fa-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");

  /* 語意色 token：採用 shadcn/ui 的配對慣例 —— 每個表面色都有配對的前景色，
     元件只引用語意名稱，不再各自決定顏色。色值沿用專案既有色票。
     日後若要改用 oklch()，只需換這裡的值，元件完全不受影響。 */
  --background: #f4f6f7;      --foreground: #1e2933;
  --card: #ffffff;            --card-foreground: #1e2933;
  --popover: #ffffff;         --popover-foreground: #1e2933;
  --primary: #087f75;         --primary-foreground: #ffffff;
  --secondary: #e8ebed;       --secondary-foreground: #354450;
  --muted: #f4f6f7;           --muted-foreground: #6b7882;
  --accent: #dff6f2;          --accent-foreground: #087f75;
  --destructive: #b63c36;     --destructive-foreground: #ffffff;
  --success: #26774b;         --success-bg: #e4f5e9;
  --warning: #a15c00;         --warning-bg: #fff2d5;
  --info: #1d5d9b;            --info-bg: #e6f1fb;
  --border: #e8ebed;          --input: #d4d9dd;        --ring: #0b978a;
  --sidebar: #0c2434;         --sidebar-foreground: #dae7eb;
  --sidebar-primary: #0b978a; --sidebar-accent: #174c5d;
  --sidebar-border: rgba(255, 255, 255, .09);

  /* 圓角：單一基準值 + calc 推導（shadcn 公式）。
     要調整全站圓潤度只需改 --radius 一個值。 */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);

  /* 字級：7 階，下限 12px。繁體中文筆畫密度高，同字級可讀性低於拉丁字母，
     因此內文取 15px 而非更小。階層靠字級與顏色表現，不靠縮到最小。 */
  --text-xs: 12px;    --leading-xs: 1.5;
  --text-sm: 13px;    --leading-sm: 1.55;
  --text-base: 15px;  --leading-base: 1.65;
  --text-lg: 18px;    --leading-lg: 1.45;
  --text-xl: 22px;    --leading-xl: 1.35;
  --text-2xl: 28px;   --leading-2xl: 1.25;
  --text-3xl: 34px;   --leading-3xl: 1.2;

  /* 間距：4px 基準 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* 版面與互動（2026-10-10 新增，僅新增不改名）：
     --gutter-phone 手機左右留白；--control-height 按鈕／輸入框共用高度；
     --touch-target 最小可點範圍；--focus-ring 鍵盤焦點樣式；--shadow-sm 浮起卡片。 */
  --gutter-phone: 16px;
  --control-height: 44px;
  --touch-target: 44px;
  --content-max: 1680px;
  --focus-ring: 0 0 0 3px rgb(11 151 138 / 35%);
  --shadow-sm: 0 1px 2px rgb(21 44 58 / 6%), 0 2px 8px rgb(21 44 58 / 5%);
  /* 狀態區塊（ui-state）的邊框色：與 success/warning/destructive 同色系。 */
  --destructive-bg: #fee9e7;
  --destructive-border: #f2c4bf;
  --info-border: #c5dcf2;

  /* 既有色階保留為別名，未改寫的舊規則不會壞 */
  --navy-950: #0c2434;
  --navy-900: #123247;
  --navy-800: #16425b;
  --teal-700: #087f75;
  --teal-600: #0b978a;
  --teal-100: #dff6f2;
  --blue-700: #1d5d9b;
  --blue-100: #e6f1fb;
  --amber-700: #a15c00;
  --amber-100: #fff2d5;
  --red-700: #b63c36;
  --red-100: #fee9e7;
  --green-700: #26774b;
  --green-100: #e4f5e9;
  --gray-950: #1e2933;
  --gray-800: #354450;
  --gray-700: #55636e;
  --gray-600: #6b7882;
  --gray-500: #8d98a1;
  --gray-400: #b4bcc3;
  --gray-300: #d4d9dd;
  --gray-200: #e8ebed;
  --gray-100: #f4f6f7;
  --gray-50: #fafbfb;
  --white: #ffffff;
  --shadow: 0 8px 24px rgba(21, 44, 58, 0.08);
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font); color: var(--foreground); background: var(--background); }
body { font-size: var(--text-base); line-height: var(--leading-base); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { cursor: pointer; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
[hidden] { display: none !important; }

/* 環境提示條。部署時文案會被改寫為「共用 UAT 介面」，對測試同仁是有效資訊，
   因此保留；改為正常流排版（原本 position:fixed 搭配 body padding-top，
   捲動時會在頂部露出空白）。 */
.meeting-ribbon {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--muted-foreground); background: var(--secondary);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
}
.meeting-ribbon span { font-weight: 400; }

.login-screen { min-height: 100vh; min-height: 100dvh; background: #f5f8f8; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.login-screen::before {
  content: ""; position: absolute; width: 780px; height: 780px; left: -250px; bottom: -430px;
  border-radius: 50%; background: #d6ebe8;
}
.login-screen::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -260px; top: -250px;
  border-radius: 50%; background: #dfeaf0;
}
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-8) 56px var(--space-4); }
.brand-mark { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; background: #fff; }
.brand-mark.small { width: 38px; height: 38px; }
.login-brand strong, .sidebar-brand strong { display: block; font-size: var(--text-lg); }
.login-brand span, .sidebar-brand span { display: block; margin-top: 2px; color: var(--gray-600); font-size: var(--text-sm); }
/* 品牌列在上、頁尾在下，中間區塊佔滿剩餘高度並垂直置中，避免內容整體偏下。 */
.login-layout { position: relative; z-index: 2; flex: 1 0 auto; width: min(1180px, calc(100% - 112px)); margin: 0 auto; padding-block: var(--space-6) var(--space-10); display: grid; grid-template-columns: 1fr 440px; align-items: center; align-content: center; gap: 72px; }
.eyebrow { color: var(--teal-700); font-size: var(--text-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.login-visual { margin: 0; min-width: 0; }
.login-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1448 / 1086; object-fit: cover; border-radius: 28px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.login-card { padding: var(--space-10) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow); }
.login-card-head { text-align: center; margin-bottom: var(--space-6); }
.soft-icon { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: 999px; color: var(--accent-foreground); background: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.login-card h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-xl); }
.login-card-head p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.field-label { display: block; margin-bottom: var(--space-2); color: var(--foreground); font-size: var(--text-sm); font-weight: 600; }
.phone-field { display: flex; align-items: center; height: 44px; margin-bottom: 0; border: 1px solid var(--input); border-radius: var(--radius-md); overflow: hidden; background: var(--card); }
.phone-field span { padding: 0 var(--space-3); color: var(--muted-foreground); border-right: 1px solid var(--border); }
.phone-field input { flex: 1; border: 0; outline: 0; padding: 0 var(--space-3); font-size: var(--text-base); color: var(--foreground); background: transparent; }
.phone-field:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.otp-field { margin-top: var(--space-8); }   /* 群組之間，明顯拉開 */
/* 卡片內的按鈕屬於它上方控制項的同一組，因此用小間距。
   注意：按鈕是 inline-block，相鄰 margin 不會收合而是相加，
   因此前一元素的 margin-bottom 要把這 12px 算進去。 */
.login-card > .primary-button,
.login-card > .secondary-button { margin-top: var(--space-3); }
#uat-workspace { padding: var(--space-6); }
#uat-workspace p, #uat-workspace li { line-height: 1.8; }
#uat-workspace ol { padding-left: 24px; }
#uat-workspace input, #uat-workspace select { display: block; width: 100%; max-width: 620px; padding: var(--space-3); margin-top: 6px; border: 1px solid #b9c8cd; border-radius: var(--radius-md); background: white; color: #102a43; }
#uat-workspace section { max-width: 850px; }
.otp-field input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--input); border-radius: var(--radius-md); outline: 0;
  font-size: var(--text-base); font-variant-numeric: tabular-nums; letter-spacing: .28em;
  color: var(--foreground); background: var(--card);
}
/* placeholder 是中文，字距要回到正常，否則會被拉成「請 輸 入 驗 證 碼」 */
.otp-field input::placeholder { letter-spacing: normal; color: var(--muted-foreground); }
.otp-field input:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.login-status { margin: var(--space-3) 0 var(--space-2); color: var(--info); font-size: var(--text-sm); line-height: var(--leading-sm); }
.login-status.error { color: var(--red-700); }
.primary-button, .secondary-button, .danger-outline, .filter-button {
  min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700; border: 1px solid transparent; transition: .15s ease;
}
.primary-button:focus-visible, .secondary-button:focus-visible,
.danger-outline:focus-visible, .filter-button:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.primary-button { color: var(--primary-foreground); background: var(--primary); }
.primary-button:hover { background: var(--teal-600); }
.secondary-button { color: var(--secondary-foreground); background: var(--card); border-color: var(--input); }
.secondary-button:hover { background: var(--muted); }
.danger-outline { color: var(--destructive); background: var(--card); border-color: var(--destructive); }
.danger-outline:hover { color: var(--destructive-foreground); background: var(--destructive); }
.wide { width: 100%; }
.login-help { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin: var(--space-8) 0 var(--space-6); font-size: var(--text-sm); color: var(--muted-foreground); }
.login-help a { font-weight: 600; white-space: nowrap; }
.security-note { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--muted); font-size: var(--text-sm); }
.security-note b { color: var(--foreground); font-weight: 600; white-space: nowrap; }
.login-footer { position: relative; z-index: 2; padding: var(--space-4) var(--space-4) var(--space-6); text-align: center; color: var(--gray-500); font-size: var(--text-sm); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: fixed; top: 0; bottom: 0; width: 250px; display: flex; flex-direction: column; overflow: hidden; padding: var(--space-6) var(--space-4) var(--space-4); color: #dae7eb; background: var(--navy-950); }
.sidebar-brand { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-6); border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-brand strong { color: white; font-size: var(--text-base); }
.sidebar-brand span { color: #8fb0bf; font-size: var(--text-sm); }
.sidebar-navigation { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #315363 transparent; padding: 12px 4px 16px 0; margin-right: -4px; }
.sidebar-navigation::-webkit-scrollbar { width: 7px; }
.sidebar-navigation::-webkit-scrollbar-thumb { border-radius: 8px; background: #315363; }
.sidebar-navigation nav { margin-top: 6px; }
.sidebar-navigation > nav:first-child { margin-top: 0; }
.nav-group { margin-top: 5px; }
.nav-group summary { position: relative; display: flex; align-items: center; min-height: 42px; padding: 0 34px 0 16px; border-radius: var(--radius-md); color: #9db7c1; font-size: var(--text-sm); font-weight: 650; cursor: pointer; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #7897a3; -webkit-mask: var(--fa-mask-chevron-down) center / contain no-repeat; mask: var(--fa-mask-chevron-down) center / contain no-repeat; transition: transform .16s ease; }
.nav-group[open] summary::after { transform: rotate(180deg); }
.nav-group summary:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-group summary:focus-visible { color: #fff; outline: 2px solid #7fddd1; outline-offset: -2px; }
.nav-group nav { margin: 3px 0 8px; padding-left: 7px; border-left: 1px solid rgba(143,176,191,.22); }
.sidebar nav a { position: relative; display: flex; align-items: center; gap: var(--space-3); height: 43px; padding: 0 var(--space-4); margin: 4px 0; border-radius: var(--radius-md); color: #b9cdd6; font-size: var(--text-sm); font-weight: 600; }
.sidebar nav a .fa-icon, .sidebar nav a .nav-icon { flex: 0 0 20px; width: 18px; height: 18px; color: #88aab7; }
.sidebar nav a .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav a.active { color: white; background: #174c5d; }
.sidebar nav a.active .fa-icon, .sidebar nav a[aria-current="page"] .fa-icon { color: #7fddd1; }
.sidebar nav a:hover .fa-icon { color: #cfe3ea; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 2px var(--space-2); border-radius: 999px; color: #fff; background: var(--red-700); font-size: var(--text-xs); text-align: center; }
.sidebar-user { flex: 0 0 auto; margin-top: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-3) 0; border-top: 1px solid rgba(255,255,255,.09); }
.sidebar-user b, .sidebar-user span { display: block; }
.sidebar-user b { color: white; font-size: var(--text-sm); }
.sidebar-user span { color: #86a3ae; font-size: var(--text-xs); margin-top: 2px; }
.sidebar-user .chevron { margin-left: auto; color: #8ba6b0; font-size: var(--text-base); }
.sidebar-user > div:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-user > div:nth-child(2) span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout { flex: 0 0 auto; padding: var(--space-2) var(--space-2); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); color: #d5e3e8; background: transparent; font-size: var(--text-xs); cursor: pointer; }
.sidebar-logout:hover, .sidebar-logout:focus-visible { color: white; border-color: #8ed3cb; background: rgba(255,255,255,.08); }
@media (max-height: 620px) and (min-width: 1001px) {
  .sidebar { padding-top: 14px; padding-bottom: 10px; }
  .sidebar-brand { padding-bottom: 12px; }
  .sidebar-user { padding-top: 10px; }
  .sidebar nav a { height: 38px; margin: 2px 0; }
  .nav-group summary { min-height: 38px; }
}
.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal-700); font-size: var(--text-sm); font-weight: 700; }
.avatar.navy { background: #316985; }
.avatar.teal { background: #178b7c; }
.avatar.gray { background: #788791; }
.avatar.plum { background: #7b6387; }

.main { grid-column: 2; min-width: 0; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); border-bottom: 1px solid var(--gray-200); background: white; }
.breadcrumb { color: var(--gray-600); font-size: var(--text-sm); }
.top-actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--gray-200); color: var(--gray-700); background: white; font-size: var(--text-lg); }
.icon-button.has-dot { position: relative; }
.icon-button.has-dot::after { content: ""; position: absolute; width: 7px; height: 7px; right: 7px; top: 7px; border-radius: 50%; background: var(--red-700); border: 2px solid white; }
.today { margin-left: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--navy-800); background: var(--gray-100); font-size: var(--text-sm); font-weight: 700; }
.content-screen { min-height: calc(100vh - 94px); padding: var(--space-8) var(--space-8) 42px; background: #f4f6f7; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.page-heading h1 { margin: 0; color: var(--navy-950); font-size: var(--text-2xl); letter-spacing: -.025em; }
.page-heading p { margin: var(--space-2) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.button-row { display: flex; gap: var(--space-3); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: 16px; }
.metric-card { min-height: 100px; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.metric-icon { width: 43px; height: 43px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: var(--text-lg); font-weight: 700; }
.metric-icon.blue { color: var(--blue-700); background: var(--blue-100); }
.metric-icon.amber { color: var(--amber-700); background: var(--amber-100); }
.metric-icon.green { color: var(--green-700); background: var(--green-100); }
.metric-icon.red { color: var(--red-700); background: var(--red-100); }
.metric-card span, .metric-card b, .metric-card small { display: block; }
.metric-card span { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.metric-card b { margin: var(--space-1) 0; color: var(--foreground); font-size: var(--text-xl); line-height: var(--leading-xl); }
.metric-card small { color: var(--muted-foreground); font-size: var(--text-xs); }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: 16px; }
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.panel-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gray-200); }
.panel-head h2 { margin: 0; color: var(--foreground); font-size: var(--text-lg); line-height: var(--leading-lg); }
.panel-head p { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.panel-head > a { font-size: var(--text-sm); font-weight: 700; }
.timeline-list { padding: var(--space-1) var(--space-5); }
.timeline-item { min-height: 70px; display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--gray-100); }
.timeline-item:last-child { border-bottom: 0; }
.date-box { width: 55px; }
.date-box b, .date-box span { display: block; }
.date-box b { font-size: var(--text-base); }
.date-box span { color: var(--gray-500); font-size: var(--text-xs); }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 5px var(--gray-100); }
.timeline-dot.survey { background: #d4901e; }
.timeline-dot.session { background: var(--teal-700); }
.timeline-main { flex: 1; }
.timeline-main b, .timeline-main span { display: block; }
.timeline-main b { font-size: var(--text-sm); }
.timeline-main span { margin-top: 4px; color: var(--gray-600); font-size: var(--text-xs); }
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: var(--space-1) var(--space-3); border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
  color: var(--secondary-foreground); background: var(--secondary);
}
.green-tag { color: var(--success); background: var(--success-bg); }
.amber-tag { color: var(--warning); background: var(--warning-bg); }
.blue-tag { color: var(--info); background: var(--info-bg); }
.red-tag { color: var(--destructive); background: var(--red-100); }
.neutral-tag { color: var(--gray-700); background: var(--gray-100); }
.large-tag { min-height: 30px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.attention-list { padding: var(--space-2) var(--space-4); }
.attention-list > div { min-height: 65px; display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--gray-100); }
.attention-list > div:last-child { border: 0; }
.number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; }
.red-bg { color: var(--red-700); background: var(--red-100); }
.amber-bg { color: var(--amber-700); background: var(--amber-100); }
.blue-bg { color: var(--blue-700); background: var(--blue-100); }
.attention-list p { flex: 1; margin: 0; }
.attention-list b, .attention-list small { display: block; }
.attention-list b { font-size: var(--text-sm); }
.attention-list small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.attention-list i { color: var(--gray-400); font-style: normal; font-size: var(--text-lg); }
.table-panel { overflow: hidden; }
.compact-actions { display: flex; align-items: center; gap: var(--space-2); }
.search-box { min-width: 245px; padding: var(--space-3) var(--space-4); border: 1px solid var(--gray-300); border-radius: var(--radius-md); color: var(--gray-500); background: white; font-size: var(--text-xs); }
.filter-button { min-height: 34px; padding: 0 var(--space-3); border-color: var(--gray-300); color: var(--gray-700); background: white; font-size: var(--text-xs); }
table { width: 100%; border-collapse: collapse; }
th { padding: var(--space-3) var(--space-4); text-align: left; color: var(--gray-500); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: var(--text-xs); font-weight: 700; letter-spacing: .03em; }
td { padding: var(--space-3) var(--space-4); color: var(--gray-700); border-bottom: 1px solid var(--gray-100); font-size: var(--text-xs); }
tbody tr:last-child td { border-bottom: 0; }
td b, td small { display: block; }
td b { color: var(--gray-950); font-size: var(--text-sm); }
td small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.mini-alert { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--red-700); background: var(--red-100); font-size: var(--text-xs); font-weight: 700; }

.back-link { display: inline-block; margin-bottom: 9px; color: var(--gray-600); font-size: var(--text-xs); font-weight: 700; }
.title-with-status { display: flex; align-items: center; gap: var(--space-3); }
.stepper, .import-stepper { display: flex; align-items: flex-start; padding: var(--space-5) var(--space-8) var(--space-4); margin-bottom: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.stepper > div, .import-stepper > div { flex: 0 0 auto; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--gray-500); font-size: var(--text-xs); font-weight: 700; }
.stepper i, .import-stepper i { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--gray-300); border-radius: 50%; background: white; font-style: normal; }
.stepper > b, .import-stepper > b { flex: 1; height: 2px; margin: 12px 8px 0; background: var(--gray-200); }
.stepper .done i, .import-stepper .done i { color: white; border-color: var(--teal-700); background: var(--teal-700); }
.stepper .done + b, .import-stepper .done + b { background: var(--teal-700); }
.stepper .active, .import-stepper .active { color: var(--teal-700); }
.stepper .active i, .import-stepper .active i { color: var(--teal-700); border-color: var(--teal-700); background: var(--teal-100); }
.detail-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); margin-bottom: 16px; }
.text-button { padding: 0; border: 0; color: var(--blue-700); background: transparent; font-size: var(--text-xs); font-weight: 700; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
.detail-list div { padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--gray-100); }
.detail-list div:nth-last-child(-n+2) { border-bottom: 0; }
.detail-list span, .detail-list b { display: block; }
.detail-list span { margin-bottom: 4px; color: var(--gray-500); font-size: var(--text-xs); }
.detail-list b { color: var(--gray-800); font-size: var(--text-sm); }
.contacts-panel { padding-bottom: 5px; }
.contact { min-height: 57px; display: flex; align-items: center; gap: var(--space-3); margin: 0 16px; border-bottom: 1px solid var(--gray-100); }
.contact:last-child { border-bottom: 0; }
.contact > div:nth-child(2) { flex: 1; }
.contact b, .contact span, .contact small { display: block; }
.contact b { font-size: var(--text-sm); }
.contact span { color: var(--gray-600); font-size: var(--text-xs); }
.contact small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.small-button { min-height: 33px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.tabs { display: flex; gap: var(--space-6); padding: 0 var(--space-5); border-bottom: 1px solid var(--gray-200); }
.tabs span { position: relative; padding: var(--space-3) 0; color: var(--gray-500); font-size: var(--text-xs); font-weight: 700; }
.tabs span.active { color: var(--teal-700); }
.tabs span.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal-700); }
.session-card { min-height: 92px; display: flex; align-items: center; gap: var(--space-5); margin: 0 18px; border-bottom: 1px solid var(--gray-100); }
.session-card:last-child { border: 0; }
.session-date { width: 53px; text-align: center; padding-right: 16px; border-right: 1px solid var(--gray-200); }
.session-date b { font-size: var(--text-xs); color: var(--gray-500); }
.session-date span { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--navy-950); line-height: 1; }
.session-date small { color: var(--gray-500); font-size: var(--text-xs); }
.session-info { flex: 1; }
.session-info > div { display: flex; align-items: center; gap: var(--space-2); }
.session-info b { font-size: var(--text-sm); }
.session-info p { margin: 5px 0; color: var(--gray-700); font-size: var(--text-xs); }
.session-info small { color: var(--gray-500); font-size: var(--text-xs); }
.count-block { min-width: 80px; text-align: right; }
.count-block span, .count-block b, .count-block small { display: block; }
.count-block span { color: var(--gray-500); font-size: var(--text-xs); }
.count-block b { color: var(--navy-950); font-size: var(--text-lg); }
.count-block small { color: var(--gray-500); font-size: var(--text-xs); }
.count-block.muted b { color: var(--gray-400); }

.review-layout { display: grid; grid-template-columns: 1fr 310px; gap: var(--space-4); }
.requester-panel { min-height: 72px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: 15px; }
.requester-panel > div:nth-child(2) b, .requester-panel > div:nth-child(2) span { display: block; }
.requester-panel > div:nth-child(2) b { font-size: var(--text-sm); }
.requester-panel > div:nth-child(2) span { color: var(--gray-500); font-size: var(--text-xs); }
.requester-panel .reason { flex: 1; margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--gray-200); }
.reason span, .reason b { display: block; }
.reason span { color: var(--gray-500); font-size: var(--text-xs); }
.reason b { margin-top: 4px; font-size: var(--text-xs); }
.risk-label { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--red-700); background: var(--red-100); font-size: var(--text-xs); font-weight: 700; }
.diff-row { display: grid; grid-template-columns: 130px 1fr 30px 1fr; align-items: stretch; padding: var(--space-5) var(--space-5); }
.diff-row > div { padding: var(--space-4); border-radius: var(--radius-md); }
.diff-row span, .diff-row b { display: block; }
.diff-row span { margin-bottom: 6px; color: var(--gray-500); font-size: var(--text-xs); }
.diff-row b { font-size: var(--text-sm); }
.diff-row .old-value { background: var(--red-100); }
.diff-row .old-value b { color: #8e3c37; text-decoration: line-through; }
.diff-row .new-value { background: var(--green-100); }
.diff-row .new-value b { color: var(--green-700); }
.diff-row .arrow { display: grid; place-items: center; color: var(--gray-400); background: transparent; font-size: var(--text-lg); }
.impact-box { margin: 0 18px 18px; padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid #dbe4e7; background: var(--gray-50); }
.impact-box > b { display: block; margin-bottom: 9px; font-size: var(--text-xs); }
.impact-box > div { display: flex; align-items: center; gap: var(--space-3); min-height: 46px; border-top: 1px solid var(--gray-200); }
.impact-box > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--teal-700); background: var(--teal-100); font-size: var(--text-sm); font-weight: 700; }
.impact-box p { margin: 0; }
.impact-box strong, .impact-box small { display: block; }
.impact-box strong { font-size: var(--text-xs); }
.impact-box small { color: var(--gray-500); font-size: var(--text-xs); margin-top: 2px; }
.audit-strip { min-height: 78px; display: flex; align-items: center; padding: var(--space-3) var(--space-5); margin-top: 15px; }
.audit-strip > div { min-width: 160px; }
.audit-strip > div span, .audit-strip > div b, .audit-strip > div small { display: block; }
.audit-strip > div span { color: var(--gray-500); font-size: var(--text-xs); }
.audit-strip > div b { margin: 3px 0; font-size: var(--text-xs); }
.audit-strip > div small { color: var(--gray-500); font-size: var(--text-xs); }
.audit-strip > i { flex: 1; height: 2px; margin: 0 12px; background: var(--teal-700); }
.audit-strip > i.pending-line { background: var(--gray-300); border-top: 2px dashed white; }
.audit-strip .pending b { color: var(--amber-700); }
.review-side { display: flex; flex-direction: column; gap: var(--space-4); }
.decision-card { padding: var(--space-5); }
.decision-card h2 { margin: 0 0 7px; font-size: var(--text-base); }
.decision-card > p { margin: 0 0 18px; color: var(--gray-600); font-size: var(--text-xs); line-height: 1.7; }
.decision-card textarea { width: 100%; height: 92px; resize: none; padding: var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); color: var(--gray-700); background: white; font-size: var(--text-xs); line-height: 1.5; }
.otp-reminder { display: flex; flex-direction: column; gap: var(--space-1); margin: 13px 0; padding: var(--space-3); border-radius: var(--radius-md); color: var(--amber-700); background: var(--amber-100); font-size: var(--text-xs); }
.decision-card .wide { margin-top: 8px; min-height: 39px; font-size: var(--text-xs); }
.rule-card { padding: var(--space-5); }
.rule-card span, .rule-card b, .rule-card small, .rule-card a { display: block; }
.rule-card span { color: var(--gray-500); font-size: var(--text-xs); }
.rule-card b { margin-top: 5px; font-size: var(--text-sm); }
.rule-card small { margin: 4px 0 11px; color: var(--gray-500); font-size: var(--text-xs); }
.rule-card a { font-size: var(--text-xs); font-weight: 700; }

.people-metrics, .import-metrics { margin-bottom: 16px; }
.mini-metric { min-height: 88px; padding: var(--space-4) var(--space-5); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.mini-metric span, .mini-metric b, .mini-metric small { display: block; }
.mini-metric span { color: var(--gray-600); font-size: var(--text-xs); font-weight: 700; }
.mini-metric b { margin: 4px 0; font-size: var(--text-xl); color: var(--navy-950); }
.mini-metric small { color: var(--gray-500); font-size: var(--text-xs); }
.mini-metric.warning { border-color: #f0d6a2; background: #fffbf1; }
.mini-metric.success { border-color: #c9e8d3; background: #f5fbf7; }
/* 場次結案的階段計數可點選切換篩選；目前階段以藍框標示。 */
a.mini-metric { color: inherit; text-decoration: none; }
a.mini-metric:hover, a.mini-metric[aria-current="true"] { border-color: var(--blue-700); }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); padding: var(--space-5); }
.toolbar label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.toolbar .search-box { min-width: 260px; border: 0; padding: 0; background: none; color: inherit; font-size: var(--text-sm); }
.toolbar button { align-self: flex-end; }
/* 工作台有多個表單完全沒有版面 class（<form id="proposal-search"> 這類），
   外觀因此取決於祖先。給面板內的表單一個預設版面，不再各憑運氣。
   .survey-card 自帶內距，排除以免雙層留白。 */
.panel:not(.survey-card) > form:not(.toolbar) {
  display: grid; gap: var(--space-4); padding: var(--space-5);
}
.panel form label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.panel form button { justify-self: start; }

/* 這些 class 原本只是 JS 的 querySelector 掛鉤，從未寫過 CSS，因此內容會貼齊
   面板邊緣、間距全看祖先。補上一致的容器樣式（見 docs/DESIGN.md 核心規則第三條）。 */
.proposal-results,
.survey-slots, .session-list, .issue-list, .contact-sections,
.plan-detail, .replacement-search-status, .supplement-task,
.transfer-result, .brand-history, .assignment-history > *:not(summary) {
  padding: 0 var(--space-5) var(--space-5);
}
.panel > p { padding: 0 var(--space-5) var(--space-5); color: var(--muted-foreground); }
.panel > p:empty { padding: 0; }

/* 展開式編輯器的內容需要與 summary 對齊並留白 */
.assignment-editor > form, .eligibility-update, .eligibility-end,
.batch-schedule, .survey-create, .issue-create,
.supplement-request-form, .supplement-response-form, .session-cancel, .session-report {
  display: grid; gap: var(--space-4); padding: var(--space-4) 0 var(--space-5);
}
.transfer-list { margin: var(--space-2) 0 0; padding-left: var(--space-5);
  font-size: var(--text-sm); line-height: var(--leading-base); color: var(--muted-foreground); }
.panel form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
/* 核取方塊要與文字並排，不能套用上下堆疊的欄位群組版面。
   全站的核取方塊有多種寫法，用 :has() 一次涵蓋而不逐一加 class；
   不支援 :has() 的舊瀏覽器會退化成堆疊版，仍可操作。 */
.panel form label:has(> input[type="checkbox"]),
.panel form label:has(> input[type="radio"]),
.toolbar label:has(> input[type="checkbox"]),
.panel form label.checkbox, .toolbar label.checkbox {
  display: flex; align-items: center; gap: var(--space-2); font-weight: 400;
}
.panel form label input[type="checkbox"], .panel form label input[type="radio"],
.toolbar label input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.search-box.grow { flex: 1; }
.bulk-bar { min-height: 38px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); color: var(--blue-700); background: var(--blue-100); font-size: var(--text-xs); }
.bulk-bar button { margin-left: auto; border: 0; background: transparent; color: var(--blue-700); font-size: var(--text-xs); font-weight: 700; }
.people-table td { padding-top: 14px; padding-bottom: 14px; }
.person-cell { display: flex; align-items: center; gap: var(--space-3); }
.person-cell .avatar { width: 31px; height: 31px; }
.warning-row { background: #fffcf5; }
.error-text { color: var(--red-700) !important; }

.import-summary { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-4); margin-bottom: 14px; }
.file-card, .mode-card { min-height: 72px; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.file-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--green-700); background: var(--green-100); font-size: var(--text-xs); font-weight: 700; }
.file-card > div { flex: 1; }
.file-card b, .file-card small, .mode-card span, .mode-card b, .mode-card small { display: block; }
.file-card b { font-size: var(--text-sm); }
.file-card small, .mode-card small { margin-top: 4px; color: var(--gray-500); font-size: var(--text-xs); }
.file-card a { font-size: var(--text-xs); font-weight: 700; }
.mode-card { display: block; }
.mode-card span { color: var(--gray-500); font-size: var(--text-xs); }
.mode-card b { margin-top: 4px; color: var(--blue-700); font-size: var(--text-base); }
.compact-tabs { padding: 0; border: 0; gap: var(--space-4); }
.compact-tabs span { padding: var(--space-2) 0; font-size: var(--text-xs); }
.error-row { background: #fffafa; }
.error-row a { font-size: var(--text-xs); font-weight: 700; }
.import-footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--gray-200); }
.validation-callout { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding-left: 11px; border-left: 3px solid var(--red-700); }
.validation-callout b { color: var(--red-700); font-size: var(--text-xs); }
.validation-callout span { color: var(--gray-600); font-size: var(--text-xs); }
.primary-button.disabled { opacity: .38; box-shadow: none; }

.health-strip { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: var(--space-3); margin-bottom: 16px; }
.health-strip > div { min-height: 64px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.health-strip i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: var(--text-sm); font-weight: 700; }
.health-ok i { color: var(--green-700); background: var(--green-100); }
.health-warn { border-color: #efd9ad !important; background: #fffcf5 !important; }
.health-warn i { color: var(--amber-700); background: var(--amber-100); }
.health-strip p { flex: 1; margin: 0; }
.health-strip b, .health-strip span { display: block; }
.health-strip b { font-size: var(--text-xs); }
.health-strip span { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.health-warn button { border: 0; color: var(--amber-700); background: transparent; font-size: var(--text-xs); font-weight: 700; }
.notification-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4); }
.rules-table td { padding-top: 15px; padding-bottom: 15px; }
.channel { display: inline-block; margin-right: 4px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }
.channel.sms { color: var(--blue-700); background: var(--blue-100); }
.channel.mail { color: var(--teal-700); background: var(--teal-100); }
.toggle { display: inline-block; position: relative; width: 31px; height: 17px; border-radius: 999px; background: var(--gray-300); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: white; }
.toggle.on { background: var(--teal-700); }
.toggle.on::after { left: 17px; }
.rule-note { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--blue-700); background: var(--blue-100); font-size: var(--text-xs); }
.rule-note b { flex: 0 0 auto; }
.notification-side { display: flex; flex-direction: column; gap: var(--space-4); }
.quota-card { padding-bottom: 16px; }
.quota-row { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-2); font-size: var(--text-xs); }
.quota-row b { font-size: var(--text-xs); }
.progress { height: 7px; margin: 0 16px; overflow: hidden; border-radius: 999px; background: var(--gray-100); }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--blue-700); }
.mail-progress i { background: var(--teal-700); }
.quota-card > small { display: block; margin: 11px 16px 0; color: var(--gray-500); font-size: var(--text-xs); }
.recent-results .panel-head { min-height: 55px; }
.recent-results > div:not(.panel-head) { min-height: 55px; display: flex; align-items: center; gap: var(--space-3); margin: 0 14px; border-bottom: 1px solid var(--gray-100); }
.recent-results > div:last-child { border-bottom: 0; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.success-dot { background: var(--green-700); }
.warning-dot { background: var(--amber-700); }
.recent-results p { flex: 1; margin: 0; }
.recent-results b, .recent-results small { display: block; }
.recent-results b { font-size: var(--text-xs); }
.recent-results small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.recent-results time { color: var(--gray-500); font-size: var(--text-xs); }

.assignment-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); }
.form-panel { overflow: hidden; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-1); }
.choice-card { min-height: 68px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: white; }
.choice-card.selected { color: var(--teal-700); border-color: var(--teal-600); background: #f2fbf9; box-shadow: 0 0 0 2px rgba(11,151,138,.08); }
.choice-card > i { font-style: normal; font-size: var(--text-base); }
.choice-card b, .choice-card span { display: block; }
.choice-card b { font-size: var(--text-sm); }
.choice-card span { margin-top: 4px; color: var(--gray-500); font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
.form-grid label > span { display: block; margin-bottom: 7px; color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.mock-select, .readonly-field { position: relative; min-height: 57px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-3) var(--space-10) var(--space-3) var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: white; }
.readonly-field { padding-right: 12px; background: var(--gray-50); }
.mock-select b, .mock-select small, .readonly-field b, .readonly-field small { display: block; }
.mock-select b, .readonly-field b { font-size: var(--text-xs); }
.mock-select small, .readonly-field small { margin-top: 4px; color: var(--gray-500); font-size: var(--text-xs); }
.mock-select > i { position: absolute; right: 13px; top: 19px; color: var(--gray-500); font-style: normal; }
.muted-select b { color: var(--gray-500); }
.form-note { display: flex; gap: var(--space-3); margin: 0 18px 18px; padding: var(--space-3); border-radius: var(--radius-md); color: var(--blue-700); background: var(--blue-100); font-size: var(--text-xs); }
.form-note b { flex: 0 0 auto; }
.assignment-side { display: flex; flex-direction: column; gap: var(--space-4); }
.preview-card, .direct-card { padding: var(--space-5); }
.preview-card h2 { margin: 0 0 10px; font-size: var(--text-base); }
.preview-card > div { min-height: 60px; display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--gray-100); }
.preview-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; }
.teal-bg { color: var(--teal-700); background: var(--teal-100); }
.preview-card p { margin: 0; }
.preview-card b, .preview-card small { display: block; }
.preview-card b { font-size: var(--text-xs); }
.preview-card small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.direct-card > b, .direct-card > span { display: block; }
.direct-card > b { font-size: var(--text-sm); }
.direct-card > span { margin: 7px 0 14px; color: var(--gray-600); font-size: var(--text-xs); line-height: 1.6; }
.direct-card .wide { margin-top: 8px; font-size: var(--text-xs); }
.replacement-card { padding: var(--space-4) var(--space-5); border-color: #f0d399; background: #fffaf0; }
.replacement-card > b, .replacement-card > span, .replacement-card > small { display: block; }
.replacement-card > b { color: var(--amber-700); font-size: var(--text-sm); }
.replacement-card > span { margin-top: 6px; color: var(--gray-700); font-size: var(--text-xs); line-height: 1.55; }
.replacement-card > small { margin-top: 7px; color: var(--gray-500); font-size: var(--text-xs); line-height: 1.5; }

.scope-callout { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 16px; padding: var(--space-3) var(--space-4); border: 1px solid #cfe5e2; border-radius: var(--radius-lg); color: var(--teal-700); background: #f1faf8; font-size: var(--text-xs); }
.scope-callout b { flex: 0 0 auto; }
.report-grid { display: grid; grid-template-columns: 1fr 315px; gap: var(--space-4); }
.report-grid > div { display: flex; flex-direction: column; gap: var(--space-4); }
.status-actions { display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--space-6) var(--space-5); }
.status-actions > div { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--gray-500); }
.status-actions > div:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 62%; width: 76%; height: 2px; background: var(--gray-200); }
.status-actions i { position: relative; z-index: 1; width: 33px; height: 33px; display: grid; place-items: center; border: 2px solid var(--gray-300); border-radius: 50%; background: white; font-style: normal; font-size: var(--text-xs); font-weight: 700; }
.status-actions b { margin-top: 7px; color: var(--gray-700); font-size: var(--text-xs); }
.status-actions span { margin-top: 3px; font-size: var(--text-xs); }
.status-actions .done i { color: white; border-color: var(--teal-700); background: var(--teal-700); }
.status-actions .done:not(:last-child)::after { background: var(--teal-700); }
.status-actions .active i { color: var(--teal-700); border-color: var(--teal-700); background: var(--teal-100); }
.optional-execution-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 var(--space-5) var(--space-4); }
.optional-execution-grid > div { padding: 0 var(--space-3); border-left: 1px solid var(--gray-200); }
.optional-execution-grid > div:first-child { padding-left: 0; border-left: 0; }
.optional-execution-grid span, .optional-execution-grid b { display: block; }
.optional-execution-grid span { color: var(--gray-500); font-size: var(--text-xs); }
.optional-execution-grid b { margin-top: 5px; color: var(--gray-800); font-size: var(--text-xs); }
.count-entry { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-4); padding: var(--space-5); }
.count-entry label > span { display: block; margin-bottom: 7px; color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.number-input { height: 74px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); color: var(--gray-400); font-size: var(--text-2xl); font-weight: 700; }
.number-input small { color: var(--gray-500); font-size: var(--text-xs); }
.textarea-mock { height: 74px; padding: var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); color: var(--gray-500); font-size: var(--text-xs); }
.report-buttons { justify-content: flex-end; padding: 0 var(--space-5) var(--space-5); }
.report-side { display: flex; flex-direction: column; gap: var(--space-4); }
.context-card dl { display: grid; grid-template-columns: 80px 1fr; margin: 0; padding: var(--space-3) var(--space-5) var(--space-5); }
.context-card dt, .context-card dd { padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); font-size: var(--text-xs); }
.context-card dt { color: var(--gray-500); }
.context-card dd { margin: 0; color: var(--gray-800); font-weight: 700; }
.contacts-card { padding: var(--space-5); }
.contacts-card h2 { margin: 0 0 9px; font-size: var(--text-base); }
.contacts-card > div { padding: var(--space-3) 0; border-top: 1px solid var(--gray-100); }
.contacts-card b, .contacts-card span { display: block; }
.contacts-card b { font-size: var(--text-xs); }
.contacts-card span { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.contacts-card button { margin-top: 12px; }

.provider-metrics { margin-bottom: 16px; }
.provider-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4); }
.provider-side { display: flex; flex-direction: column; gap: var(--space-4); }
.action-card, .policy-card { padding: var(--space-5); }
.action-card h2 { margin: 0 0 7px; font-size: var(--text-base); }
.action-card > div { min-height: 65px; display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--gray-100); }
.action-card p { margin: 0; }
.action-card b, .action-card small { display: block; }
.action-card b { font-size: var(--text-xs); }
.action-card small { margin-top: 3px; color: var(--gray-500); font-size: var(--text-xs); }
.policy-card > b, .policy-card > span { display: block; }
.policy-card > b { color: var(--red-700); font-size: var(--text-sm); }
.policy-card > span { margin: 7px 0 12px; color: var(--gray-600); font-size: var(--text-xs); line-height: 1.6; }

body[data-current-screen="import"] .content-screen { padding-top: 18px; padding-bottom: 20px; }
body[data-current-screen="import"] .page-heading { margin-bottom: 14px; }
body[data-current-screen="import"] .import-stepper { padding-top: 12px; padding-bottom: 9px; margin-bottom: 11px; }
body[data-current-screen="import"] .import-summary { margin-bottom: 10px; }
body[data-current-screen="import"] .file-card,
body[data-current-screen="import"] .mode-card { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
body[data-current-screen="import"] .import-metrics { margin-bottom: 11px; }
body[data-current-screen="import"] .mini-metric { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
body[data-current-screen="import"] .table-panel td { padding-top: 9px; padding-bottom: 9px; }
body[data-current-screen="import"] .panel-head { min-height: 55px; padding-top: 10px; padding-bottom: 10px; }
body[data-current-screen="import"] .import-footer { min-height: 58px; padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 1000px) {
  .login-layout { width: calc(100% - 60px); grid-template-columns: 1fr; gap: var(--space-10); }
  .login-visual { display: none; }
  .login-card { max-width: 440px; margin: 0 auto; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { grid-column: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid, .detail-grid, .review-layout, .notification-layout, .assignment-grid, .report-grid, .provider-layout { grid-template-columns: 1fr; }
}
/* Live product surface additions */
.empty-live {
  padding: var(--space-8) var(--space-5);
  color: #5b6b7a;
  text-align: center;
}

.live-field,
.number-input input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  font: inherit;
  font-size: var(--text-base);
  color: var(--foreground);
  background: var(--card);
}
.live-field:focus, .number-input input:focus {
  outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring);
}

input.live-field,
select.live-field { height: 44px; }
textarea.live-field { min-height: 94px; resize: vertical; }
select.live-field { appearance: none; padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
                    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.annual-plan-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.4fr); gap: var(--space-4); }
.annual-plan-grid > div { display: flex; flex-direction: column; gap: var(--space-4); }
.annual-plan-card { padding: var(--space-5); }
.annual-plan-card h2, .annual-plan-card h3 { margin: 0 0 8px; }
.annual-plan-card form { display: grid; gap: var(--space-3); margin-top: 12px; }
.annual-plan-card label { display: grid; gap: var(--space-2); color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.annual-plan-card .live-field { min-height: 40px; resize: vertical; }
.annual-plan-card textarea.live-field { min-height: 70px; }
.annual-plan-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 8px 0; }
.annual-plan-contact { padding: var(--space-3) 0; border-top: 1px solid var(--gray-100); }
.annual-plan-history { margin-top: 10px; padding: var(--space-3); background: var(--gray-50); border-radius: var(--radius-md); }
/* 工作台大量使用 details/summary 作為展開式操作，需要看起來可點擊 */
.survey-card summary, .annual-plan-card summary, .panel summary {
  cursor: pointer; padding: var(--space-3) 0; font-size: var(--text-sm);
  font-weight: 600; color: var(--primary);
}
.survey-card summary:hover, .annual-plan-card summary:hover, .panel summary:hover { text-decoration: underline; }
.survey-card details, .annual-plan-card details, .panel details { border-top: 1px solid var(--border); }
.annual-plan-history summary { cursor: pointer; font-weight: 600; }
@media (max-width: 1000px) { .annual-plan-grid { grid-template-columns: 1fr; } }
.survey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-4); }
.survey-card { padding: var(--space-5); }
.survey-card h2, .survey-card h3 { margin: 0 0 8px; }
.survey-card form { display: grid; gap: var(--space-3); margin-top: 10px; }
.transfer-list { margin: 8px 0 0; padding-left: 18px; font-size: var(--text-sm); line-height: 1.7; }
.survey-card label { display: grid; gap: var(--space-2); color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.survey-card textarea.live-field { min-height: 64px; resize: vertical; }
.survey-slot { border-top: 1px solid var(--gray-100); padding: var(--space-4) 0; }
.survey-slot-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.survey-slot-actions form { flex: 1 1 210px; }
.survey-confirmations { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 8px 0; }
.survey-history { margin-top: 10px; padding: var(--space-3); background: var(--gray-50); border-radius: var(--radius-md); }
.survey-history summary { cursor: pointer; font-weight: 700; }

/* 人工發送。新元件自帶樣式 —— 只掛 JS 選擇器而不寫 CSS 的 class，
   外觀會變成「剛好被放在哪個祖先底下」，同一種表單在不同頁面長得不一樣。 */
.broadcast-roster {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-1);
}

.broadcast-person {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.broadcast-person:hover { background: var(--accent); }

.broadcast-person input { margin-top: 3px; flex: none; }

.broadcast-person span { display: grid; gap: 2px; }

.broadcast-person small {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* 字數提示逼近上限時轉為警示色。只靠顏色傳達狀態不符無障礙要求，
   因此文字本身一直顯示「已使用 N / 上限」。 */
.warning-hint { color: var(--warning); font-weight: 600; }

.broadcast-history-entry {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.broadcast-history-entry:last-child { border-bottom: none; }

.broadcast-history-entry p { margin: 0 0 var(--space-2); }

.broadcast-history-entry p:last-child { margin-bottom: 0; }

/* 人工發送步驟（ADR 0040）：收件人 → 發送方式 → 內容 → 預覽 → 確認。觸控目標至少 44px。 */
.broadcast-form { display: grid; gap: 0; }
.broadcast-form .step-section label { display: grid; gap: var(--space-2); color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.broadcast-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.broadcast-source { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--input); border-radius: 999px; background: var(--card); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.broadcast-source[aria-pressed="true"] { color: var(--primary-foreground); border-color: var(--primary); background: var(--primary); }
.broadcast-source[aria-pressed="true"]::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: 6px; vertical-align: -.1em; background: currentColor; -webkit-mask: var(--fa-mask-check) center / contain no-repeat; mask: var(--fa-mask-check) center / contain no-repeat; }
.broadcast-source:focus-visible, .broadcast-choice:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.broadcast-panel { min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.broadcast-panel legend { padding: 0 var(--space-2); font-weight: 700; }
.broadcast-panel .search-box { display: grid; min-width: 0; }
.broadcast-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.broadcast-form .step-section label.broadcast-person { display: flex; align-items: flex-start; min-height: 44px; font-weight: 400; color: var(--foreground); }
.broadcast-person input { width: 20px; height: 20px; }
.broadcast-presence.is-partial { color: var(--warning); font-weight: 600; }
.broadcast-typed-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.broadcast-typed-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 44px; }
.broadcast-masked { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.broadcast-typed-list li.is-duplicate { padding: var(--space-2) var(--space-3); border: 1px solid var(--warning); border-radius: var(--radius-md); background: var(--warning-bg); }
.broadcast-duplicate-note { flex: 1 1 100%; color: var(--warning); font-size: var(--text-sm); font-weight: 600; }
.broadcast-window-note { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--warning); background: var(--warning-bg); font-size: var(--text-sm); }
.broadcast-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.broadcast-choice { display: inline-flex !important; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground) !important; font-size: var(--text-sm) !important; cursor: pointer; }
.broadcast-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.broadcast-choice:has(input:checked) { border-color: var(--primary); background: #f1faf8; }
.broadcast-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.broadcast-coverage ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 18px; font-size: var(--text-sm); }
.broadcast-coverage .is-warning { color: var(--warning); font-weight: 600; }
.broadcast-coverage .is-error { color: var(--red-700); font-weight: 700; }
.broadcast-coverage .secondary-button { margin-left: var(--space-2); }
.broadcast-problems { margin: 0; color: var(--red-700); font-size: var(--text-sm); font-weight: 600; }
.broadcast-problems:empty { display: none; }
.broadcast-preview { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--primary); border-radius: var(--radius-lg); background: #f8fcfb; }
.broadcast-preview h2 { margin: 0; font-size: var(--text-lg); }
.broadcast-preview-card { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.broadcast-preview-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.broadcast-preview-card p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.broadcast-preview-text { white-space: pre-wrap; }
/* 全站內容畫面的輸入框是 40px；這個畫面在手機上大量點選，維持 44px 觸控目標。 */
.content-screen .broadcast-form input.live-field:not([type="checkbox"]):not([type="radio"]) { height: 44px; min-height: 44px; }
@media (max-width: 680px) {
  .broadcast-actions > button, .broadcast-choice { flex: 1 1 100%; justify-content: flex-start; }
  .broadcast-source { flex: 1 1 0; }
}

/* 施打團隊管理：以真實主檔呈現組織人力，異動表單固定在工作區側欄。 */
.team-summary {
  display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(220px, 2fr);
  align-items: center; gap: var(--space-4); margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--card);
}
.team-summary div { display: grid; gap: var(--space-1); }
.team-summary div span { color: var(--muted-foreground); font-size: var(--text-sm); }
.team-summary div b { font-size: var(--text-xl); line-height: var(--leading-xl); }
.team-summary p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); text-align: right; }
.team-filter { align-items: end; }
.team-filter label { display: grid; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.team-filter .team-checkbox { display: flex; min-height: 44px; align-items: center; gap: var(--space-2); color: var(--foreground); }
.team-filter input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); }
.team-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: var(--space-4); align-items: start; }
.team-list { display: grid; gap: var(--space-3); min-width: 0; }
.team-card, .team-editor, .team-empty { padding: var(--space-5); }
.team-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.team-card-heading .eyebrow { margin: 0 0 var(--space-1); letter-spacing: 0; text-transform: none; }
.team-card-heading h2, .team-editor h2, .team-empty h2 { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.team-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.team-details div { min-width: 0; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.team-details dt { color: var(--muted-foreground); font-size: var(--text-sm); }
.team-details dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.team-card-actions, .team-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.team-history-panel { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); color: var(--muted-foreground); }
.team-history-panel ol { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.25rem; }
.team-history-panel li { padding-left: var(--space-1); }
.team-history-panel li > strong { margin-right: var(--space-3); color: var(--foreground); }
.team-history-panel time { font-size: var(--text-sm); }
.team-history-panel p { margin: var(--space-1) 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.team-editor { position: sticky; top: var(--space-4); }
.team-editor > p, .team-empty p { color: var(--muted-foreground); }
.team-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.team-form > label, .team-staff-row label { display: grid; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.team-staffing { min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.team-staffing legend { padding: 0 var(--space-2); font-weight: 600; }
.team-staffing > .text-button { min-height: 44px; }
.team-staff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .45fr) auto; align-items: end; gap: var(--space-2); padding: var(--space-2) 0; }
.team-staff-row .live-field { width: 100%; min-width: 0; }
.team-form [role="status"] { min-height: 1.5em; margin: 0; color: var(--info); }
.team-form-actions { justify-content: flex-end; padding-top: var(--space-2); }
.team-card button, .team-form button { min-height: 44px; }
@media (max-width: 1050px) {
  .team-workspace { grid-template-columns: 1fr; }
  .team-editor { position: static; }
}
@media (max-width: 680px) {
  .team-page-heading { flex-direction: column; align-items: stretch; }
  .team-page-heading .primary-button { align-self: flex-start; min-width: max-content; white-space: nowrap; }
  .team-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-3); gap: var(--space-2); }
  .team-summary p { grid-column: 1 / -1; text-align: left; }
  .team-filter { align-items: stretch; }
  .team-details { grid-template-columns: 1fr; }
  .team-staff-row { grid-template-columns: minmax(0, 1fr) minmax(76px, .45fr); }
  .team-staff-row [data-remove-staff] { grid-column: 1 / -1; justify-self: start; }
  .team-editor, .team-card, .team-empty { padding: var(--space-4); }
}

/* Main workspace refresh: shadcn/ui proportions and component rhythm, using
   the platform's existing semantic color tokens. Sidebar and login stay intact. */
.main {
  min-width: 0;
  background: var(--background);
}

.content-screen {
  width: min(100%, 1680px);
  min-height: calc(100vh - 64px);
  margin-inline: auto;
  padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2.4vw, 36px) 48px;
  background: var(--background);
}

.page-heading {
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.page-heading > div:first-child { min-width: 0; }
.page-heading .eyebrow { margin-bottom: 6px; font-size: 12px; letter-spacing: .04em; }
.page-heading h1 {
  color: var(--foreground);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.page-heading p {
  max-width: 76ch;
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.65;
}
.page-heading > .tag { align-self: flex-start; margin-top: 2px; }
.content-screen h2 { color: var(--foreground); line-height: 1.4; }
.content-screen h3 { color: var(--foreground); line-height: 1.45; }
.content-screen p { line-height: 1.65; }

.content-screen .panel,
.content-screen .metric-card,
.content-screen .mini-metric,
.content-screen .team-summary,
.content-screen .file-card,
.content-screen .mode-card {
  border-color: var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(12 36 52 / 4%);
}
.content-screen .panel { min-width: 0; overflow: hidden; }
.content-screen .panel-head {
  min-height: 68px;
  gap: 16px;
  padding: 16px 20px;
  border-bottom-color: var(--border);
}
.content-screen .panel-head h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.content-screen .panel-head p { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.content-screen .metric-grid,
.content-screen .dashboard-grid,
.content-screen .detail-grid,
.content-screen .review-layout,
.content-screen .notification-layout,
.content-screen .assignment-grid,
.content-screen .report-grid,
.content-screen .provider-layout,
.content-screen .annual-plan-grid,
.content-screen .team-workspace,
.content-screen .survey-grid { gap: 16px; }
.content-screen .metric-grid,
.content-screen .people-metrics,
.content-screen .import-metrics,
.content-screen .provider-metrics { margin-bottom: 16px; }
.content-screen .metric-card { min-height: 96px; gap: 14px; padding: 16px; }
.content-screen .metric-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
.content-screen .metric-card span,
.content-screen .mini-metric span { font-size: 13px; font-weight: 550; }
.content-screen .metric-card b,
.content-screen .mini-metric b { font-size: 22px; font-variant-numeric: tabular-nums; }
.content-screen .metric-card small,
.content-screen .mini-metric small { font-size: 12px; }
.content-screen .mini-metric { min-height: 86px; padding: 14px 16px; }

.content-screen .primary-button,
.content-screen .secondary-button,
.content-screen .danger-outline,
.content-screen .filter-button,
.content-screen .small-button {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(12 36 52 / 6%);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.content-screen .primary-button {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}
.content-screen .primary-button:hover { background: var(--teal-600); box-shadow: 0 2px 5px rgb(8 127 117 / 18%); }
.content-screen .secondary-button,
.content-screen .filter-button {
  border-color: var(--input);
  color: var(--foreground);
  background: var(--card);
}
.content-screen .secondary-button:hover,
.content-screen .filter-button:hover { border-color: #bdc7cc; background: var(--muted); }
.content-screen .danger-outline { border-color: #e7b5b1; color: var(--destructive); background: var(--card); }
.content-screen .danger-outline:hover { border-color: var(--destructive); color: var(--destructive-foreground); background: var(--destructive); }
.content-screen button:disabled,
.content-screen button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.content-screen .text-button { min-height: 32px; padding-inline: 6px; font-size: 13px; }
.content-screen .button-row,
.content-screen .compact-actions,
.content-screen .team-card-actions,
.content-screen .team-form-actions { align-items: center; gap: 8px; }

.content-screen .live-field,
.content-screen .number-input input,
.content-screen .decision-card textarea,
.content-screen .phone-field,
.content-screen .search-box {
  border: 1px solid var(--input);
  border-radius: 8px;
  color: var(--foreground);
  background-color: var(--card);
  box-shadow: 0 1px 2px rgb(12 36 52 / 4%);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.content-screen .live-field,
.content-screen .number-input input { min-height: 36px; padding: 8px 12px; font-size: 14px; line-height: 1.4; }
.content-screen input.live-field,
.content-screen select.live-field { height: 40px; }
.content-screen textarea.live-field { min-height: 88px; padding-block: 10px; line-height: 1.55; }
.content-screen .live-field:focus,
.content-screen .number-input input:focus,
.content-screen .decision-card textarea:focus {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 3px rgb(11 151 138 / 16%);
}
.content-screen .live-field::placeholder { color: var(--gray-500); }
.content-screen form label,
.content-screen .toolbar label,
.content-screen .form-grid label > span {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.45;
}
.content-screen .annual-plan-card label,
.content-screen .survey-card label,
.content-screen .team-form > label,
.content-screen .team-staff-row label { font-size: 13px; }
.content-screen input[type="checkbox"],
.content-screen input[type="radio"] { accent-color: var(--primary); }

.content-screen .toolbar {
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--card);
}
.content-screen .toolbar label { gap: 6px; }
.content-screen .toolbar .search-box { min-width: min(280px, 100%); }
.content-screen .toolbar .search-box .live-field { min-width: 0; }
.content-screen .toolbar button { align-self: flex-end; }
.content-screen .panel:not(.survey-card) > form:not(.toolbar) { gap: 16px; padding: 20px; }
.content-screen .panel form fieldset { gap: 14px; }
.content-screen .form-grid { gap: 16px; padding: 20px; }
.content-screen .form-grid label > span { margin-bottom: 4px; }
.content-screen .annual-plan-card,
.content-screen .survey-card,
.content-screen .decision-card,
.content-screen .rule-card,
.content-screen .team-card,
.content-screen .team-editor,
.content-screen .team-empty,
.content-screen .action-card,
.content-screen .policy-card,
.content-screen .preview-card,
.content-screen .direct-card { padding: 20px; }
.content-screen .annual-plan-card h2,
.content-screen .survey-card h2,
.content-screen .survey-card h3 { margin-bottom: 12px; font-size: 17px; }
.content-screen .annual-plan-card form,
.content-screen .survey-card form { gap: 12px; margin-top: 14px; }
.content-screen .annual-plan-grid { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.4fr); }
.content-screen .survey-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.content-screen .scope-callout { border-radius: 10px; padding: 12px 16px; font-size: 13px; }
.content-screen .empty-live { padding: 40px 20px; color: var(--muted-foreground); font-size: 14px; }

.content-screen .table-panel { overflow: auto; }
.content-screen table { min-width: 680px; }
.content-screen th {
  padding: 11px 14px;
  color: var(--muted-foreground);
  background: #f8f9fa;
  border-bottom-color: var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.content-screen td {
  padding: 13px 14px;
  color: var(--gray-700);
  border-bottom-color: #edf0f1;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: middle;
}
.content-screen tbody tr { transition: background-color .12s ease; }
.content-screen tbody tr:hover { background: #f8fbfa; }
.content-screen td b { font-size: 14px; font-weight: 600; }
.content-screen td small { font-size: 12px; line-height: 1.5; }
.content-screen .tag {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.content-screen .large-tag { min-height: 28px; padding: 5px 10px; font-size: 13px; }
.content-screen .tabs { gap: 24px; padding-inline: 20px; }
.content-screen .tabs span { padding: 13px 0; font-size: 13px; }
.content-screen .tabs span.active::after { height: 2px; border-radius: 2px 2px 0 0; }
.content-screen .stepper,
.content-screen .import-stepper { padding: 20px 24px 16px; border-color: var(--border); border-radius: 12px; }
.content-screen .stepper > div,
.content-screen .import-stepper > div { font-size: 12px; }
.content-screen .panel details > summary,
.content-screen .survey-card summary,
.content-screen .annual-plan-card summary { min-height: 40px; padding: 10px 0; font-size: 14px; }
.content-screen .panel details,
.content-screen .survey-card details,
.content-screen .annual-plan-card details { border-top-color: var(--border); }
.content-screen [role="status"],
.content-screen [role="alert"] { overflow-wrap: anywhere; }
.content-screen [role="status"]:empty,
.content-screen [role="alert"]:empty { display: none; }

@media (max-width: 1100px) {
  .content-screen { padding-inline: 22px; }
  .content-screen .annual-plan-grid { grid-template-columns: 1fr; }
  .content-screen .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .content-screen { min-height: calc(100vh - 64px); padding: 20px 16px 32px; }
  .page-heading { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; }
  .page-heading > .tag { align-self: flex-start; }
  .content-screen .panel-head { align-items: flex-start; padding: 14px 16px; }
  .content-screen .panel-head .compact-actions { flex-wrap: wrap; justify-content: flex-end; }
  .content-screen .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
  .content-screen .toolbar .search-box { grid-column: 1 / -1; min-width: 0; }
  .content-screen .toolbar button { align-self: end; }
  .content-screen .form-grid { grid-template-columns: 1fr; padding: 16px; }
  .content-screen .metric-card { min-height: 84px; padding: 12px; }
  .content-screen .dashboard-grid,
  .content-screen .detail-grid,
  .content-screen .review-layout,
  .content-screen .notification-layout,
  .content-screen .assignment-grid,
  .content-screen .report-grid,
  .content-screen .provider-layout,
  .content-screen .team-workspace { grid-template-columns: minmax(0, 1fr); }
  .content-screen .team-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content-screen .team-summary p { grid-column: 1 / -1; text-align: left; }
  .content-screen .table-panel { border-radius: 10px; }
  .content-screen .panel:not(.survey-card) > form:not(.toolbar) { padding: 16px; }
}
@media (max-width: 480px) {
  .content-screen { padding-inline: var(--gutter-phone); }
  .content-screen .metric-grid { gap: 10px; }
  .content-screen .metric-card { align-items: flex-start; gap: 9px; }
  .content-screen .metric-icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .content-screen .metric-card b { font-size: 19px; }
  .content-screen .toolbar { grid-template-columns: 1fr; }
  .content-screen .toolbar .search-box { grid-column: auto; }
  .content-screen .toolbar button { justify-self: start; }
  .content-screen .team-summary { grid-template-columns: 1fr 1fr; }
  .content-screen .button-row,
  .content-screen .team-card-actions,
  .content-screen .team-form-actions { flex-wrap: wrap; }
  .content-screen .primary-button,
  .content-screen .secondary-button,
  .content-screen .danger-outline,
  .content-screen .filter-button { min-height: 40px; }
}

/* Follow-up UX pass: align search/filter controls, keep long content readable,
   and give dynamic proposal lists the same card rhythm as the rest of the app. */
.content-screen > .panel { margin-block: 16px; }
.content-screen > .page-heading + .panel,
.content-screen > .page-heading + form.panel { margin-top: 0; }
.content-screen h2 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.content-screen h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.content-screen h4 { margin: 0 0 8px; color: var(--foreground); font-size: 14px; font-weight: 650; line-height: 1.45; }
.content-screen p { max-width: 78ch; margin-block: 6px; text-wrap: pretty; }
/* 頁首說明與「與您的關係」不設寬度上限（2026-10-14）：長度靠文案控制（每句約 60 字內），
   不靠 78ch 折行；1 個中文字約 2ch，78ch 會在約 39 字處斷行。內文、步驟說明與表單仍保留上限。 */
.content-screen .page-heading p,
.content-screen .page-heading .page-intro-role { max-width: none; }
/* 頁首正下方的提醒（notice 直接放在畫面根層）同樣是頁首的一部分：文字已精簡，不在半寬處折行。 */
.content-screen > .notice p { max-width: none; }
.content-screen p:empty { display: none; }
.content-screen button,
.content-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.content-screen select,
.content-screen textarea {
  font: inherit;
}
.content-screen button:not([class]) {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--input);
  border-radius: 8px;
  color: var(--foreground);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.content-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.content-screen select,
.content-screen textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  color: var(--foreground);
  background: var(--card);
  font-size: 14px;
  line-height: 1.45;
}
.content-screen textarea { min-height: 92px; resize: vertical; }
.content-screen input:focus-visible,
.content-screen select:focus-visible,
.content-screen textarea:focus-visible,
.content-screen button:focus-visible,
.content-screen a:focus-visible,
.content-screen summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 28%, transparent);
  outline-offset: 2px;
}
.content-screen .panel:not(.survey-card) > form:not(.toolbar) { align-items: end; }
.content-screen .panel:not(.survey-card) > form:not(.toolbar) > button { min-height: 40px; }
.content-screen #publish-preview-status {
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}

.content-screen .panel > [role="status"]:not(:empty),
.content-screen .panel > [role="alert"]:not(:empty) { margin: 0 20px 16px; padding: 10px 12px; border-radius: 8px; background: var(--muted); }
.content-screen .panel > [role="alert"]:not(:empty) { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 8%, var(--card)); }

@media (max-width: 420px) {
  .content-screen .page-heading h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .content-screen *, .content-screen *::before, .content-screen *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Role test start: make data source, search, and next actions feel like one task. */
.content-screen #uat-workspace { display: grid; gap: 12px; }
.content-screen #uat-workspace > h1 { margin: 0 0 2px; font-size: clamp(24px, 2vw, 30px); line-height: 1.25; }
.content-screen #uat-workspace > p:not(.uat-live-summary) { max-width: 82ch; margin: 0; padding: 2px 20px 6px; color: var(--muted-foreground); line-height: 1.6; }
.content-screen #uat-workspace > ol { margin: 0 20px 6px; padding-left: 22px; color: var(--muted-foreground); font-size: 13px; line-height: 1.65; }
.content-screen #uat-workspace .uat-data-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 20px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #f8fbfa; }
.content-screen .uat-data-mode > strong { flex: 0 0 100%; color: var(--foreground); font-size: 12px; }
.content-screen .uat-mode-option { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--foreground); background: var(--card); font-size: 13px; text-decoration: none; }
.content-screen .uat-mode-option:hover { border-color: var(--primary); color: var(--primary); }
.content-screen .uat-mode-option.is-active { border-color: var(--primary); color: var(--primary); background: #e9f5f3; font-weight: 650; }
.content-screen .uat-mode-option small { color: var(--muted-foreground); font-size: 11px; font-weight: 450; }
.content-screen .uat-store-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 0 20px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted); }
.content-screen .uat-store-search label { display: grid; gap: 6px; color: var(--foreground); font-size: 13px; font-weight: 600; }
.content-screen .uat-store-search input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--input); border-radius: 8px; color: var(--foreground); background: var(--card); font: inherit; font-weight: 400; }
.content-screen .uat-store-search button { align-self: end; }
.content-screen .uat-live-summary { margin: 0 20px !important; padding: 0 !important; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.content-screen .uat-next-page { justify-self: start; margin: 0 20px; }
.content-screen #uat-actions { display: grid; justify-items: start; gap: 12px; padding: 4px 20px 20px; }
.content-screen #uat-actions > p { max-width: 82ch; margin: 0; padding: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.content-screen #uat-actions > p:has(> a.primary-button) a.primary-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; }
.content-screen #uat-actions > p:has(> a:not(.primary-button)) a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 7px; }
.content-screen #uat-actions > p:has(> a:not(.primary-button)) a:hover { background: #e9f5f3; }
.content-screen #uat-actions .uat-action-card { width: min(100%, 900px); margin: 0; padding: 18px 20px; }
.content-screen .uat-action-card > h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.content-screen .uat-action-card > .uat-action-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; margin: 12px 0 0; padding: 0; }
.content-screen .uat-action-form .uat-field { display: grid; min-width: 0; gap: 6px; margin: 0; color: var(--foreground); font-size: 13px; font-weight: 600; line-height: 1.45; }
.content-screen .uat-action-form > button { justify-self: start; }
.content-screen #uat-actions .uat-action-card > .uat-action-status:not(:empty) { max-width: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; color: var(--foreground); background: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.content-screen .uat-action-status a { color: var(--primary); font-weight: 650; }
@media (max-width: 760px) {
  .content-screen .uat-store-search { grid-template-columns: minmax(0, 1fr); }
  .content-screen .uat-store-search button { justify-self: start; }
  .content-screen .uat-data-mode { align-items: stretch; }
  .content-screen .uat-mode-option { width: 100%; justify-content: space-between; }
}

/* Shared navigation and feedback: keep the work surface usable at every width. */
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px; color: white; background: var(--navy-950); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
body[data-current-screen="login"] .skip-link { display: none; }
.navigation-toggle, .navigation-close, .navigation-backdrop { display: none; }
.sidebar-user { cursor: default; }
.sidebar-user b { overflow-wrap: anywhere; }
.sidebar-logout { min-height: 40px; }
.sidebar a:focus-visible { outline-color: #7fddd1; outline-offset: -2px; }
.topbar { gap: 14px; }
.breadcrumb { min-width: 0; flex: 1; line-height: 1.5; }
.platform-notice {
  position: fixed; z-index: 60; right: 24px; bottom: 24px;
  display: flex; align-items: flex-start; gap: 12px;
  width: max-content; max-width: min(460px, calc(100vw - 32px));
  padding: 14px 14px 14px 18px; border: 1px solid #315363;
  border-radius: 12px; color: white; background: var(--navy-950);
  box-shadow: 0 8px 28px rgb(12 36 52 / 20%); font-size: 14px; line-height: 1.6;
}
.platform-notice-error { background: #8e302e; border-color: #ac514c; }
.platform-notice-message { min-width: 0; align-self: center; overflow-wrap: anywhere; }
.platform-notice-dismiss { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 6px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 7px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.platform-notice-dismiss:hover { background: rgb(255 255 255 / 12%); }
.platform-notice-dismiss:focus-visible { outline-color: white; }
.content-screen :is(h1,h2,h3) { text-wrap: balance; }
.content-screen :is(p,small,summary,td) { overflow-wrap: anywhere; }
.content-screen :is(button,a.primary-button,a.secondary-button) { white-space: normal; line-height: 1.45; }
.content-screen :is(.button-row,.compact-actions) { flex-wrap: wrap; }
.content-screen details > summary:focus-visible { outline-offset: -3px; }
.content-screen .history-status { margin: 12px 0; color: var(--muted-foreground); }
.content-screen .history-status[role="alert"] { color: var(--destructive); }
.content-screen label.search-box:has(.live-field) { display: grid; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.content-screen .panel.annual-plan-card > form { padding: 0; margin-top: 20px; }
.content-screen .panel.annual-plan-card > p { padding: 0; margin: 8px 0 16px; }
.content-screen #annual-plan-prior > p { margin: 0; color: var(--muted-foreground); font-size: 13px; }
.content-screen .scope-callout { align-items: flex-start; }
.content-screen .scope-callout > :is(strong,b) { flex-shrink: 0; }
@media (max-width: 1000px) {
  .navigation-toggle { display: grid; flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .navigation-close { display: flex; align-items: center; gap: 8px; align-self: flex-end; min-height: 44px; margin-bottom: 12px; border: 1px solid var(--sidebar-border); border-radius: 8px; padding: 0 12px; color: white; background: transparent; }
  .sidebar { display: flex; width: min(320px, calc(100vw - 40px)); z-index: 50; visibility: hidden; transform: translateX(-100%); }
  .navigation-open { overflow: hidden; }
  .navigation-open .platform-notice { visibility: hidden; }
  .navigation-open .sidebar { visibility: visible; transform: none; box-shadow: 12px 0 40px rgb(12 36 52 / 20%); }
  .navigation-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 49; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgb(12 36 52 / 48%); }
  .sidebar nav a { min-height: 44px; height: auto; padding-block: 10px; }
  .topbar { height: auto; min-height: 64px; padding: 10px 16px; }
}
@media (max-width: 600px) {
  .top-actions .today { display: none; }
  .top-actions { gap: 6px; }
  .topbar { gap: 10px; }
  .breadcrumb { font-size: 12px; }
  .content-screen :is(.primary-button,.secondary-button,.danger-outline,.small-button,.text-button) { min-height: 44px; }
  .content-screen :is(input.live-field,select.live-field,textarea.live-field) { font-size: 16px; }
  .platform-notice { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .login-brand { padding: 24px; }
  .login-layout { width: calc(100% - 32px); }
  .login-card { padding: 24px 20px; }
  .login-help { align-items: flex-start; flex-direction: column; gap: 8px; }
  .phone-field input { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 稽核紀錄（ADR 0031）：細節欄是 allowlist 內的代碼與內部代號，摺疊顯示。 */
.audit-log-table code { font-size: 12px; word-break: break-all; }
.audit-log-table dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 0; font-size: 12px; }
.audit-log-table dt { color: var(--muted-foreground); }
.audit-log-table dd { margin: 0; word-break: break-all; }
#audit-log-pager { padding: 12px 16px; }

/* Operational workspaces: compact search and readable personnel results. */
.content-screen #location-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.content-screen #location-search > label { min-width: 0; }
.content-screen :is(#personnel-applications, #personnel-role-changes, #personnel-members) {
  display: grid;
  gap: 12px;
  padding: 16px 20px 20px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.6;
}
.content-screen :is(#personnel-applications, #personnel-role-changes, #personnel-members) > .panel {
  min-width: 0;
  margin: 0;
  padding-top: 16px;
  border-radius: 8px;
  box-shadow: none;
  color: var(--foreground);
}
.content-screen :is(#personnel-applications, #personnel-role-changes, #personnel-members) > .panel > small {
  display: block;
  padding: 0 20px 12px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.content-screen :is(#personnel-applications, #personnel-role-changes, #personnel-members) > .panel > form + form {
  border-top: 1px solid var(--border);
}
.content-screen #personnel-pagination:not(:empty) { display: flex; justify-content: flex-end; margin-block: 16px; }
.content-screen #personnel-pagination > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--card);
}
/* Disabled controls must not advertise an available destructive action on hover. */
.content-screen .primary-button:disabled:hover { background: var(--primary); box-shadow: none; }
.content-screen :is(.secondary-button,.filter-button):disabled:hover { background: var(--card); border-color: var(--input); }
.content-screen .danger-outline:disabled:hover { background: var(--card); border-color: #e7b5b1; color: var(--destructive); }
@media (max-width: 640px) {
  .content-screen #location-search { grid-template-columns: minmax(0, 1fr); }
  .content-screen #location-search > button { justify-self: start; }
  .content-screen :is(#personnel-applications, #personnel-role-changes, #personnel-members) { padding: 12px; }
  .content-screen #personnel-pagination > a { min-height: 44px; }
}
.content-screen .panel:has(> :is(#location-search, #personnel-request, #personnel-applications, #personnel-role-changes, #personnel-members)) > h2 {
  margin: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

/* Organization draft editor: controls wrap without horizontal page scrolling. */
.draft-fields,.draft-row { min-width:0; border:0; padding:0; margin:0 0 20px; }
.draft-fields>legend,.draft-row>legend { font-weight:600; margin-bottom:12px; }
.draft-row { border-top:1px solid var(--border,#dce3e5); padding-top:16px; }
.draft-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.draft-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
@media(max-width:640px) { .draft-grid { grid-template-columns:1fr; } }

.content-screen #organization-draft-form > .draft-fields { padding:20px; margin:0; }
.content-screen #organization-draft-form > .draft-actions { padding:0 20px 20px; margin:0; }

/* 個資保存期限（production 最高管理者） */
.retention-panel .retention-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-3); }
.retention-panel .filter-button[aria-pressed="true"] { color: var(--teal-700); border-color: var(--teal-600); background: #f2fbf9; font-weight: 700; }
.retention-panel .retention-status { padding: 0 var(--space-5) var(--space-3); font-weight: 600; }
.retention-panel .retention-table { overflow-x: auto; padding: 0 var(--space-5) var(--space-3); }
.retention-panel td small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-xs); }
.retention-panel [data-more] { margin: 0 var(--space-5) var(--space-5); }
.retention-dialog { width: min(480px, calc(100vw - 32px)); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); }
.retention-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.retention-dialog form { display: grid; gap: var(--space-4); padding: 0; }
.retention-dialog h3 { margin: 0; }
.retention-dialog p { margin: 0; }
.retention-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.retention-warning { color: var(--warning); font-size: var(--text-sm); }
.retention-error:empty { display: none; }
.retention-error { color: var(--destructive); font-weight: 600; }
/* Touch targets and narrow screens for the retention panel and the clear-contact form. */
.content-screen .retention-panel .filter-button,
.content-screen .retention-panel .secondary-button,
.content-screen .retention-dialog .secondary-button,
.content-screen .retention-dialog .primary-button,
.content-screen #encrypted-contact-update button { min-height: 44px; white-space: nowrap; }
.retention-dialog fieldset label,
#encrypted-contact-update fieldset label,
#encrypted-contact-update label.checkbox { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.retention-dialog input[type="radio"],
#encrypted-contact-update input[type="radio"],
#encrypted-contact-update input[type="checkbox"] { flex: none; width: 20px; height: 20px; }
.retention-panel .retention-table table { min-width: 100%; }
.retention-panel td small { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .retention-panel .retention-table { padding-inline: var(--space-3); }
  .retention-panel .retention-table :is(th, td) { padding: 10px 6px; }
  .retention-panel .retention-table td:first-child { min-width: 9em; }
  .retention-dialog { padding: var(--space-4); }
  .retention-actions > button { flex: 1 1 120px; }
}
.retention-panel time { white-space: nowrap; }
.retention-dialog fieldset, #encrypted-contact-update fieldset { display: grid; gap: 0; }

/* 人員名單：管理者可見的姓名、遮罩聯絡資料與搜尋 */
.people-tools { display: grid; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); }
.people-tools [hidden] { display: none !important; }
.people-table tr[hidden] { display: none; }
.directory-notice { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid #f0d9a8; border-radius: var(--radius-md); color: #6e4000; background: var(--warning-bg); font-size: var(--text-sm); }
.people-search { display: grid; gap: var(--space-1); max-width: 420px; color: var(--foreground); font-size: var(--text-sm); font-weight: 700; }
.people-search input { box-sizing: border-box; width: 100%; min-height: 44px; }
.people-search-count { min-height: 1.4em; margin: 0; color: var(--gray-700); font-size: var(--text-sm); }
.people-table .person-name { display: block; font-size: var(--text-lg); line-height: var(--leading-lg); overflow-wrap: anywhere; }
.people-table .person-cell > div { min-width: 0; }
.people-table .person-cell small { display: block; overflow-wrap: anywhere; color: var(--gray-700); }
.people-table .person-contact span { display: inline-block; min-width: 3.2em; color: var(--gray-700); font-weight: 700; }
.people-table .person-contact i { font-style: normal; color: var(--gray-600); }
.people-table .directory-state { color: var(--warning); font-weight: 700; }
@media (max-width: 760px) {
  .people-tools { padding: var(--space-3); }
  .people-search { max-width: none; }
}
.table-panel:has(.people-table) { overflow-x: auto; }
.people-table td:first-child { min-width: 230px; }
.people-table td:nth-child(2) { min-width: 150px; }
.people-table .person-contact { white-space: nowrap; }
@media (max-width: 760px) { .people-table { min-width: 760px; } }

/* 人員名錄：每位使用者可見的直系行政階層名單；窄螢幕改為卡片，不產生頁面橫向捲動 */
.directory-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
.directory-panel [hidden] { display: none !important; }
.directory-panel > p, .directory-panel > .directory-note { margin: 0; padding: 0; }
.directory-note { color: var(--gray-700); font-size: var(--text-sm); }
.content-screen .panel.directory-panel > [role="alert"]:not(:empty) { margin: 0; }
.directory-error { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid #f0d9a8; border-radius: var(--radius-md); color: #6e4000; background: var(--warning-bg); font-size: var(--text-base); }
.directory-panel > .secondary-button { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.directory-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-4); }
.directory-search { flex: 1 1 280px; }
.directory-panel .directory-search input.live-field { height: 44px; min-height: 44px; }
.directory-count { min-height: 1.4em; margin: 0 0 10px; color: var(--gray-700); font-size: var(--text-sm); }
.directory-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.directory-table:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.directory-table tr[hidden] { display: none; }
.directory-table td { vertical-align: top; font-size: var(--text-sm); }
.directory-table tbody tr:last-child td { border-bottom: 0; }
.directory-table .person-name { display: inline; color: var(--gray-950); font-size: var(--text-base); overflow-wrap: anywhere; }
.directory-table .directory-name small { display: block; }
.directory-table .directory-name-state { color: var(--warning); }
.directory-table .directory-name .tag { margin-left: var(--space-1); vertical-align: 2px; }
.directory-memberships { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.directory-memberships b { overflow-wrap: anywhere; }
.directory-contact { white-space: nowrap; }
.directory-contact i { font-style: normal; color: var(--gray-600); }
/* 完整聯絡資料（ADR 0043）：按鈕、未授權原因、揭露後的文字；明文只存在於這些文字節點。 */
.full-contact { display: grid; gap: 2px; }
.full-contact:focus { outline: 2px solid var(--blue-700); outline-offset: 2px; border-radius: 4px; }
.full-contact-line { white-space: nowrap; }
.full-contact-line > span { display: inline-block; min-width: 3.2em; color: var(--gray-700); font-weight: 700; }
.full-contact-line i { font-style: normal; color: var(--gray-600); }
.full-contact-reason, .full-contact-recorded, .full-contact-error { display: block; color: var(--gray-600); font-size: var(--text-xs); }
.full-contact-error { color: var(--red-700); }
.people-table .full-contact { margin-top: 2px; }
.directory-empty { border: 1px dashed var(--input); border-radius: var(--radius-md); text-align: center; }
@media (max-width: 760px) {
  .directory-panel { padding: var(--space-3); }
  .directory-table { overflow: visible; border: 0; }
  .directory-table table, .directory-table tbody { display: block; width: 100%; min-width: 0; }
  .directory-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .directory-table tbody { display: grid; gap: var(--space-2); }
  .directory-table tr { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
  .directory-table td { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--space-2); padding: 0; border: 0; }
  .directory-table td::before { content: attr(data-label); color: var(--gray-500); font-size: var(--text-xs); font-weight: 700; line-height: 1.9; }
  .directory-table td.directory-name { display: block; }
  .directory-table td.directory-name::before { content: none; }
  .directory-table td.is-empty { display: none; }
  .directory-contact { white-space: normal; overflow-wrap: anywhere; }
  .full-contact-line { white-space: normal; overflow-wrap: anywhere; }
}

/* 機關建立（key-in）：逐步表單；窄螢幕單欄，所有點擊目標至少 44px，無橫向捲動 */
.keyin-panel { min-width: 0; }
.keyin-panel [hidden] { display: none !important; }
.keyin-title { margin: 0; padding: var(--space-4) var(--space-5) 0; font-size: var(--text-lg); }
.keyin-form { min-width: 0; }
.content-screen .keyin-form input.live-field, .content-screen .keyin-form select.live-field { height: 44px; min-height: 44px; }
.keyin-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.keyin-form legend, .keyin-step > label { margin-bottom: var(--space-2); padding: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 700; }
.keyin-step { display: grid; gap: var(--space-2); min-width: 0; }
.keyin-kind-grid, .keyin-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.keyin-choice-grid.keyin-counties { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
.panel form label.keyin-kind, .panel form label.keyin-choice, .keyin-kind, label.keyin-choice {
  display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; min-width: 0; box-sizing: border-box;
  padding: var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card);
  color: var(--foreground); font-weight: 400; cursor: pointer;
}
.keyin-kind input, .keyin-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); }
.keyin-kind span, .keyin-choice span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.keyin-kind small, .keyin-choice small { color: var(--muted-foreground); font-size: var(--text-xs); }
.keyin-kind:has(input:checked), .keyin-choice:has(input:checked) { border-color: var(--primary); background: var(--accent); box-shadow: inset 0 0 0 1px var(--primary); }
.keyin-kind:has(input:focus-visible), .keyin-choice:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.keyin-choice:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.keyin-form [aria-invalid="true"] { outline: 2px solid var(--destructive); outline-offset: 1px; }
a.keyin-kind-link { border-style: dashed; color: var(--blue-700); text-decoration: none; }
a.keyin-kind-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.keyin-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-xs); overflow-wrap: anywhere; }
.keyin-preview { padding: var(--space-4); border: 1px solid #cfe5e2; border-radius: var(--radius-md); background: #f1faf8; }
.keyin-preview h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.keyin-preview dl, .keyin-success dl { display: grid; gap: var(--space-2); margin: 0; }
.keyin-preview dl > div, .keyin-success dl > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: var(--space-2); }
.keyin-preview dt, .keyin-success dt { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 700; line-height: 1.9; }
.keyin-preview dd, .keyin-success dd { margin: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.keyin-code-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.keyin-error:empty, .keyin-status:empty { display: none; }
.keyin-error { margin: 0; padding: var(--space-3); border: 1px solid #f2c9c6; border-radius: var(--radius-md); color: var(--red-700, #9b2c27); background: #fdf0ef; font-size: var(--text-sm); }
.keyin-status { margin: 0; color: var(--info); font-size: var(--text-sm); }
.keyin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keyin-actions .primary-button, .keyin-actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; text-decoration: none; }
.keyin-success { margin-top: var(--space-4); border-color: var(--success); }
.keyin-success:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.keyin-success-body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.keyin-success h2 { margin: 0; color: var(--success); font-size: var(--text-lg); }
.keyin-assigned { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.keyin-code { padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); font-size: var(--text-xl); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (max-width: 760px) {
  .keyin-title { padding: var(--space-3) var(--space-3) 0; }
  .panel:not(.survey-card) > form.keyin-form { padding: var(--space-3); }
  .keyin-success-body { padding: var(--space-3); }
  .keyin-actions > * { flex: 1 1 100%; }
}

/* 機關建立：醫療院所卡片（健保特約名單搜尋建立）；結果按鈕至少 44px、窄螢幕單欄 */
.keyin-medical { margin-top: var(--space-4); }
.keyin-medical-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.keyin-medical-body .keyin-step > label { font-size: var(--text-sm); font-weight: 700; }
.keyin-medical-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px dashed var(--input); border-radius: var(--radius-md); }
.keyin-medical-source .keyin-hint { flex: 1 1 240px; }
.keyin-medical-source .secondary-button, .keyin-medical-body .primary-button { min-height: 44px; }
.keyin-medical-results { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.keyin-medical-results:empty { display: none; }
.keyin-medical-option {
  display: grid; gap: 2px; width: 100%; min-height: 44px; box-sizing: border-box; padding: var(--space-3);
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground);
  font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.keyin-medical-option b { font-size: var(--text-sm); }
.keyin-medical-option small { color: var(--muted-foreground); font-size: var(--text-xs); }
.keyin-medical-option[aria-pressed="true"] { border-color: var(--primary); background: var(--accent); box-shadow: inset 0 0 0 1px var(--primary); }
.keyin-medical-option:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.keyin-medical-option:disabled { cursor: not-allowed; opacity: .6; }
.keyin-medical-flag { color: var(--warning, #8a5a00); font-size: var(--text-xs); font-style: normal; font-weight: 700; }
.keyin-medical-success:not([hidden]) { display: block; border-top: 1px solid var(--border, #e2e8f0); }
/* 機關建立 › Excel 批次建立（ADR 0045） */
.keyin-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); border-bottom: 1px solid var(--border, #e2e8f0); }
.keyin-tabs .keyin-tab { min-height: 44px; padding: 0 var(--space-4); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.keyin-tabs .keyin-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.keyin-tabs .keyin-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.keyin-batch-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.keyin-batch-steps { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.4em; font-size: var(--text-sm); }
.keyin-batch-steps li { display: grid; gap: var(--space-2); }
.keyin-batch-steps label { font-weight: 700; }
.keyin-batch-body input[type="file"] { min-height: 44px; max-width: 100%; padding: var(--space-2); }
.keyin-batch-plan { display: grid; gap: var(--space-3); }
.keyin-batch-plan h3, .keyin-batch-plan h4, .keyin-success h4 { margin: 0; font-size: var(--text-base); }
.keyin-batch-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keyin-batch-chip { padding: var(--space-1) var(--space-3); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.keyin-batch-chip[data-tone="create"] { border-color: #cfe5e2; background: #f1faf8; color: var(--teal-700); }
.keyin-batch-chip[data-tone="error"] { border-color: #f2c9c6; background: #fdf0ef; color: var(--red-700, #9b2c27); }
.keyin-batch-issues ul { margin: var(--space-2) 0 0; padding-left: 1.2em; color: var(--red-700, #9b2c27); font-size: var(--text-sm); }
.keyin-batch-table-wrap { max-width: 100%; overflow-x: auto; }
.keyin-batch-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); }
.keyin-batch-table th, .keyin-batch-table td { padding: var(--space-2); border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.keyin-batch-table th { color: var(--muted-foreground); font-size: var(--text-xs); }
.keyin-batch-row-error td { background: #fdf0ef; }
.keyin-batch-row-error td:first-child { box-shadow: inset 3px 0 0 var(--destructive); }
.keyin-batch-cell-errors { margin: var(--space-1) 0 0; padding-left: 1.1em; color: var(--red-700, #9b2c27); font-size: var(--text-xs); }
.keyin-batch-warning { display: block; color: var(--warning, #8a5a00); font-size: var(--text-xs); }
.keyin-batch-confirm { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid #f3dcb0; border-radius: var(--radius-md); background: #fff8e8; font-size: var(--text-sm); }
.keyin-batch-code { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.keyin-batch-success:not([hidden]) { display: block; border-top: 1px solid var(--border, #e2e8f0); }
@media (max-width: 680px) {
  .keyin-batch-body { padding: var(--space-3); }
  .keyin-tabs .keyin-tab { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .keyin-medical-body { padding: var(--space-3); }
  .keyin-medical-source .secondary-button { flex: 1 1 100%; }
}
/* 委託資格：新增委託表單（ADR 0036 直屬上級鏈）；日期兩欄、窄螢幕單欄，點擊目標至少 44px */
.eligibility-create { margin-bottom: var(--space-4); }
.eligibility-create-body textarea.live-field { width: 100%; min-height: 88px; box-sizing: border-box; }
.eligibility-create-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.eligibility-create-existing { padding: var(--space-3); border: 1px dashed var(--input); border-radius: var(--radius-md); }
.eligibility-create-existing h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.eligibility-create-existing ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.eligibility-create-existing li { display: grid; gap: 2px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.eligibility-create-existing li span { color: var(--muted-foreground); font-size: var(--text-xs); }
.eligibility-create-existing li.is-same-center b::after { content: "（所選衛生所）"; color: var(--warning, #8a5a00); font-weight: 700; }
.eligibility-create-success:not([hidden]) { display: block; border-top: 1px solid var(--border, #e2e8f0); }
@media (max-width: 760px) {
  .eligibility-create-body { padding: var(--space-3); }
}
/* ── 通知設定（ADR 0038）：即時／排程事件卡、規則卡、單則簡訊字數、版本紀錄抽屜 ── */
.ns-savebar-spacer { height: 200px; }
.ns-heading { gap: var(--space-3); flex-wrap: wrap; }
.ns-heading > button { flex: 0 0 auto; }
.ns-intro { margin: 0 0 var(--space-4); color: var(--muted-foreground); font-size: var(--text-sm); }
.ns-group-section { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); min-width: 0; }
.ns-group-section > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--text-lg); }
.ns-group-section > h2 small { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 400; }
.ns-event { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ns-event.has-problem { border-color: var(--destructive); }
.ns-event > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 56px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.ns-event > summary::-webkit-details-marker { display: none; }
.ns-event > summary::after { content: "展開"; color: var(--info); font-size: var(--text-xs); font-weight: 700; }
.ns-event[open] > summary::after { content: "收合"; }
.ns-event > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ns-event-title { font-weight: 700; }
.ns-event-meta { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); }
.ns-event.has-problem .ns-event-meta { color: var(--destructive); font-weight: 700; }
.ns-event-body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); min-width: 0; }
.ns-rules { display: grid; gap: var(--space-3); min-width: 0; }
.ns-rule { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--gray-50); }
.ns-rule.is-off { background: var(--muted); border-style: dashed; }
.ns-rule.is-off .ns-editor, .ns-rule.is-off .ns-group { opacity: .62; }
.ns-rule.has-problem { border-color: var(--destructive); box-shadow: inset 3px 0 0 var(--destructive); }
.ns-rule.is-deleted { opacity: .8; }
.ns-rule-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); min-width: 0; }
.ns-label-field { flex: 1 1 240px; }
.ns-field { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); font-weight: 600; }
.ns-field > span { display: flex; align-items: center; gap: var(--space-2); }
.content-screen .ns-field input.live-field, .content-screen .ns-field select.live-field { min-height: 44px; height: 44px; }
.ns-field textarea, .ns-sms-box textarea { width: 100%; min-height: 88px; padding: var(--space-2) var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-base); line-height: var(--leading-base); resize: vertical; }
.ns-rule [aria-invalid="true"] { outline: 2px solid var(--destructive); outline-offset: 1px; }
.ns-badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-xs); font-weight: 600; }
.ns-badge.is-custom { background: var(--info-bg); color: var(--info); }
.ns-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--input); border-radius: 999px; background: var(--card); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.ns-switch input { width: 36px; height: 20px; margin: 0; accent-color: var(--primary); }
.ns-switch:has(input:checked) { border-color: var(--primary); color: var(--accent-foreground); background: var(--accent); }
.ns-switch:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.ns-condition { margin: 0; font-size: var(--text-sm); }
.ns-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ns-group legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 700; }
.ns-group[aria-invalid="true"] { outline: 2px solid var(--destructive); outline-offset: 4px; border-radius: var(--radius-sm); }
.ns-chips, .ns-insert { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.ns-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; max-width: 100%; padding: var(--space-1) var(--space-3); border: 1px solid var(--input); border-radius: 999px; background: var(--card); font-size: var(--text-sm); cursor: pointer; }
.ns-chip span { overflow-wrap: anywhere; }
.ns-chip input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.ns-chip:has(input:checked) { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); font-weight: 700; }
.ns-chip:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.ns-chip-button { min-height: 44px; padding: 0 var(--space-3); border: 1px dashed var(--primary); border-radius: 999px; background: var(--card); color: var(--accent-foreground); font-size: var(--text-sm); font-weight: 600; }
.ns-chip-button:hover { background: var(--accent); }
.ns-editor { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.ns-editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.ns-counter { padding: 0 var(--space-2); border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ns-counter.is-over { background: var(--red-100); color: var(--destructive); font-weight: 700; }
.ns-sms-box { display: grid; gap: var(--space-1); }
.ns-signature { justify-self: start; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ns-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-xs); overflow-wrap: anywhere; }
.ns-preview { border-top: 1px dashed var(--input); padding-top: var(--space-2); }
.ns-preview > summary { display: flex; align-items: center; min-height: 44px; color: var(--info); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.ns-preview [data-preview-body] { display: grid; gap: var(--space-2); }
.ns-preview-sms, .ns-preview-email { padding: var(--space-3); border-radius: var(--radius-md); background: var(--info-bg); font-size: var(--text-sm); }
.ns-preview-sms p, .ns-preview-email p { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-preview-subject { font-weight: 700; }
.ns-problems { margin: 0; padding-left: var(--space-5); color: var(--destructive); font-size: var(--text-sm); }
.ns-problems:empty { display: none; }
.ns-add { justify-self: start; }
.ns-schedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg); }
.ns-schedule .ns-field { flex: 1 1 160px; }
.ns-schedule .ns-hint { flex: 1 1 100%; }
.ns-schedule-note { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg); font-size: var(--text-sm); }
.ns-savebar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--card); box-shadow: 0 -6px 18px rgba(21, 44, 58, .08); }
@media (min-width: 1001px) { .ns-savebar { left: 250px; } }
.ns-savebar.is-dirty { border-top: 3px solid var(--warning); }
.ns-dirty { margin: 0; align-self: center; font-size: var(--text-sm); font-weight: 700; }
.ns-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ns-error, .ns-status { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); }
.ns-error { color: var(--destructive); }
.ns-status { color: var(--info); }
.ns-error:empty, .ns-status:empty { display: none; }
.ns-drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(12, 36, 52, .35); }
.ns-drawer { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(460px, 100vw); background: var(--card); box-shadow: -8px 0 24px rgba(21, 44, 58, .18); }
.ns-drawer:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ns-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.ns-drawer-head h2 { margin: 0; font-size: var(--text-lg); }
.ns-drawer-body { overflow-y: auto; padding: var(--space-3) var(--space-4); }
.ns-versions { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ns-version { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ns-version.is-current { border-color: var(--primary); background: var(--accent); }
.ns-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ns-version-reason { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.ns-summary { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.ns-restore { display: grid; gap: var(--space-2); }
.ns-restore .primary-button { justify-self: start; }
@media (max-width: 760px) {
  .ns-savebar-spacer { height: 320px; }
  .ns-event > summary, .ns-event-body { padding-left: var(--space-3); padding-right: var(--space-3); }
  .ns-rule { padding: var(--space-3); }
  .ns-event-meta { margin-left: 0; flex-basis: 100%; }
  .ns-savebar { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .ns-actions > button { flex: 1 1 0; }
  .ns-heading > button { width: 100%; }
}
/* 固定的儲存列不可遮住鍵盤焦點或捲動到的欄位。 */
html:has(.ns-savebar) { scroll-padding-bottom: 220px; }
@media (max-width: 760px) { html:has(.ns-savebar) { scroll-padding-bottom: 320px; } }

/* ADR 0044：停用／凍結確認視窗與待辦清單。 */
.confirm-dialog { width: min(520px, calc(100vw - 32px)); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); }
.confirm-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.confirm-dialog form { display: grid; gap: var(--space-4); padding: 0; }
.confirm-dialog h3, .confirm-dialog p, .confirm-dialog ul { margin: 0; }
.confirm-dialog ul { padding-left: 1.25em; display: grid; gap: var(--space-2); }
.confirm-dialog label { display: grid; gap: var(--space-2); font-weight: 600; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.confirm-actions > button { min-height: 44px; }
.confirm-error:empty { display: none; }
.confirm-error { color: var(--destructive); font-weight: 600; }
.succession-todos .toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.succession-todos td small { display: block; color: var(--muted-foreground); }
@media (max-width: 640px) { .confirm-dialog { padding: var(--space-4); } .confirm-actions > button { flex: 1 1 120px; } }

/* 案件流程畫面（年度計畫、場勘、場次排程、施打指派、場次結案、品牌決定）。
   僅限 .case-* 與案件流程表單使用，不改共用 token 與外框。 */
.case-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-progress { display: grid; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted); }
.case-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.case-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--card); color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.4; }
.case-step-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--secondary); color: var(--secondary-foreground); font-weight: 700; font-size: 11px; }
.case-step.is-done { color: var(--success); }
.case-step.is-done .case-step-mark { background: var(--success-bg); color: var(--success); }
.case-step.is-current { color: var(--primary-foreground); background: var(--primary); font-weight: 700; }
.case-step.is-current .case-step-mark { background: var(--primary-foreground); color: var(--primary); }
.case-next { display: grid; gap: var(--space-1); }
.case-next p { margin: 0; }
.case-next > p:first-child { font-size: var(--text-base); }
.case-who { color: var(--secondary-foreground); font-size: var(--text-sm); }
.case-needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.case-needs .tag { white-space: normal; }
.case-next-link { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.case-banner { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning); font-weight: 700; }
.plan-transition-area { display: grid; gap: var(--space-3); }
.plan-transition-area form { margin-top: 0; }
.plan-transition-area .primary-button, .plan-transition-area .secondary-button, .plan-transition-area .danger-outline { justify-self: start; min-height: 44px; }
.plan-other-actions > summary { font-size: var(--text-sm); }
.plan-other-actions form { padding-top: var(--space-3); }
.case-check { display: flex !important; align-items: flex-start; gap: var(--space-2); font-weight: 600; }
.case-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.case-alert { margin: var(--space-2) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: #fdecea; color: var(--destructive); font-size: var(--text-sm); }
.case-alert ul { margin: var(--space-1) 0 0; padding-left: 1.25em; }
.case-ok { margin: var(--space-2) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); font-size: var(--text-sm); }
.schedule-row.has-conflict { outline: 2px solid var(--destructive); outline-offset: 4px; border-radius: var(--radius-sm); }
.case-field-error { color: var(--destructive); font-size: var(--text-xs); font-weight: 600; }
.case-relation { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.case-relation legend { margin-bottom: var(--space-2); color: var(--gray-700); font-size: var(--text-xs); font-weight: 700; }
.case-relation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.case-relation-option { display: flex !important; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.case-relation-option:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.case-relation-option:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.case-relation-option input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.case-relation-option span { display: grid; gap: 2px; font-weight: 700; color: var(--foreground); }
.case-relation-option small { font-weight: 400; color: var(--muted-foreground); }
.case-current { display: grid; gap: 2px; margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--muted); font-size: var(--text-sm); }
.case-current b { font-size: var(--text-base); }
.case-blocker { margin: var(--space-2) 0; font-size: var(--text-sm); }
@media (max-width: 640px) {
  .case-progress { padding: var(--space-3); }
  .case-step-label { font-size: var(--text-xs); }
  .plan-transition-area .primary-button, .plan-transition-area .secondary-button, .plan-transition-area .danger-outline { justify-self: stretch; }
}
.plan-forward { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.plan-forward > p[role="status"] { grid-column: 1 / -1; margin: 0; }
.plan-forward > p[role="status"]:empty { display: none; }
@media (max-width: 640px) { .plan-forward { grid-template-columns: minmax(0, 1fr); } }
.batch-schedule .schedule-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 120px; gap: var(--space-3); align-items: end; padding: var(--space-2) 0; }
.batch-schedule .schedule-row > b { align-self: center; }
.batch-schedule .schedule-row .case-field-error { grid-column: 1 / -1; margin: 0; }
.batch-schedule .schedule-row .case-field-error:empty { display: none; }
.batch-schedule p[role="status"]:empty, .conflict-result:empty { display: none; }
@media (max-width: 760px) {
  .batch-schedule .schedule-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .batch-schedule .schedule-row > b { grid-column: 1 / -1; }
  .batch-schedule .schedule-row > label:nth-of-type(3) { grid-column: 1 / -1; }
}
.panel > .case-progress { margin: var(--space-4) var(--space-5) var(--space-5); }
.case-blocker b { color: var(--warning); }
/* ── 共用外框（global shell，2026-10-10）────────────────────────────────
   側欄分區標題、頁面位置、頁首「我是誰」、登入逾時提示、共用狀態區塊與首頁。
   其他畫面可直接使用 .ui-state（loading／empty／error）與上方新增的 token。 */
.nav-section-label { margin: var(--space-5) 0 var(--space-1); padding: 0 var(--space-4); color: #7f9eaa; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; }
.sidebar nav a[aria-current="page"] { color: white; background: var(--sidebar-accent); }
.sidebar nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #7fddd1; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.breadcrumb .breadcrumb-group { color: var(--muted-foreground); }
.breadcrumb .breadcrumb-group { display: inline-flex; align-items: center; }
.breadcrumb .breadcrumb-group::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: var(--space-2); background: var(--gray-400); -webkit-mask: var(--fa-mask-chevron-right) center / contain no-repeat; mask: var(--fa-mask-chevron-right) center / contain no-repeat; }
.breadcrumb .breadcrumb-current { color: var(--foreground); font-weight: 600; }

.topbar-identity { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: 360px; line-height: 1.35; text-align: right; }
.topbar-identity-name { color: var(--foreground); font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.topbar-identity-role { color: var(--muted-foreground); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sidebar-user > div:nth-child(2) span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

.session-expired { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--destructive-border); color: var(--foreground); background: var(--destructive-bg); }
.session-expired b { color: var(--destructive); }
.session-expired p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.session-expired .primary-button { display: inline-flex; align-items: center; text-decoration: none; }

.ui-state { display: grid; justify-items: start; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-5); border: 1px dashed var(--input); border-radius: var(--radius-lg); color: var(--muted-foreground); background: var(--card); font-size: var(--text-sm); }
.ui-state p { margin: 0; }
.ui-state-title { color: var(--foreground); font-size: var(--text-base); font-weight: 600; }
.ui-state .secondary-button { display: inline-flex; align-items: center; margin-top: var(--space-2); text-decoration: none; }
.ui-state-loading .ui-state-title::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2); border: 2px solid var(--input); border-top-color: var(--primary); border-radius: 50%; vertical-align: -1px; animation: ui-state-spin .8s linear infinite; }
.ui-state-error { border-style: solid; border-color: var(--destructive-border); background: var(--destructive-bg); }
.ui-state-error .ui-state-title { color: var(--destructive); }
@keyframes ui-state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-state-loading .ui-state-title::before { animation: none; } }

.home-panel { padding: var(--space-6); margin-bottom: var(--space-4); }
.home-panel > h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-lg); }
.home-group { margin-top: var(--space-5); }
.home-group h3 { margin: 0 0 var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.home-task-list, .home-todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-task { display: grid; gap: 2px; min-height: var(--touch-target); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); background: var(--card); text-decoration: none; }
.home-task b { color: var(--primary); font-size: var(--text-base); font-weight: 600; }
.home-task span { color: var(--muted-foreground); font-size: var(--text-sm); }
.home-task:hover { border-color: var(--ring); background: var(--accent); text-decoration: none; }
.home-todo { border-color: var(--warning); background: var(--warning-bg); }
.home-todo b { color: var(--warning); }
.content-screen .home-help { margin: var(--space-5) 0 0; padding: 0; color: var(--muted-foreground); font-size: var(--text-sm); }

.login-help { display: block; }
.login-help summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-weight: 600; cursor: pointer; }
.login-help dl { margin: var(--space-2) 0 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--muted); }
.login-help dt { color: var(--foreground); font-weight: 600; }
.login-help dd { margin: var(--space-1) 0 var(--space-3); }
/* reCAPTCHA（ADR 0053）：依 Google 規定，隱藏右下角徽章時必須在表單附近顯示保護說明（.recaptcha-notice）。 */
.recaptcha-notice { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted-foreground); }
.recaptcha-notice a { color: var(--info); }
.grecaptcha-badge { visibility: hidden; }
.login-help dd:last-child { margin-bottom: 0; }
.login-status { padding: 0; }
.login-status.error { padding: var(--space-3); border-radius: var(--radius-md); background: var(--destructive-bg); }
.login-card .primary-button:disabled, .login-card .secondary-button:disabled { cursor: not-allowed; opacity: .6; }

@media (max-width: 1000px) {
  .session-expired { padding: var(--space-3) var(--gutter-phone); }
}
@media (max-width: 600px) {
  .topbar-identity { max-width: 42vw; }
  .topbar-identity-role { display: none; }
  .home-panel { padding: var(--space-4); }
  .home-task-list, .home-todo-list { grid-template-columns: 1fr; }
}

/* 2026-10-10 協調回饋：正式環境不顯示原型提示條；桌機側欄跟著頁面全高；
   跳至主要內容平時完全隱藏；手機上下拉選單不撐破版面。 */
body[data-environment="production"] .meeting-ribbon { display: none; }
@media (min-width: 1001px) {
  .sidebar { position: sticky; top: 0; grid-column: 1; grid-row: 1; height: 100vh; align-self: start; }
  .main { grid-row: 1; }
  /* 長頁面時側欄區的深色底延伸到頁尾（含整頁截圖）。 */
  .app-shell { background: linear-gradient(to right, var(--sidebar) 250px, var(--background) 250px); }
}
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
.content-screen select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.content-screen label:has(> select) { min-width: 0; }

/* ── 機關與人員：建立順序、人員搜尋點選、新增人員兩步（僅限這些畫面的 class） ── */
.org-onboarding { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.org-onboarding-title { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.org-onboarding-title span { color: var(--muted-foreground); font-size: var(--text-xs); }
.org-onboarding ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.org-onboarding-step { display: grid; gap: var(--space-1); min-width: 0; }
.org-onboarding-link { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; min-height: var(--touch-target); box-sizing: border-box; padding: var(--space-2) var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.org-onboarding-link > span:last-child { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.org-onboarding-link small { color: var(--muted-foreground); font-size: var(--text-xs); }
.org-onboarding-link:hover { border-color: var(--primary); }
.org-onboarding-link:focus-visible, .org-onboarding-sub:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: var(--focus-ring); }
.org-onboarding-no { display: inline-grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.org-onboarding-step.is-done .org-onboarding-no { background: var(--success-bg); color: var(--success); }
.org-onboarding-step.is-done .org-onboarding-link small { color: var(--success); }
.org-onboarding-step[aria-current="step"] .org-onboarding-link { border-color: var(--primary); background: var(--accent); box-shadow: inset 0 0 0 1px var(--primary); }
.org-onboarding-step[aria-current="step"] .org-onboarding-no { background: var(--primary); color: var(--primary-foreground); }
.org-onboarding-sub { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); color: var(--info); font-size: var(--text-xs); font-weight: 700; }
.keyin-step .keyin-parent-filter[hidden] { display: none; }
.keyin-batch-issue-group { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.keyin-batch-issue-group h4 { margin: 0; font-size: var(--text-sm); }
.keyin-batch-issue-group ul { margin: 0; }
.keyin-batch-issue-group li { margin-bottom: var(--space-2); }
.keyin-batch-issue-text { display: block; }
.keyin-batch-fix { display: block; color: var(--foreground); font-size: var(--text-xs); }

.people-onboard { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.people-onboard h2 { margin: 0; }
.people-onboard-lead { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.people-onboard-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.panel .people-onboard-step { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
.people-onboard-step h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-base); }
.people-step-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.people-onboard-step label { display: grid; gap: var(--space-1); font-weight: 700; }
.people-onboard-step .live-field, .people-onboard-more .live-field { width: 100%; min-height: var(--touch-target); box-sizing: border-box; }
.people-onboard-step > button, .people-onboard-more button { justify-self: start; min-height: var(--touch-target); }
.people-onboard .field-hint { margin: 0; }
.people-onboard-error:empty, .people-onboard-status:empty { display: none; }
.people-onboard-error { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--destructive-border); border-radius: var(--radius-md); color: var(--red-700, #9b2c27); background: var(--destructive-bg); font-size: var(--text-sm); }
.people-onboard-status { margin: 0; color: var(--info); font-size: var(--text-sm); overflow-wrap: anywhere; }
.people-onboard-preview { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.people-onboard [aria-invalid="true"] { outline: 2px solid var(--destructive); outline-offset: 1px; }
.people-onboard-more { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.people-onboard-more > summary { display: flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.people-onboard-more > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: var(--focus-ring); }
.people-onboard-more form { display: grid; gap: var(--space-2); max-width: 560px; }
.org-picker { display: grid; gap: var(--space-1); min-width: 0; }
.org-picker > label { font-weight: 700; }
.org-picker .live-field { width: 100%; min-height: var(--touch-target); box-sizing: border-box; }
.person-picker { display: grid; gap: var(--space-1); min-width: 0; }
.person-picker > label { font-weight: 700; }
.person-picker input.live-field { width: 100%; min-height: var(--touch-target); box-sizing: border-box; }
.person-picker .field-hint { margin: 0; }
.person-picker-list { display: grid; gap: 2px; max-height: 288px; margin: 0; padding: var(--space-1); overflow-y: auto; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--popover); list-style: none; box-shadow: 0 6px 16px rgba(21, 44, 58, .08); }
.person-picker-list[hidden] { display: none; }
.person-picker-list [role="option"] { display: grid; gap: 2px; min-height: var(--touch-target); box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.person-picker-list [role="option"] b { font-size: var(--text-sm); }
.person-picker-list [role="option"] small { color: var(--muted-foreground); font-size: var(--text-xs); }
.person-picker-list [role="option"]:hover, .person-picker-list [role="option"][aria-selected="true"] { background: var(--accent); color: var(--accent-foreground); }
.person-picker-empty { padding: var(--space-2) var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); }
.person-picker-chosen { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.person-picker-chosen[hidden] { display: none; }
.person-picker [aria-invalid="true"] { outline: 2px solid var(--destructive); outline-offset: 1px; }
@media (max-width: 1000px) {
  .org-onboarding ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .people-onboard-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .org-onboarding { padding: var(--space-3); }
  .org-onboarding ol { grid-template-columns: minmax(0, 1fr); }
  .panel .people-onboard-step { padding: var(--space-3); }
  .people-onboard-step > button, .people-onboard-more button { justify-self: stretch; }
}
.content-screen .people-onboard input.live-field, .content-screen .people-onboard select.live-field,
.content-screen .person-picker input.live-field, .content-screen .org-picker input.live-field, .content-screen .org-picker select.live-field { height: var(--control-height); min-height: var(--touch-target); }
.content-screen .panel .people-onboard-more > summary { min-height: var(--touch-target); padding: 0; }
.content-screen .panel.people-onboard { padding: var(--space-5); }
.content-screen .panel.people-onboard > h2, .content-screen .panel.people-onboard > p, .content-screen .panel.people-onboard > details { margin: 0; padding: 0; }
.people-onboard .field-hint, .person-picker .field-hint, .org-picker .field-hint { color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-xs); }
@media (max-width: 760px) { .content-screen .panel.people-onboard { padding: var(--space-3); } }
/* 個資保存期限：標題與說明對齊同一左邊界。 */
.content-screen .panel.retention-panel > h2 { margin: 0; padding: var(--space-5) var(--space-5) var(--space-2); }
.content-screen .panel.retention-panel > p:not(.retention-status) { margin: 0; padding: 0 var(--space-5) var(--space-3); }
@media (max-width: 760px) {
  .content-screen .panel.retention-panel > h2 { padding: var(--space-4) var(--space-3) var(--space-2); }
  .content-screen .panel.retention-panel > p:not(.retention-status), .retention-panel .retention-filters, .retention-panel .retention-status, .retention-panel .retention-table { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ── 共用頁面版型與元件（UX system，2026-10-10）───────────────────────────
   app.js 的 pageIntro / stepSection / notice / formRow / choiceGroup / actionRow /
   statusBadge / dataTable 產生的標記。用法見 docs/uat/UX_PAGE_INVENTORY_2026-10-10.md。 */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 頁首：標題 → 這頁用來… → 與您的關係 → 操作步驟。每個畫面同一個順序與間距。 */
.page-heading.page-intro { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.page-intro-main { flex: 1 1 420px; min-width: 0; }
.page-heading .page-intro-purpose { margin: var(--space-2) 0 0; color: var(--foreground); font-size: var(--text-base); line-height: var(--leading-base, 1.65); }
.page-heading .page-intro-role { display: block; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--accent-foreground); background: var(--accent); font-size: var(--text-sm); line-height: 1.6; }
.page-heading .page-intro-role b { color: var(--foreground); font-weight: 600; }
.page-intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.page-intro-steps { flex: 1 1 100%; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.page-steps-title { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; }
.page-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.page-steps li { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; color: var(--foreground); font-size: var(--text-sm); line-height: 1.6; }

/* 步驟編號：頁首步驟與步驟區塊共用同一個圓形編號。 */
.step-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--primary-foreground); background: var(--primary); font-size: var(--text-xs); font-weight: 700; line-height: 1; }
.content-screen .panel.step-section { margin-bottom: var(--space-4); }
.step-section .step-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.step-section .step-head .step-no { margin-top: 2px; }
.step-section .step-head h2 { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.step-section .step-help { max-width: 72ch; margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.step-section .step-body { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 24px + var(--space-3)); }
.step-section .step-body > form, .content-screen .panel .step-body form { display: grid; gap: var(--space-4); padding: 0; }
.step-section .step-body p[role="status"]:empty, .step-section .step-body p[role="alert"]:empty { display: none; }
.step-section .step-body .ui-state { margin: 0; }

/* 提醒／說明：一種外觀、四種語意。 */
.notice { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--info-border, #bfdbfe); border-left-width: 4px; border-radius: var(--radius-md); color: var(--foreground); background: var(--info-bg); font-size: var(--text-sm); }
.notice p { margin: 0; line-height: 1.65; }
.notice-title { color: var(--info); font-weight: 600; }
.notice-warning { border-color: var(--warning); background: var(--warning-bg); }
.notice-warning .notice-title { color: var(--warning); }
.notice-danger { border-color: var(--destructive-border, var(--destructive)); background: var(--destructive-bg); }
.notice-danger .notice-title { color: var(--destructive); }
.notice-success { border-color: var(--success); background: var(--success-bg); }
.notice-success .notice-title { color: var(--success); }

/* 表單欄位：標籤在上、說明與錯誤在下。 */
.form-row { display: grid; gap: var(--space-2); min-width: 0; max-width: 560px; }
.content-screen .form-label { color: var(--foreground); font-size: var(--text-sm); font-weight: 600; }
.form-required { margin-left: var(--space-1); color: var(--muted-foreground); font-weight: 400; }
.form-row .field-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.6; }
.field-error { margin: 0; color: var(--destructive); font-size: var(--text-sm); font-weight: 600; }
.field-error:empty { display: none; }
.form-row .live-field { width: 100%; box-sizing: border-box; }

/* 核取／單選群組：選項緊湊並排（手機自動換行），點擊範圍至少 44px。 */
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
.choice-group > legend { margin-bottom: var(--space-2); padding: 0; }
.choice-options { display: grid; gap: var(--space-2); }
.choice-inline .choice-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.content-screen .panel form label.choice, .content-screen label.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target, 44px); padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.content-screen label.choice:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.content-screen label.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.content-screen label.choice small { color: var(--muted-foreground); font-size: var(--text-xs); }

/* 讀取紀錄清單：可點選的整列。 */
.run-options { display: grid; gap: var(--space-2); }
.content-screen .panel form label.run-option { display: flex; width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-4); }
.run-option-text { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.run-option-text b { font-weight: 600; }
.run-option-text small { overflow-wrap: anywhere; }
.run-result { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--muted); font-size: var(--text-sm); }
.run-result p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.run-result small { color: var(--muted-foreground); overflow-wrap: anywhere; }
.run-result ul { margin: var(--space-2) 0 0; padding-left: 1.25em; }

/* 進階／少用的輸入收進 details，不佔主要流程。 */
.advanced-entry > summary { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.content-screen .panel .advanced-entry { border-top: 0; }
.advanced-entry[open] > summary { margin-bottom: var(--space-2); }

/* 按鈕列：主要 → 次要 → 文字；破壞性動作獨立靠右。 */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.action-row .action-danger { margin-left: auto; }
.content-screen .action-row > button, .content-screen .action-row > a { min-height: var(--touch-target, 44px); }
.action-row > a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* 表格容器：窄螢幕水平捲動在容器內，不撐破頁面。 */
.table-wrap { overflow-x: auto; max-width: 100%; }
.table-wrap table { min-width: 100%; }

/* 面板內直接放的標題與內文對齊（過去標題貼齊面板左緣、內文縮排，看起來凌亂）。 */
.content-screen .panel:not(.people-onboard):not(.home-panel):not(.step-section) > h2,
.content-screen .panel:not(.people-onboard):not(.home-panel):not(.step-section) > h3 { margin: 0; padding: var(--space-5) var(--space-5) var(--space-2); }
.content-screen .panel:not(.people-onboard):not(.home-panel):not(.step-section) > :is(h2, h3) + p { padding-top: 0; }
.content-screen .panel > .empty-live { padding: var(--space-4) var(--space-5); }
.content-screen .panel > div > .empty-live, .content-screen .panel > [data-violations] > .empty-live, .content-screen .panel > [data-legacy] > .empty-live { margin: 0 var(--space-5) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--muted); text-align: left; }

@media (max-width: 640px) {
  .step-section .step-head { padding: var(--space-4) var(--space-4) 0; }
  .step-section .step-body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .page-steps { display: grid; }
  .choice-inline .choice-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .action-row > button, .action-row > a { flex: 1 1 140px; }
  .action-row .action-danger { margin-left: 0; }
}

/* ── 側欄（shell）：使用者區不再擠壓導覽、長名稱不換成三行 ───────────────── */
.sidebar nav a { height: auto; min-height: 40px; padding-block: var(--space-2); line-height: 1.4; }
.sidebar-navigation { padding-bottom: var(--space-6); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.sidebar-user { padding-top: var(--space-3); box-shadow: 0 -10px 16px -14px rgb(0 0 0 / 60%); }
.sidebar-user .avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.sidebar-user > div:nth-child(2) span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.sidebar nav a .nav-badge { margin-left: auto; }
/* 控制項一律 44px（docs/DESIGN.md「控制項高度」）；舊規則在桌機把部分輸入框壓成 40px、按鈕 36px。 */
.content-screen.content-screen :is(.step-section, .form-row, .action-row, .people-onboard) :is(input.live-field, select.live-field, button.primary-button, button.secondary-button, button.danger-outline) { min-height: var(--touch-target); }
.content-screen.content-screen :is(.step-section, .form-row) select.live-field { height: var(--touch-target); }

/* ── 場次與施打執行（group B，2026-10-10）：只補共用元件之外的少量排版 ───────── */
.report-session-summary { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--muted); }
.report-session-summary h3 { margin: 0; font-size: var(--text-base); }
.report-session-summary p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.report-session-summary .annual-plan-meta { margin-top: var(--space-1); }
.provider-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.provider-links .text-button { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); text-decoration: none; }
.content-screen .eligibility-list-panel .toolbar { padding: var(--space-3) var(--space-5) var(--space-4); }
.content-screen .eligibility-create .keyin-hint { font-size: var(--text-sm); line-height: var(--leading-sm); }
.content-screen .eligibility-action form { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.content-screen .table-panel > .ui-state { margin: var(--space-4) var(--space-5); }
/* ── 案件前段畫面（第二階段 A 組：總覽、提案、發布、品牌決定、年度計畫、詳情、場勘、門市協作）──
   步驟區塊內的單筆資料用 .record-card（細框、不加陰影），避免「卡片裡再放卡片」。 */
.record-list { display: grid; gap: var(--space-3); }
.content-screen .record-card { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: none; }
.record-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.record-head > div { flex: 1 1 240px; min-width: 0; }
.content-screen .record-head :is(h2, h3) { margin: 0; padding: 0; font-size: var(--text-base); line-height: 1.5; overflow-wrap: anywhere; }
.content-screen .record-head p { margin: var(--space-1) 0 0; padding: 0; color: var(--muted-foreground); font-size: var(--text-sm); overflow-wrap: anywhere; }
.record-meta, .record-note, .record-line { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.6; }
.record-line .status-badge { margin-left: var(--space-1); }
.content-screen .record-card .notice { margin: 0; }
.content-screen .record-card > .action-row { margin-top: var(--space-1); }
/* 篩選列：欄位並排、按鈕對齊欄位底部；手機自動換行。 */
.content-screen form.filter-row, .content-screen .panel .step-body form.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.content-screen form.filter-row .form-row { flex: 1 1 200px; max-width: 360px; }
.content-screen form.filter-row .field-error:empty + * { margin: 0; }
.content-screen form.filter-row > .action-row { flex: 0 0 auto; }
.content-screen .panel.toolbar.filter-row { margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); }
/* 已選取的項目（提案的門市、品牌決定的門市）。 */
.selected-item { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--muted); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.content-screen .panel-body { padding: 0 var(--space-5) var(--space-5); }
.content-screen .panel-body > p[role="status"]:empty { display: none; }
.content-screen .panel .panel-body details.publish-batch { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-3); margin-bottom: var(--space-2); }
.content-screen .panel-head + .ui-state, .content-screen .panel-head + .table-wrap + .ui-state { margin: 0 var(--space-5) var(--space-5); }
.content-screen .table-panel > .ui-state { margin: 0 var(--space-5) var(--space-5); }
/* 卡片內的小標題（窗口、改派衛生所）。 */
.content-screen .annual-plan-card h4, .content-screen .survey-card h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.content-screen .survey-card .record-head { margin-bottom: var(--space-2); }
.content-screen .survey-card .ui-state { margin: var(--space-2) 0 0; }
.content-screen .survey-card .notice { margin: var(--space-3) 0 0; }
.content-screen .survey-confirmations { align-items: center; }
/* 年度計畫的階段進度不用數字（避免和「操作步驟」混淆）：完成打勾，其餘是小圓點。 */
.case-step:not(.is-done) .case-step-mark { width: 10px; height: 10px; margin: 0 4px 0 6px; }
.case-step.is-current .case-step-mark { background: var(--primary-foreground); }
/* 年度設站計畫總覽：表格第一欄的地址換行顯示。 */
[data-screen="dashboard"] td small { display: block; color: var(--muted-foreground); }
@media (max-width: 640px) {
  .content-screen form.filter-row .form-row { max-width: none; flex-basis: 100%; }
  .content-screen form.filter-row > .action-row { flex: 1 1 100%; }
  .content-screen .panel.toolbar.filter-row { padding: var(--space-4); }
  .content-screen .panel-body { padding: 0 var(--space-4) var(--space-4); }
}
[data-screen="dashboard"] td:nth-child(n+4):nth-child(-n+6) { white-space: nowrap; }
.content-screen .form-row > label.form-label { display: block; }
.content-screen .survey-card > p.record-meta, .content-screen .survey-card > p.record-line, .content-screen .survey-card > p.field-hint { padding: 0; margin: 0 0 var(--space-2); }
.content-screen .survey-card :is(.survey-slots, .issue-list) { padding: 0; }
.content-screen .step-body :is(.supplement-task, .contact-sections) { padding-inline: 0; }
.content-screen .proposal-request-list .supplement-task { padding: var(--space-3) var(--space-4); }
.content-screen .panel.survey-card > :is(h2, h3) { padding: 0; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-base); }
/* ── 第二階段 C 組（機關、人員、通知與系統）：共用版型的補充 ───────────────── */
/* 不編號的內容區塊（sectionPanel）：與步驟區塊同樣的標題與內距，只是沒有編號。 */
.step-section.plain-section .step-body { padding-left: var(--space-5); }
.content-screen .panel.step-section.plain-section { margin-bottom: var(--space-4); }
/* 紀錄清單：每筆一列（姓名＋狀態＋說明），操作表單接在下方。取代卡片內再放卡片。 */
.record-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.record-list:empty { display: none; }
.record-list > .ui-state { margin: 0; border: 0; border-radius: 0; }
.record-item { display: grid; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); background: var(--card); }
.record-item:last-child { border-bottom: 0; }
.record-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.record-main > b { font-weight: 600; }
.record-main > small { flex: 1 1 100%; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.record-item form { display: grid; gap: var(--space-3); padding: var(--space-3) 0 0; border-top: 1px dashed var(--border); }
.record-item form label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.record-item form button { justify-self: start; min-height: var(--touch-target, 44px); }
.record-form { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) !important; }
.record-form label { flex: 1 1 200px; }
.record-form p[role="status"] { flex: 1 1 100%; margin: 0; }
.record-form p[role="status"]:empty { display: none; }
/* 表格列操作：按鈕至少 44px，排成一列並可換行。 */
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.content-screen .row-action, .content-screen button.row-action { min-height: var(--touch-target, 44px); padding: 0 var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
.content-screen .people-table td .live-field, .content-screen .table-wrap td select.live-field { min-height: var(--touch-target, 44px); }
/* 頁內快捷列與分段標題。 */
.page-jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: 0; font-size: var(--text-sm); }
.page-jump b { color: var(--muted-foreground); font-weight: 600; }
.page-jump a { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); font-weight: 600; }
.content-screen .section-divider { margin: var(--space-6) 0 var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em; }
.personnel-org-picker { padding: var(--space-4) var(--space-5); }
.content-screen details.advanced-entry > summary { min-height: var(--touch-target, 44px); }
.brand-people + .brand-people { margin-top: var(--space-5); }
.brand-plan-contacts > summary { display: flex; align-items: center; min-height: var(--touch-target, 44px); font-weight: 600; cursor: pointer; }
/* 篩選切換（進行中／已結案、狀態篩選）：同一種外觀，44px。 */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.content-screen .filter-row .filter-button { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); padding: 0 var(--space-4); text-decoration: none; font-size: var(--text-sm); }
.content-screen .filter-button[aria-pressed="true"] { color: var(--teal-700); border-color: var(--teal-600); background: #f2fbf9; font-weight: 700; }
.content-screen .retention-panel .filter-button { min-height: var(--touch-target, 44px); }
/* 稽核紀錄：篩選欄位兩欄排列，手機一欄。 */
.audit-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.audit-filter-grid .form-row, .audit-filter-grid .person-picker { max-width: none; }
.audit-details dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.audit-details dd { margin: 0; overflow-wrap: anywhere; }
.audit-details > summary, .content-screen .row-link, .content-screen .full-contact-view { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); cursor: pointer; font-size: var(--text-sm); }
.page-intro-actions .ns-current { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
/* 機關建立：單一步驟系統（頁首步驟＝建立步驟）；進度列不編號。 */
.keyin-single .keyin-form, .keyin-single > form { display: grid; gap: 0; }
.keyin-wait { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--muted); font-size: var(--text-sm); }
.keyin-wait[hidden] { display: none; }
.keyin-batch-plan:not([hidden]) ~ .keyin-batch-wait, .keyin-batch-success:not([hidden]) ~ .keyin-batch-wait { display: none; }
.keyin-medical .keyin-medical-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.keyin-batch-body { display: grid; gap: 0; }
.org-onboarding-mark { display: inline-grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 700; }
.org-onboarding-step.is-done .org-onboarding-mark { color: var(--success); }
.org-onboarding-step[aria-current="step"] .org-onboarding-mark { color: var(--primary); }
.org-onboarding-sub { min-height: var(--touch-target, 44px); }
/* C 組畫面的按鈕一律 44px（桌機舊規則把按鈕壓成 36px）；狀態區塊的動作按鈕也是。 */
.content-screen .ui-state .secondary-button { min-height: var(--touch-target, 44px); }
:is([data-screen="home"], [data-screen="people"], [data-screen="personnel"], [data-screen="succession-todos"], [data-screen="organization-keyin"], [data-screen="directory"], [data-screen="broadcast"], [data-screen="notification-settings"], [data-screen="audit-log"], [data-screen="login-settings"]).content-screen :is(.primary-button, .secondary-button, .danger-outline, .filter-button) { min-height: var(--touch-target, 44px); }
.content-screen .panel.directory-panel.step-section { padding: 0; }
.content-screen .succession-todos td .secondary-button { display: inline-flex; align-items: center; min-height: var(--touch-target, 44px); padding: var(--space-2) var(--space-3); line-height: 1.4; white-space: normal; text-align: left; text-decoration: none; }
@media (max-width: 640px) { .step-section.plain-section .step-body { padding-left: var(--space-4); } }

/* ---- 門市比對：差異檢視（pool-diff）---- */
.pool-diff { display: grid; gap: var(--space-4); }
.pd-summary { margin: 0 0 var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); }
.pd-toolbar { display: grid; gap: var(--space-3); }
.pd-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-tab { min-height: var(--touch-target); padding: 0 var(--space-4); border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--secondary-foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.pd-tab[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.pd-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.pd-filter { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--secondary-foreground); }
.pd-filter-grow { flex: 1 1 240px; }
.pd-only { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); font-size: var(--text-sm); }
.pd-kind-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.pd-bulk { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-bulk:empty { display: none; }
.pd-list { display: grid; gap: var(--space-3); }
.pd-item { border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.pd-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--muted); }
.pd-head small { margin-left: auto; color: var(--muted-foreground); }
.pd-title { min-width: 0; overflow-wrap: anywhere; }
.pd-tag { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; }
.pd-tag-new { background: var(--success-bg); color: var(--success); }
.pd-tag-changed { background: var(--info-bg); color: var(--info); }
.pd-tag-missing { background: var(--destructive-bg); color: var(--destructive); }
.pd-tag-duplicate, .pd-tag-warn { background: var(--warning-bg); color: var(--warning); }
.pd-diff { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace; font-size: var(--text-sm); line-height: 1.7; }
.pd-line { display: grid; grid-template-columns: 28px 5.5em minmax(0, 1fr); align-items: baseline; padding: 2px var(--space-3) 2px 0; }
.pd-sign { text-align: center; font-weight: 700; }
.pd-label { color: var(--muted-foreground); }
.pd-text { min-width: 0; overflow-wrap: anywhere; }
.pd-add { background: var(--success-bg); }
.pd-add .pd-sign { color: var(--success); }
.pd-del { background: var(--destructive-bg); }
.pd-del .pd-sign { color: var(--destructive); }
.pd-mark { padding: 0 1px; border-radius: 2px; color: inherit; }
.pd-mark-add { background: rgb(38 119 75 / 28%); }
.pd-mark-del { background: rgb(182 60 54 / 28%); text-decoration: line-through; text-decoration-thickness: 1px; }
.pd-note { margin: 0; padding: var(--space-2) var(--space-4); color: var(--secondary-foreground); font-size: var(--text-sm); line-height: 1.6; }
.pd-decide { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.pd-choice { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--touch-target); font-size: var(--text-base); cursor: pointer; }
.pd-choice input { margin-top: 5px; }
.pd-choice-rec { align-items: center; font-weight: 600; }
.pd-choice-rec input { margin-top: 0; }
.pd-choice-list { display: grid; gap: var(--space-2); }
.pd-choice-card { padding: var(--space-2) var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-sm); }
.pd-choice-card:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.pd-choice-card > span { display: grid; gap: 2px; min-width: 0; }
.pd-cand-line { color: var(--muted-foreground); overflow-wrap: anywhere; }
.pd-cand-line span { display: inline-block; min-width: 3em; margin-right: var(--space-1); }
.pd-more { text-align: center; }
.pd-footer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-sm); }
.pd-progress { display: grid; gap: var(--space-1); flex: 1 1 260px; font-size: var(--text-sm); }
.pd-bar { display: block; height: 6px; border-radius: 3px; background: var(--secondary); overflow: hidden; }
.pd-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.pd-confirm { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); font-size: var(--text-sm); }
@media (max-width: 720px) {
  .pd-line { grid-template-columns: 22px 4.5em minmax(0, 1fr); }
  .pd-head small { margin-left: 0; width: 100%; }
  .pd-footer { padding: var(--space-3); }
  .pd-footer .primary-button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pd-bar i { transition: none; } }

/* 全站「目前查看年度」（ADR 0047）：頁首年度選單、頁首眉標年度、過去年度唯讀。 */
.year-switch { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.year-switch-label { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.year-select { min-height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--input); border-radius: var(--radius-md); color: var(--foreground); background: var(--card); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.year-select:hover { border-color: var(--ring); }
.year-select:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 40%, transparent); outline-offset: 2px; border-color: var(--ring); }
.page-heading .eyebrow-year { color: var(--foreground); letter-spacing: 0; }
.year-readonly-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.year-readonly-notice p { flex: 1 1 260px; color: var(--warning); }
.year-readonly-notice .secondary-button { flex-shrink: 0; }
/* 過去年度：會改資料的控制項整個隱藏（實際接種人數的填報與更正不加這個屬性，照常可用）。 */
body[data-year-readonly="true"] [data-year-edit] { display: none !important; }
.pool-diff.pd-readonly :is(.pd-bulk, .pd-decide, .pd-footer) { display: none !important; }
.home-year { display: grid; gap: var(--space-1); min-width: 220px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.home-year-title { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.home-year-figures { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.home-year-figures b { color: var(--foreground); font-size: var(--text-lg); }
.home-year .text-button { justify-self: start; padding: 0; min-height: 32px; }
@media (max-width: 600px) {
  .year-switch { gap: var(--space-1); }
  .year-switch-label { font-size: var(--text-xs); }
  .year-select { min-height: 44px; padding: 0 28px 0 10px; font-size: 16px; }
  .home-year { min-width: 0; width: 100%; }
}
/* 頁首放了年度選單後，手機改成兩列：第一列導覽鈕＋目前位置，第二列年度選單＋「我是誰」。 */
.top-actions { min-width: 0; }
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar .breadcrumb { flex: 1 1 0; }
  /* 第二列先保留年度選單的高度：app.js 稍後才放入選單，否則整頁內容會往下跳。 */
  .top-actions { flex: 1 1 100%; justify-content: space-between; min-height: 44px; }
  .topbar-identity { flex: 0 1 auto; min-width: 0; max-width: 55%; }
}

/* ── 圖示（Font Awesome Free 內嵌 SVG，ADR 0048）──────────────────────────
   一律繼承文字顏色、預設 1em 並與文字基線對齊；尺寸只在這裡調整。 */
.fa-icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; overflow: visible; vertical-align: -.125em; fill: currentColor; }
.metric-icon .fa-icon { width: 20px; height: 20px; }
.icon-button .fa-icon { width: 18px; height: 18px; }
.navigation-close .fa-icon { width: 16px; height: 16px; }
.sidebar-logout { display: inline-flex; align-items: center; gap: 6px; }
.sidebar-logout .fa-icon { width: 13px; height: 13px; }
.platform-notice-dismiss { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.platform-notice-dismiss .fa-icon { width: 12px; height: 12px; }
.ui-state-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-state-title .fa-icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.ui-state-error .ui-state-title .fa-icon { color: var(--destructive); }
.notice.has-icon { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.notice.has-icon > .notice-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--info); }
.notice-warning.has-icon > .notice-icon { color: var(--warning); }
.notice-danger.has-icon > .notice-icon { color: var(--destructive); }
.notice-success.has-icon > .notice-icon { color: var(--success); }
.notice-body { display: grid; gap: var(--space-1); min-width: 0; }
.notice-inline-icon { margin-right: 6px; color: var(--warning); }
.case-step-mark .fa-icon { width: 11px; height: 11px; }
.org-onboarding-mark .fa-icon { width: 14px; height: 14px; }
.org-onboarding-mark .fa-icon-dot { width: 8px; height: 8px; opacity: .55; }
.secondary-button > .fa-icon, .primary-button > .fa-icon, summary > .fa-icon { margin-right: 6px; }
/* 內容區的展開／收合：原生三角形一律換成同一個 chevron，展開時轉向。 */
.content-screen details > summary { list-style: none; }
.content-screen details > summary::-webkit-details-marker { display: none; }
.content-screen details:not(.ns-event) > summary::before { content: ""; display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 8px; vertical-align: .05em; background: currentColor; opacity: .7; -webkit-mask: var(--fa-mask-chevron-down) center / contain no-repeat; mask: var(--fa-mask-chevron-down) center / contain no-repeat; transition: transform .16s ease; }
.content-screen details[open]:not(.ns-event) > summary::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-group summary::after, .content-screen details > summary::before { transition: none; }
}

/* ── 人員與權限：資料表＋右側面板（ADR 0049）──────────────────────────────
   一張表：工具列（搜尋、單位／角色／狀態篩選）＋每列操作；手機改卡片，操作相同。
   新增、編輯、換單位在右側面板（原生 dialog），手機全螢幕。 */
.people-workspace { overflow: hidden; }
.people-workspace .people-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.people-workspace .people-add { display: inline-flex; align-items: center; gap: var(--space-2); }
.people-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-4) var(--space-5) 0; }
.people-toolbar label, .people-filter { display: grid; gap: var(--space-1); min-width: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 700; }
.people-toolbar .people-search { max-width: none; }
.content-screen .people-toolbar :is(input.live-field, select.live-field) { width: 100%; height: var(--control-height); min-height: var(--touch-target); box-sizing: border-box; }
.people-workspace .people-tools { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-2) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); }
.people-workspace .people-tools p { margin: 0; }
.people-live-status:empty { display: none; }
.people-live-status { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--success); background: var(--success-bg); font-size: var(--text-sm); font-weight: 700; }
.people-live-status:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
.people-table-wrap { border: 0; }
.content-screen .people-db { min-width: 0; table-layout: auto; }
.people-db td { vertical-align: top; }
.people-db td:first-child { min-width: 0; width: 28%; }
.people-db td:nth-child(2) { min-width: 0; width: 22%; }
.people-db td:nth-child(3) { width: 1%; white-space: nowrap; }
.people-db .person-place { overflow-wrap: anywhere; }
.people-db .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.content-screen .people-db .row-action { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-target); padding: 0 var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
.people-db .row-action .fa-icon { width: 14px; height: 14px; }
.people-db .avatar .fa-icon { width: 14px; height: 14px; }
.people-db tr.is-new td { background: var(--accent); }
.people-db tr.is-new td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
.people-db tr.people-empty td { padding: var(--space-6) var(--space-4); text-align: center; }
.people-db tr.people-empty .secondary-button { margin-top: var(--space-3); }
.people-extras { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.people-extras:empty { display: none; }
.people-extras > div:empty { display: none; }
[data-people-workspace] > .notice { margin-bottom: var(--space-4); }
@media (max-width: 1100px) {
  .people-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people-toolbar .people-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .people-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-3) var(--space-3) 0; }
  .people-toolbar .people-search { grid-column: 1 / -1; }
  .people-workspace .people-tools { padding: var(--space-2) var(--space-3); }
  .people-workspace .people-head .people-add { width: 100%; justify-content: center; }
  /* 表格改卡片：每列一張卡，欄位以標籤呈現，操作按鈕兩欄排列。 */
  .content-screen .people-db, .people-db tbody, .people-db tr, .people-db td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  .people-db thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .people-db tbody { display: grid; gap: var(--space-3); padding: var(--space-3); }
  .people-db tr { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
  .people-db td, .people-db td:first-child, .people-db td:nth-child(2), .people-db td:nth-child(3) { width: 100%; padding: var(--space-2) var(--space-4); border-bottom: 0; white-space: normal; }
  .people-db td:first-child { padding-top: var(--space-4); }
  .people-db td:last-child { padding-bottom: var(--space-4); }
  .people-db td[data-label]:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 700; }
  .people-db .row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-screen .people-db .row-action { justify-content: center; width: 100%; white-space: normal; }
  .people-db tr.is-new td { background: transparent; }
  .people-db tr.is-new { border-color: var(--primary); background: var(--accent); box-shadow: inset 4px 0 0 var(--primary); }
  .people-db tr.is-new td:first-child { box-shadow: none; }
  .people-db .person-contact { white-space: normal; }
}

.people-drawer { position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--foreground); box-shadow: -12px 0 32px rgba(21, 44, 58, .16); overflow: hidden; }
.people-drawer[open] { display: flex; flex-direction: column; }
.people-drawer::backdrop { background: rgba(15, 23, 42, .45); }
.people-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); }
.people-drawer-head h2 { margin: 0; color: var(--navy-950); font-size: var(--text-xl); line-height: var(--leading-xl); overflow-wrap: anywhere; }
.people-drawer-subtitle { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); overflow-wrap: anywhere; }
.people-drawer-close { flex: 0 0 auto; width: var(--touch-target); height: var(--touch-target); }
.people-drawer-body { flex: 1 1 auto; display: grid; align-content: start; gap: var(--space-5); padding: var(--space-5); overflow-y: auto; }
.people-drawer-body .notice { margin: 0; }
.people-drawer .form-row { max-width: none; }
.people-drawer :is(input.live-field, select.live-field) { width: 100%; height: var(--control-height); min-height: var(--touch-target); box-sizing: border-box; }
.people-drawer :is(.primary-button, .secondary-button, .danger-outline) { min-height: var(--touch-target); }
.people-form, .people-inline-form { display: grid; gap: var(--space-4); }
.people-form-group { display: grid; gap: var(--space-4); }
.people-form-group[hidden], .people-drawer [data-when][hidden] { display: none; }
/* 公關室／AI 辦指定管理者授予（ADR 0056）：角色選到指定管理者時才出現的核准區塊。 */
.people-manager-approval { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.people-manager-approval[hidden] { display: none; }
.people-manager-approval legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.people-manager-approval textarea.live-field { width: 100%; min-height: calc(var(--control-height) * 2); box-sizing: border-box; resize: vertical; }
.people-form-preview { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--info-bg); color: var(--info); font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.people-form-preview[hidden] { display: none; }
.people-form-error { margin: 0; color: var(--destructive); font-size: var(--text-sm); font-weight: 700; }
.people-form-error:empty, .people-form-status:empty { display: none; }
.people-form-status { margin: 0; color: var(--gray-700); font-size: var(--text-sm); }
.people-drawer-section { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.people-drawer-section:last-child { padding-bottom: 0; border-bottom: 0; }
.people-drawer-section h3 { margin: 0; font-size: var(--text-base); }
.people-drawer-section .field-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.6; }
.people-edit-person .person-name { display: block; font-size: var(--text-lg); font-weight: 700; overflow-wrap: anywhere; }
.people-edit-person small { display: block; color: var(--gray-700); font-size: var(--text-sm); }
.people-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.people-facts div { min-width: 0; }
.people-facts dt { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 700; }
.people-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.people-history { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.people-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.people-drawer .checkbox.choice { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--touch-target); font-size: var(--text-sm); }
@media (max-width: 760px) {
  .people-drawer { width: 100vw; border-left: 0; }
  .people-drawer-head { padding: var(--space-4) var(--gutter-phone) var(--space-3); }
  .people-drawer-body { padding: var(--space-4) var(--gutter-phone); }
  .people-facts { grid-template-columns: minmax(0, 1fr); }
  .people-drawer .action-row { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .people-drawer[open] { animation: people-drawer-in .18s ease-out; }
  @keyframes people-drawer-in { from { transform: translateX(24px); } to { transform: none; } }
}
@media (min-width: 1200px) {
  .people-db td:last-child { width: 1%; }
  .people-db .row-actions { flex-wrap: nowrap; }
  .content-screen .people-db .row-action { padding: 0 10px; }
}
.people-drawer .choice-group .choice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.people-drawer .choice-group .choice { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: start; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); cursor: pointer; }
.people-drawer .choice-group .choice:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.people-drawer .choice-group .choice input { margin-top: 4px; }
.people-drawer .choice-group .choice span { font-weight: 700; font-size: var(--text-sm); }
.people-drawer .choice-group .choice small { grid-column: 2; color: var(--muted-foreground); font-size: var(--text-xs); }
@media (max-width: 760px) { .people-drawer .choice-group .choice-options { grid-template-columns: minmax(0, 1fr); } }
.people-drawer .field-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.6; }
.people-drawer [hidden] { display: none !important; }

/* ── 共用資料表：機關清單與品牌門市窗口（ADR 0050）沿用人員資料表的 people-* 外觀 ── */
.people-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.people-head-actions > button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); }
.people-head-actions .fa-icon, .people-db a.row-action .fa-icon, .people-drawer .action-row .fa-icon { width: 14px; height: 14px; }
.content-screen .people-db a.row-action, .people-drawer .action-row a.secondary-button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-target); padding: 0 var(--space-3); font-size: var(--text-sm); white-space: nowrap; text-decoration: none; box-sizing: border-box; }
.people-drawer .action-row > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.people-toolbar.org-toolbar { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)); }
.people-toolbar.brand-toolbar { grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr); }
.org-db td:first-child { width: 26%; }
.org-db td:nth-child(2) { width: auto; white-space: nowrap; }
.org-db td:nth-child(3) { width: 18%; white-space: normal; }
.org-db td:nth-child(4) { overflow-wrap: anywhere; }
.org-db td:nth-child(5) { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.org-db td small, .brand-db td small { display: block; color: var(--gray-700); font-size: var(--text-sm); overflow-wrap: anywhere; }
.org-db .org-code { font-variant-numeric: tabular-nums; }
.org-db .org-none { color: var(--muted-foreground); }
.org-db .person-place { display: block; overflow-wrap: anywhere; }
.org-db .row-actions { flex-wrap: wrap; }
.org-db td:nth-child(2) { font-size: var(--text-sm); }
@media (min-width: 761px) {
  .org-db td:first-child { width: auto; min-width: 190px; }
  .org-db td:nth-child(2) { white-space: nowrap; }
  .people-db.org-db td:last-child { width: 250px; min-width: 250px; }
  .people-db.org-db .row-actions { flex-wrap: wrap; }
}
.org-facts dd { font-size: var(--text-base); }
.people-drawer.org-drawer-wide { width: min(760px, 100vw); }
.people-drawer.org-drawer-batch { width: min(1100px, 100vw); }
/* 面板內沿用頁面上的機關建立樣式（那些樣式以 .content-screen 為範圍）。 */
.people-drawer .content-screen.org-drawer-content { min-height: 0; padding: 0; background: transparent; }
.org-drawer-content > .notice { margin: 0 0 var(--space-4); }
.org-drawer-content .panel.step-section:last-child { margin-bottom: 0; }
.org-drawer-content .keyin-kind-link { font: inherit; text-align: left; cursor: pointer; }
.org-drawer-content .keyin-kind-link[aria-pressed="true"] { border-color: var(--primary); background: var(--accent); box-shadow: inset 0 0 0 1px var(--primary); }
.org-onboarding-step button.org-onboarding-link { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
@media (max-width: 1100px) {
  .people-toolbar.org-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-toolbar.brand-toolbar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .people-toolbar.brand-toolbar .people-search { grid-column: auto; }
}
@media (max-width: 760px) {
  .people-workspace .people-head .people-head-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .people-workspace .people-head .people-head-actions > button { justify-content: center; }
  .people-toolbar.brand-toolbar { grid-template-columns: minmax(0, 1fr); }
  .people-toolbar.brand-toolbar .people-search { grid-column: 1 / -1; }
  /* 機關卡片：名稱與操作佔整列，類型與建立日期並排。 */
  .org-db tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-db td:first-child, .org-db td:nth-child(3), .org-db td:nth-child(4), .org-db td:last-child { grid-column: 1 / -1; }
  .org-db td:nth-child(2), .org-db td:nth-child(5) { white-space: normal; }
  .org-db tr.people-empty td { grid-column: 1 / -1; }
  .org-db td:first-child, .org-db td:nth-child(2), .org-db td:nth-child(3), .org-db td:nth-child(5) { width: auto; min-width: 0; }
  .content-screen .people-db a.row-action { justify-content: center; width: 100%; white-space: normal; }
  .people-drawer .action-row a.secondary-button { justify-content: center; }
}
[data-brand-workspace] { margin-bottom: var(--space-4); }
.brand-plan-section.needs-attention { outline: 2px solid var(--warning, #b45309); outline-offset: 2px; }

/* ── 資料表格工作區（年度門市規劃三頁，2026-10-13）─────────────────────────
   狀態數字列 → 篩選列 → 批次列 → 表格（就地展開）→ 分頁。規則見 docs/DESIGN.md「資料表格工作區」。
   全部以 .ws- 前綴，避免沿用舊規則（.panel form label、td 字級）而在不同頁長得不一樣。 */
.content-screen .panel.ws { overflow: visible; }
.ws { display: grid; min-width: 0; margin-bottom: var(--space-5); }
.ws-head { padding: var(--space-4) var(--space-4) 0; }
.content-screen .ws-head h2 { margin: 0; padding: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.content-screen .ws-head p { margin: var(--space-1) 0 0; padding: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.ws-page-chips .ws-chips { padding: 0 0 var(--space-3); }

/* 狀態數字列：有外框、顯示筆數、可點（篩選）。 */
.ws-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.ws-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-4); border: 1px solid var(--input); border-radius: 999px; color: var(--foreground); background: var(--card); font-size: var(--text-sm); font-weight: 400; white-space: nowrap; }
.ws-chip:hover { border-color: var(--primary); }
.ws-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ws-chip-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.ws-chip[aria-pressed="true"] { border-color: var(--primary); color: var(--accent-foreground); background: var(--accent); font-weight: 600; }

/* 篩選列：44px 控制項，標籤寫在框內左側。 */
.ws-filter-toggle { display: none; }
.ws-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.ws-field { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--control-height); padding-left: var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--card); font-size: var(--text-sm); font-weight: 400; }
.ws-field:focus-within { border-color: var(--ring); box-shadow: var(--focus-ring); }
.ws-field-label { white-space: nowrap; }
.ws-field select, .ws-field input { min-width: 0; height: calc(var(--control-height) - 2px); padding: 0 var(--space-3) 0 0; border: 0; border-radius: var(--radius-md); outline: none; color: var(--foreground); background: transparent; font-size: var(--text-sm); font-weight: 600; }
.ws-field select:disabled { cursor: not-allowed; }
.ws-field.is-disabled { color: var(--muted-foreground); background: var(--muted); }
.ws-search { flex: 1 1 200px; padding-right: var(--space-3); }
.ws-search input { flex: 1 1 auto; width: 100%; font-weight: 400; }
.ws-search input::placeholder { color: var(--muted-foreground); }
.content-screen .ws .text-button { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--space-2); color: var(--info); font-size: var(--text-sm); font-weight: 600; }

/* 批次列：貼齊表格的色帶；批次按鈕用外框主色。 */
.ws-bulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); color: var(--accent-foreground); background: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.ws-bulk-hint { color: var(--muted-foreground); font-weight: 400; }
.ws-bulk-list { flex: 1 1 100%; margin: 0; padding-left: var(--space-5); font-weight: 400; }
.content-screen .ws .ws-outline { border-color: var(--primary); color: var(--primary); background: var(--card); }
.content-screen .ws .ws-outline:hover { background: var(--accent); }
.content-screen .ws .ws-outline:disabled { border-color: var(--input); color: var(--muted-foreground); }
.ws-bulk.is-success { color: var(--success); background: var(--success-bg); }
.ws-bulk.is-warning { color: var(--warning); background: var(--warning-bg); }
.ws-bulk.is-confirm { position: static; display: block; padding: var(--space-4); border-block: 1px solid var(--primary); color: var(--foreground); background: var(--card); box-shadow: inset 3px 0 0 var(--primary); font-weight: 400; }
.ws-confirm { display: grid; gap: var(--space-3); max-width: 76ch; }
.content-screen .ws-confirm h3 { margin: 0; padding: 0; font-size: var(--text-base); line-height: var(--leading-base); }
.ws-confirm-names { margin: 0; color: var(--foreground); font-weight: 600; overflow-wrap: anywhere; }
.ws-progress { margin: 0; color: var(--info); font-size: var(--text-sm); }
.ws-progress:empty { display: none; }

/* 計數列與分頁。 */
.ws-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--text-sm); }
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--text-sm); }
.ws-pager .ws-range { margin-right: var(--space-2); }

/* 表格：標籤與短欄位不換行（table-layout:auto＋nowrap，讓門市欄吃剩下的寬度）。 */
.ws-table-wrap { overflow-x: auto; }
.content-screen .ws-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: auto; }
.content-screen .ws-table th { padding: var(--space-2) var(--space-3); border-block: 1px solid var(--border); color: var(--muted-foreground); background: var(--muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.content-screen .ws-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); color: var(--foreground); font-size: var(--text-sm); line-height: var(--leading-sm); vertical-align: middle; }
.content-screen .ws-table tbody tr:last-child > td { border-bottom: 0; }
.content-screen .ws-table .ws-nowrap { width: 1%; white-space: nowrap; }
.content-screen .ws-table .ws-num { font-variant-numeric: tabular-nums; }
.ws-store { min-width: 0; }
.content-screen .ws-store-name { display: block; color: var(--foreground); font-size: var(--text-base); font-weight: 600; line-height: var(--leading-lg); overflow-wrap: anywhere; }
.ws-store-address { display: block; margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ws-dim { color: var(--muted-foreground); }
.ws-row { cursor: pointer; }
.ws-row > td { transition: background-color .6s ease; }
.ws-row:hover > td { background: var(--muted); }
.ws-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ws-row.is-open > td { background: var(--accent); }
.ws-row.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ws-row.is-done > td { background: var(--success-bg); }
.ws-row.is-failed > td, .ws-table tr.is-failed > td { background: var(--destructive-bg); }
.ws-row-error { margin: var(--space-1) 0 0; color: var(--destructive); font-size: var(--text-sm); font-weight: 600; }
.ws-done-mark { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); color: var(--success); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ws-done-mark .fa-icon { width: 13px; height: 13px; }
.content-screen .ws-table .ws-c-check { width: 44px; padding-block: 0; text-align: center; }
.ws-check-hit { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); cursor: pointer; }
.ws-check-hit input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.ws-check-hit input:disabled { cursor: not-allowed; opacity: .4; }
.ws-check-all-text { display: none; }
.content-screen .ws-table .ws-c-chev { width: 40px; color: var(--muted-foreground); text-align: center; }
.ws-chev { display: inline-block; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--fa-mask-chevron-down) center / contain no-repeat; mask: var(--fa-mask-chevron-down) center / contain no-repeat; transition: transform .16s ease; }
.ws-row.is-open .ws-chev { transform: rotate(180deg); }
.content-screen .ws-table .ws-c-mmeta { display: none; }

/* 展開列：淺底、不再包卡片。 */
.content-screen .ws-table .ws-expand > td { padding: var(--space-4); border-bottom: 1px solid var(--border); background: var(--muted); cursor: auto; }
.ws-expand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: start; }
.content-screen .ws-label { margin: 0 0 var(--space-2); padding: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-sm); }
.ws-label small { margin-left: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 400; }
.ws-quote { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ws-quiet, .ws-hint { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
.ws-quiet + .ws-quiet { margin-top: var(--space-2); }
.ws-fact-line { margin: 0 0 var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ws-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.ws-facts dt { color: var(--muted-foreground); }
.ws-facts dd { margin: 0; overflow-wrap: anywhere; }
.ws-history { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.ws-history-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ws-history-list li { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--card); overflow-wrap: anywhere; }
.ws-history-list span { color: var(--muted-foreground); }
.ws-source { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ws-source p { margin: 0; color: var(--muted-foreground); }
.ws-source p.ws-source-head { color: var(--foreground); }
.ws-source .ws-form { margin-top: var(--space-2); padding: var(--space-3) 0 0; border-top: 1px solid var(--border); }
.content-screen .ws-form { display: grid; gap: var(--space-3); min-width: 0; padding: 0; }
.content-screen .ws-form .form-row { display: grid; gap: var(--space-2); }
.content-screen .ws-form textarea.live-field { min-height: 72px; }
.content-screen .ws-form :is(input.live-field, select.live-field, textarea.live-field) { width: 100%; }
.ws-seg-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ws-seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; overflow: hidden; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); }
.ws-seg-option { min-height: var(--touch-target); padding: 0 var(--space-2); border: 0; border-right: 1px solid var(--input); color: var(--foreground); background: transparent; font-size: var(--text-sm); font-weight: 600; }
.ws-seg-option:last-child { border-right: 0; }
.ws-seg-option:hover { background: var(--muted); }
.ws-seg-option:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ws-seg-option[aria-pressed="true"] { color: var(--primary-foreground); background: var(--primary); }
.ws-seg-option.is-danger[aria-pressed="true"] { color: var(--destructive-foreground); background: var(--destructive); }
.ws-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.content-screen .ws-form-actions > button { min-height: var(--touch-target); }
.ws-kbd { color: var(--muted-foreground); font-size: var(--text-xs); }
.ws-form-error { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--destructive); background: var(--destructive-bg); font-size: var(--text-sm); }
.ws-form-error:empty { display: none; }
.content-screen .ws-form .field-error:empty { display: none; }
.content-screen .ws-form [aria-invalid="true"] { border-color: var(--destructive); }

/* 預覽（公關室發布）與堆疊表格。 */
.ws-preview { display: grid; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.content-screen .ws-preview-head h3 { margin: 0; padding: 0; font-size: var(--text-base); }
.content-screen .ws-preview-head p { margin: var(--space-1) 0 0; padding: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.ws-preview .ws-table, .ws-expand .ws-table { min-width: 640px; background: var(--card); }
.ws-notes { margin: 0; padding-left: var(--space-5); }
.ws-details > summary { min-height: var(--touch-target); display: flex; align-items: center; color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ws-details p { margin: 0 0 var(--space-1); font-size: var(--text-sm); }

/* 狀態：載入占位、查無資料、待處理清空、讀取失敗。 */
.ws-state { padding: var(--space-5) var(--space-4); border-top: 1px solid var(--border); }
.content-screen .ws-state .ui-state { margin: 0; }
.ws-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ws-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ws-pills span { padding: var(--space-1) var(--space-3); border-radius: 999px; color: var(--foreground); background: var(--muted); font-size: var(--text-sm); }
.ws-skeleton > td { cursor: default; }
.ws-skel { display: block; height: 14px; border-radius: var(--radius-sm); background: var(--secondary); }
.ws-skel.is-short { width: 60%; }
.ws-skel + .ws-skel { margin-top: var(--space-2); }
.ws-skel.is-tag { width: 56px; height: 22px; border-radius: 999px; }

/* 頁首「說明」收合（與您的關係、操作步驟）。 */
.page-intro-compact .page-intro-help { flex: 0 0 auto; }
.page-intro-compact .page-intro-help[open] { flex: 1 1 100%; }
.page-intro-help > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.page-intro-help-body { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.page-intro-help-body .page-intro-steps { padding: 0; border: 0; }
.content-screen .page-heading .page-intro-help-body .page-intro-role { margin: 0; }

@media (max-width: 760px) {
  .ws-filter-toggle { display: inline-flex; align-items: center; justify-self: start; margin: 0 var(--space-4) var(--space-3); }
  .ws-filters:not(.is-open) { display: none; }
  .ws-filters { flex-direction: column; align-items: stretch; }
  .ws-filters > * { flex: 0 0 auto; }
  .ws-clear { align-self: flex-start; }
  .ws-field { width: 100%; }
  .ws-field select { flex: 1 1 auto; }
  .ws-meta > span:nth-child(2) { display: none; }
  /* 表格改為一列一塊：門市名＋縣市行政區＋狀態標籤，品牌／提案數一行小字。 */
  .content-screen .ws-table:not(.ws-stack) { min-width: 0; }
  .ws-table:not(.ws-stack), .ws-table:not(.ws-stack) > tbody { display: block; }
  .ws-table:not(.ws-stack) > thead { display: block; }
  .ws-table:not(.ws-stack) > thead tr { display: flex; }
  .ws-table:not(.ws-stack) > thead th { display: none; }
  .content-screen .ws-table:not(.ws-stack) > thead th.ws-c-check { display: flex; width: auto; padding: 0 var(--space-1); border-top: 0; background: transparent; }
  .ws-check-all-hit { width: auto; grid-auto-flow: column; gap: var(--space-2); padding-right: var(--space-3); }
  .ws-check-all-text { display: inline; color: var(--foreground); }
  .ws-table:not(.ws-stack) > tbody > tr.ws-row, .ws-table:not(.ws-stack) > tbody > tr.ws-skeleton { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .ws-table.has-check > tbody > tr.ws-row, .ws-table.has-check > tbody > tr.ws-skeleton { padding-left: calc(var(--touch-target) + var(--space-2)); }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td { display: block; width: auto; padding: 0; border: 0; background: transparent; }
  .ws-table:not(.ws-stack) > tbody > tr.ws-row:hover { background: var(--muted); }
  .ws-table:not(.ws-stack) > tbody > tr.ws-row.is-open { background: var(--accent); box-shadow: inset 3px 0 0 var(--primary); }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr.ws-row.is-open > td:first-child { box-shadow: none; }
  .ws-table:not(.ws-stack) > tbody > tr.ws-row.is-done { background: var(--success-bg); }
  .ws-table:not(.ws-stack) > tbody > tr.ws-row.is-failed { background: var(--destructive-bg); }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-c-check { position: absolute; top: var(--space-1); left: var(--space-1); width: auto; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-c-chev { position: absolute; top: var(--space-4); right: var(--space-3); width: auto; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-m-store { flex: 1 1 100%; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-m-place { order: 2; color: var(--muted-foreground); }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-m-status { order: 3; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td:is(.ws-m-meta, .ws-m-hide) { display: none; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr > td.ws-c-mmeta { display: block; order: 4; flex: 1 1 100%; color: var(--muted-foreground); font-size: var(--text-sm); }
  .ws-table:not(.ws-stack) > tbody > tr.ws-expand { display: block; }
  .content-screen .ws-table:not(.ws-stack) > tbody > tr.ws-expand > td { display: block; padding: var(--space-4); border-bottom: 1px solid var(--border); background: var(--muted); }
  .ws-expand-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ws-form-actions > button { flex: 1 1 140px; }
  /* 堆疊表格（預覽、發布明細）：每格一行，前面加欄名。 */
  .content-screen .ws-stack { min-width: 0; }
  .ws-stack, .ws-stack tbody, .ws-stack tr, .ws-stack td { display: block; width: 100%; }
  .ws-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ws-stack tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
  .content-screen .ws-stack td { padding: var(--space-1) var(--space-3); border: 0; white-space: normal; }
  .ws-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 600; }
  .ws-preview .ws-table, .ws-expand .ws-table { min-width: 0; }
  /* 批次列固定在畫面底部。 */
  .ws-bulk:not([hidden]) { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 50; max-height: 70vh; overflow-y: auto; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
  .ws:has(.ws-bulk:not([hidden])) { margin-bottom: calc(var(--space-16) * 3); }
  .ws-pager { justify-content: space-between; }
  .ws-pager .ws-range { flex: 1 1 100%; margin: 0; }
  .ws-pager button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-row > td, .ws-chev { transition: none; }
}
/* 工作區內的輸入框與段落：蓋過 .content-screen input／p 的全域樣式（權重較高的舊規則）。 */
.content-screen.content-screen .ws .ws-field :is(input, select)[data-ws-filter] { width: auto; min-height: 0; height: calc(var(--control-height) - 2px); padding: 0 var(--space-3) 0 0; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; font-size: var(--text-sm); }
.content-screen.content-screen .ws .ws-search input[data-ws-filter] { flex: 1 1 auto; width: 100%; padding: 0; }
.content-screen.content-screen .ws .ws-field :is(input, select)[data-ws-filter]:focus-visible { outline: none; }
.content-screen .ws p { max-width: none; }
.content-screen .ws :is(.ws-quiet, .ws-hint, .ws-row-error, .ws-form-error, .ws-progress, .ws-confirm-names, .ws-fact-line) { margin-block: 0; }
.content-screen .ws .ws-quiet + .ws-quiet { margin-top: var(--space-2); }
.content-screen .ws .ws-source p { margin: 0; }
.content-screen .ws .ui-state p { margin: 0; }
.ws.no-chips .ws-filters { padding-top: var(--space-3); }
.content-screen .ws-form .ws-seg > .ws-seg-option { justify-self: stretch; width: 100%; }

/* ── 年度設站計畫表格（年度計畫工作台、計畫詳情挑選表、場勘、門市協作、場次排程，2026-10-13 第二批）──
   沿用上方 .ws-*；這裡只補：門市名稱連結、計畫欄寬、展開區內的時段／場次「一行一筆」、「更多」收合與整批排程列。 */
.content-screen .ws-store-link { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content-screen .ws-store-link:hover { color: var(--primary); text-decoration-color: currentColor; }
.content-screen .ws-store-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.content-screen .ws-table .ws-c-org { min-width: 8em; max-width: 14em; }
.content-screen .ws-table .ws-c-next { min-width: 8em; max-width: 13em; }
.content-screen .ws-table .ws-c-who { min-width: 6.5em; max-width: 11em; color: var(--muted-foreground); }
/* 展開區裡的 .issue-list／.contact-sections／details 不套舊卡片的內距與上框線。 */
.content-screen .ws .ws-expand :is(.issue-list, .contact-sections, .session-list) { padding: 0; }
.content-screen .ws .ws-expand details { border-top: 0; }
.content-screen .ws .ws-expand summary { padding: 0; }
.content-screen .ws .ws-expand .ws-label { margin-top: var(--space-1); }
.content-screen .ws .ws-expand .ws-label small { display: inline; margin-left: var(--space-2); }
/* 舊規則 td b, td small { display: block } 不適用於展開區的行內文字。 */
.content-screen .ws .ws-expand :is(.survey-slot-note, .ws-source-head, .ws-facts dd, .case-progress) :is(b, small) { display: inline; }
.content-screen .ws .ws-expand .case-progress .case-step-label { display: inline; }
.content-screen .ws-form-actions > a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

/* 年度計畫：進度條＋推進（唯一主要按鈕）在上，衛生所與窗口在下，完整紀錄最後。 */
.annual-plan-expand { display: grid; gap: var(--space-4); }
.annual-plan-expand .case-progress { margin: 0; background: var(--card); }
.annual-plan-expand .case-progress-slot { display: grid; gap: var(--space-3); }
.annual-plan-manage { align-items: start; }
.content-screen .ws .contact-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.content-screen .ws .annual-plan-contact { padding: 0; border-top: 0; }
.content-screen .ws .annual-plan-history { margin-top: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.annual-plan-all-orgs { justify-self: start; }
.content-screen .ws .annual-plan-detail-content > [role="status"]:empty, .content-screen .ws .annual-plan-detail-content > [role="status"][hidden] { display: none; }
.content-screen .ws .ws-form > p[role="status"]:empty { display: none; }

/* 場勘時段、接種場次：一行一筆（淺底上的白色列），狀態標籤靠右，「更多」收在列尾。 */
.survey-slot-list, .session-rows { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.survey-slot-row, .session-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-sm); }
.survey-slot-main, .session-row-main { display: grid; gap: 2px; min-width: 0; }
.survey-slot-main b, .session-row-main b { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.survey-slot-main span, .survey-slot-main small, .session-row-main span { color: var(--muted-foreground); overflow-wrap: anywhere; }
.survey-slot-state, .session-row-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-2); }
.content-screen .ws .survey-slot-note { grid-column: 1 / -1; margin: 0; color: var(--foreground); overflow-wrap: anywhere; }
.content-screen .ws .survey-slot-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.content-screen .ws .survey-slot-actions:empty { display: none; }
.content-screen .ws .survey-slot-actions form { flex: 0 1 auto; display: grid; gap: var(--space-2); margin: 0; }
.content-screen .ws .survey-slot-actions form.survey-result { flex: 1 1 100%; }
.content-screen .ws .survey-slot-actions > .ws-quiet { align-self: center; }
.ws-more { grid-column: 1 / -1; }
.content-screen .ws .ws-more > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; list-style: none; }
.content-screen .ws .ws-more > summary::-webkit-details-marker { display: none; }
.ws-more-body { display: grid; gap: var(--space-3); padding: var(--space-2) 0 var(--space-1); border-top: 1px solid var(--border); }
.content-screen .ws .ws-more-body > details > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.content-screen .ws .ws-more-body form { display: grid; gap: var(--space-3); max-width: 64ch; margin-top: var(--space-2); }
.content-screen .ws .ws-more-body .history-content p { margin: 0 0 var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }
.content-screen .ws .survey-cancel-area, .content-screen .ws .survey-proxy-area { display: grid; gap: var(--space-2); justify-items: start; }
.content-screen .ws .survey-cancel-area .survey-cancel, .content-screen .ws .survey-proxy-area .survey-proxy { width: 100%; }
.survey-create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.content-screen .ws .survey-create, .content-screen .ws .batch-schedule, .content-screen .ws .issue-create { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.survey-expand, .schedule-expand { display: grid; gap: var(--space-3); max-width: 1040px; }
.content-screen .ws .issue-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); list-style: none; }
.issue-row { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-sm); overflow-wrap: anywhere; }
.content-screen .ws .issue-row p { margin: 0; }
.content-screen .ws .issue-row .ws-form { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.content-screen .ws .issue-history > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; }

/* 整批排程：每列「場次 N｜開始｜結束｜預估人數｜移除」；衝突列紅框並在下方寫原因。 */
.batch-schedule .schedule-rows { display: grid; gap: var(--space-1); }
.content-screen .ws .batch-schedule .schedule-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 120px auto; padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); }
.content-screen .ws .batch-schedule .schedule-row label { display: grid; gap: var(--space-1); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 600; }
.content-screen .ws .batch-schedule .schedule-row.has-conflict { outline-offset: 0; background: var(--destructive-bg); }
.content-screen .ws .schedule-remove { align-self: end; min-height: var(--control-height); color: var(--destructive); }
.content-screen .ws .schedule-remove[hidden] { display: none; }
.content-screen .ws .schedule-add { justify-self: start; }
.content-screen .ws .conflict-result .notice { margin: 0; }
@media (max-width: 760px) {
  .survey-slot-row, .session-row { grid-template-columns: minmax(0, 1fr); }
  .survey-slot-state, .session-row-state { justify-content: flex-start; }
  .content-screen .ws .batch-schedule .schedule-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .content-screen .ws .batch-schedule .schedule-row > b { grid-column: 1 / -1; }
  .content-screen .ws .schedule-remove { grid-column: 2; justify-self: end; }
  .content-screen .ws .survey-slot-actions form, .content-screen .ws .survey-slot-actions button { flex: 1 1 100%; width: 100%; }
}
.content-screen .ws .collab-facts { margin: 0 0 var(--space-2); }
/* 推進表單在展開列內：原因欄與主要按鈕同一行（手機改上下）。 */
.content-screen .ws .plan-transition { display: grid; gap: var(--space-2); max-width: 880px; }
.content-screen .ws .plan-transition label:not(.case-check) { display: grid; gap: var(--space-1); color: var(--foreground); font-size: var(--text-sm); font-weight: 600; }
.content-screen .ws .plan-forward { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.content-screen .ws .plan-other-actions > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); }
@media (max-width: 640px) { .content-screen .ws .plan-forward { grid-template-columns: minmax(0, 1fr); } }
/* 「更多」收合時放在列尾（同一行），展開後整行顯示內容。 */
@media (min-width: 761px) {
  .survey-slot-row, .session-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ws-more:not([open]) { grid-column: 3; grid-row: 1; }
  .ws-more[open] { grid-column: 1 / -1; }
}
.content-screen .page-intro-actions > a { display: inline-flex; align-items: center; justify-content: center; }
.survey-slot-row > p, .session-row > p { grid-column: 1 / -1; margin: 0; }

/* 場次結案（2026-10-14 資料表格工作區）：展開列的結案進度是「進度」不是按鈕——圓點＋連線，
   已完成＝綠色勾、目前這一步＝主色實心圓與粗體字、尚未開始＝灰色空心圓。 */
.closeout-expand { display: grid; gap: var(--space-4); max-width: 880px; }
.content-screen .ws .ws-expand .closeout-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 0; padding: 0; list-style: none; }
.content-screen .ws .ws-expand .closeout-step { position: relative; display: grid; justify-items: center; gap: var(--space-1); margin: 0; padding: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); text-align: center; }
.closeout-step::before { content: ""; position: absolute; top: 11px; right: 50%; z-index: 0; width: 100%; height: 2px; background: var(--border); }
.closeout-step:first-child::before { display: none; }
.closeout-step.is-done::before, .closeout-step.is-current::before { background: var(--success); }
.closeout-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%; background: var(--card); color: var(--success); }
.closeout-step-dot .fa-icon, .closeout-step-dot svg { width: 12px; height: 12px; }
.closeout-step.is-done .closeout-step-dot { border-color: var(--success); background: var(--success-bg); }
.closeout-step.is-done { color: var(--success); }
.closeout-step.is-current .closeout-step-dot { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px var(--card); }
.content-screen .ws .ws-expand .closeout-step.is-current { color: var(--foreground); font-weight: 700; }
.content-screen .ws .ws-expand .closeout-step-label { display: block; }
.content-screen .ws .ws-expand p.closeout-context { margin: 0; color: var(--foreground); font-size: var(--text-base); line-height: var(--leading-base); }
.closeout-step-form, .closeout-correct { max-width: 720px; }
.closeout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.closeout-unfilled { color: var(--warning); font-weight: 600; }
.content-screen .ws p.closeout-flash { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); font-size: var(--text-sm); font-weight: 600; }
.content-screen .ws p.closeout-flash[hidden] { display: none; }
@media (max-width: 760px) {
  .closeout-fields { grid-template-columns: minmax(0, 1fr); }
  .content-screen .ws .ws-expand .closeout-step { font-size: var(--text-xs); }
}

/* ── 年度接種統計儀表板（年度設站計畫總覽，ADR 0054）──────────────────────
   圖表是 app.js 產生的 inline SVG：顏色只在這裡用 token 指定（SVG 不寫 style 屬性）。
   預估＝淺灰、實際＝主色、之後的預估＝虛線框；累計線實線＝實際、虛線＝預估。 */
.dash-filters { display: grid; margin-bottom: var(--space-4); padding-top: var(--space-3); }
.content-screen .dash-filters { overflow: visible; }
.dash-asof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0 var(--space-4) var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); }
.content-screen .dash-asof .text-button { min-height: var(--touch-target); padding: 0 var(--space-2); color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.content-screen .dash-filters .ws-clear { min-height: var(--touch-target); padding: 0 var(--space-2); color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.dash-body { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.dash-body[aria-busy="true"] { opacity: .6; }
.content-screen .dash-kpis.metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
.content-screen .dash-kpis.metric-grid.is-brand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-screen .dash-kpi { align-items: flex-start; }
.dash-kpi.is-warn { border-color: var(--warning); background: var(--warning-bg); }
.dash-kpi-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.content-screen .dash-kpi b { margin: 0; white-space: nowrap; }
.content-screen .dash-kpi .dash-of { display: inline; color: var(--muted-foreground); font-size: var(--text-base); font-weight: 600; }
.content-screen .dash-kpi small { color: var(--muted-foreground); }
.content-screen .dash-kpi-extra { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-xs); }
.content-screen .dash-kpi .dash-kpi-link { justify-self: start; min-height: var(--touch-target); padding: 0; color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.dash-meter { display: block; width: 100%; height: 8px; margin-top: var(--space-1); border-radius: 4px; overflow: hidden; }
.dash-meter-track { fill: var(--gray-200); }
.dash-meter-fill { fill: var(--primary); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.dash-panel { padding: var(--space-4); }
.content-screen .dash-panel { overflow: visible; }
.dash-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.content-screen .dash-h2 { margin: 0; font-size: 17px; font-weight: 650; line-height: var(--leading-lg); }
.content-screen .dash-h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.dash-note { margin: var(--space-2) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.dash-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); padding: 0; list-style: none; color: var(--muted-foreground); font-size: var(--text-xs); }
.dash-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.dash-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.dash-sw.is-expected { background: var(--gray-300); }
.dash-sw.is-actual { background: var(--primary); }
.dash-sw.is-future { border: 1px dashed var(--gray-500); background: transparent; }
.dash-sw.is-line-actual { height: 0; border-top: 3px solid var(--primary); border-radius: 0; }
.dash-sw.is-line-expected { height: 0; border-top: 2px dashed var(--gray-600); border-radius: 0; }
.dash-chart { width: 100%; min-height: 180px; overflow: hidden; }
.dash-svg { display: block; max-width: 100%; height: auto; }
.dash-svg .dash-gridline { stroke: var(--gray-200); stroke-width: 1; }
.dash-svg .dash-gridline.is-base { stroke: var(--gray-400); }
.dash-svg .dash-axis { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-svg .dash-axis.is-current { fill: var(--foreground); font-weight: 700; }
.dash-svg .dash-bar-expected { fill: var(--gray-300); }
.dash-svg .dash-bar-future { fill: transparent; stroke: var(--gray-500); stroke-width: 1; }
.dash-svg .dash-bar-actual { fill: var(--primary); }
.dash-svg .dash-line-actual { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.dash-svg .dash-line-expected { fill: none; stroke: var(--gray-600); stroke-width: 1.5; }
.dash-svg .dash-dot-actual { fill: var(--primary); }
.dash-table-toggle { margin-top: var(--space-3); }
.dash-table-toggle > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.content-screen .dash-table { min-width: 0; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.content-screen .dash-table th, .content-screen .dash-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
.content-screen .dash-table tbody th, .content-screen .dash-table tfoot th { color: var(--foreground); background: transparent; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.content-screen .dash-table tfoot th, .content-screen .dash-table tfoot td { border-bottom: 0; border-top: 2px solid var(--gray-300); font-weight: 700; }
.content-screen .dash-table .num { text-align: right; white-space: nowrap; }
.content-screen .dash-table .dash-drill { min-height: var(--touch-target); padding: 0; color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.content-screen .dash-table .dash-cell-note { display: block; color: var(--muted-foreground); font-size: var(--text-xs); }
.dash-prog { min-width: 120px; }
.dash-prog .dash-meter { display: inline-block; width: 72px; margin: 0 var(--space-2) 0 0; vertical-align: middle; }
.dash-prog span { font-variant-numeric: tabular-nums; }
.dash-side { display: grid; gap: var(--space-4); }
.dash-subblock + .dash-subblock { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.dash-todo { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.dash-todo li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.dash-todo b { display: block; font-size: var(--text-sm); }
.dash-todo small { display: block; color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-xs); }
.dash-todo-n { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-todo-n.is-amber { color: var(--warning); background: var(--warning-bg); }
.dash-todo-n.is-red { color: var(--destructive); background: var(--destructive-bg); }
.dash-todo-n.is-blue { color: var(--info); background: var(--info-bg); }
.content-screen .dash-todo .text-button { min-height: var(--touch-target); padding: 0 var(--space-2); color: var(--info); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.dash-ok { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--success); font-size: var(--text-sm); font-weight: 600; }
.dash-ok svg { width: 16px; height: 16px; }
.dash-seg { display: inline-flex; border: 1px solid var(--input); border-radius: var(--radius-md); overflow: hidden; }
.dash-seg-button { min-width: 64px; min-height: var(--touch-target); padding: 0 var(--space-3); border: 0; color: var(--foreground); background: var(--card); font-size: var(--text-sm); }
.dash-seg-button + .dash-seg-button { border-left: 1px solid var(--input); }
.dash-seg-button[aria-pressed="true"] { color: var(--accent-foreground); background: var(--accent); font-weight: 700; }
.dash-seg-button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.dash-upc { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.dash-upc > div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--muted); }
.dash-upc b { display: block; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.dash-upc small { color: var(--muted-foreground); font-size: var(--text-xs); }
.dash-upc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-upc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.dash-upc-when { grid-column: 1 / -1; color: var(--muted-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.dash-upc-name { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.dash-upc-list .status-badge { grid-row: 2 / span 2; grid-column: 2; align-self: center; }
.dash-upc-meta { grid-column: 1; color: var(--muted-foreground); font-size: var(--text-xs); }
.dash-retry { margin: var(--space-2) 0 0; }
@media (max-width: 1300px) {
  .content-screen .dash-kpis.metric-grid, .content-screen .dash-kpis.metric-grid.is-brand { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .content-screen .dash-kpis.metric-grid, .content-screen .dash-kpis.metric-grid.is-brand { grid-template-columns: minmax(0, 1fr); }
  .dash-panel { padding: var(--space-3); }
  .content-screen .dash-table .dash-hide-m { display: none; }
  .content-screen .dash-table th, .content-screen .dash-table td { padding: var(--space-2); }
  .dash-prog { min-width: 0; }
  .dash-prog .dash-meter { width: 48px; }
  .dash-filters .ws-filter-toggle { margin: 0 var(--space-4) var(--space-2); }
}

/* 場次執行回報（2026-10-15 改版）：手機先看清單（分頁＋卡片），選了場次才看詳情；桌機左清單、右詳情。
   詳情的主要按鈕在手機固定在畫面底部、56px 高（docs/DESIGN.md「控制項高度」的例外：現場單手操作）。 */
.exr-offline, .exr-flash { margin: 0 0 var(--space-4); }
.exr-offline .notice-body > p { margin: 0; }
.content-screen .exr-offline .text-button { justify-self: start; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); text-align: left; }
.content-screen p.exr-flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.content-screen p.exr-flash.is-success { color: var(--success); background: var(--success-bg); }
.content-screen p.exr-flash.is-error { color: var(--destructive); background: var(--destructive-bg); }
.content-screen p.exr-flash.is-warning { color: var(--warning); background: var(--warning-bg); }
.exr { display: grid; gap: var(--space-4); align-items: start; }
.exr-list, .exr-detail { display: grid; gap: var(--space-3); min-width: 0; }
.exr-detail { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.exr-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-lg); background: var(--secondary); }
.content-screen .exr-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; min-height: var(--touch-target); padding: 0 var(--space-1); border: 0; border-radius: var(--radius-md); color: var(--muted-foreground); background: transparent; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.content-screen .exr-tab[aria-pressed="true"] { color: var(--foreground); background: var(--card); box-shadow: var(--shadow-sm); }
.exr-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.exr-tab-count { font-variant-numeric: tabular-nums; }
.exr-year { display: flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.exr-year select { flex: 1 1 auto; max-width: 200px; }
.exr-cards { display: grid; gap: var(--space-3); }
.exr-cards > .ui-state { margin: 0; }
.exr-card { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.exr-card.is-primary { border: 2px solid var(--primary); }
.exr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.exr-card-head .tag { flex: 0 0 auto; }
.content-screen a.exr-card-title { color: var(--foreground); font-size: var(--text-base); font-weight: 700; line-height: var(--leading-base); text-decoration: none; }
.content-screen a.exr-card-title:hover { text-decoration: underline; }
.content-screen .exr-card p { margin: 0; }
.exr-card-address, .exr-muted { color: var(--muted-foreground); font-size: var(--text-sm); }
.exr-card-when { color: var(--foreground); font-size: var(--text-sm); }
.exr-overdue { color: var(--warning); font-weight: 600; }
.content-screen a.exr-card-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; text-decoration: none; justify-self: start; }
.exr-card-link svg, .exr-card-link .fa-icon, .exr-callout svg, .exr-next svg { width: 12px; height: 12px; }
.exr-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.exr-progress li { display: grid; gap: var(--space-1); color: var(--muted-foreground); font-size: var(--text-xs); text-align: center; }
.exr-progress li::before { content: ""; height: 4px; border-radius: 999px; background: var(--border); }
.exr-progress li.is-done { color: var(--success); font-weight: 600; }
.exr-progress li.is-done::before { background: var(--success); }
.content-screen .exr-big { width: 100%; min-height: 56px; margin-top: var(--space-2); font-size: var(--text-lg); }
.exr-callout { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--warning-bg); border-radius: var(--radius-lg); background: var(--warning-bg); }
.content-screen .exr-callout b { color: var(--warning); }
.content-screen .exr-callout p { margin: 0; font-size: var(--text-sm); }
.content-screen .exr-callout .text-button, .exr-detail .text-button { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); }
.content-screen a.exr-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; text-decoration: none; justify-self: start; }
.exr-back svg, .exr-back .fa-icon { width: 12px; height: 12px; }
.exr-detail-head { display: grid; gap: var(--space-1); }
.exr-detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.content-screen .exr-detail-head h2 { margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); }
.content-screen .exr-detail-head p { margin: 0; font-size: var(--text-sm); }
.exr-timeline { display: grid; gap: 0; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.exr-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; align-content: start; gap: var(--space-3); min-height: 52px; }
.exr-step::before { content: ""; position: absolute; top: 28px; bottom: 0; left: 13px; width: 2px; background: var(--border); }
.exr-step:last-child::before { display: none; }
.exr-step.is-done::before { background: var(--success); }
.exr-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--border); border-radius: 50%; color: var(--card); background: var(--card); }
.exr-dot svg, .exr-dot .fa-icon { width: 13px; height: 13px; }
.exr-step.is-done .exr-dot { border-color: var(--success); background: var(--success); }
.exr-step.is-next .exr-dot { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 5px var(--card); }
.exr-step.is-queued .exr-dot { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.exr-step-text { display: grid; gap: 0; padding-bottom: var(--space-3); }
.exr-step-text b { font-size: var(--text-base); font-weight: 600; line-height: 28px; }
.exr-step.is-next .exr-step-text b { color: var(--primary); font-weight: 700; }
.exr-step.is-todo .exr-step-text b { color: var(--muted-foreground); font-weight: 400; }
.exr-step-meta { color: var(--muted-foreground); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.exr-step.is-queued .exr-step-meta { color: var(--warning); font-weight: 600; }
.content-screen .exr-step .exr-jump { min-height: var(--touch-target); margin-top: -8px; font-size: var(--text-sm); }
.exr-note > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.exr-note textarea { width: 100%; min-height: 80px; }
.exr-inline-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.content-screen p.exr-help { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); }
.exr-actionbar { display: grid; gap: var(--space-1); justify-items: center; }
.content-screen .exr-actionbar .text-button { justify-self: center; min-height: var(--touch-target); font-size: var(--text-base); color: var(--primary); }
.content-screen p.exr-caption { margin: 0; color: var(--muted-foreground); font-size: var(--text-xs); }
.exr-count { display: grid; gap: var(--space-3); }
.exr-stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: var(--space-2); }
.content-screen .exr-stepper .secondary-button { min-height: 56px; padding: 0; font-size: var(--text-xl); }
.content-screen .exr-stepper #exr-count-input { height: 56px; min-height: 56px; font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.content-screen p.exr-deviation:empty { display: none; }
.exr-zero[hidden] { display: none; }
.exr-complete { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-4) 0; text-align: center; }
.exr-complete-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--primary-foreground); background: var(--success); }
.exr-complete-mark svg, .exr-complete-mark .fa-icon { width: 24px; height: 24px; }
.content-screen .exr-complete h3 { margin: 0; font-size: var(--text-xl); }
.content-screen .exr-complete p { margin: 0; color: var(--foreground); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.content-screen a.exr-next { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--foreground); text-decoration: none; }
.content-screen a.exr-next:hover { border-color: var(--primary); }
.exr-next-label { color: var(--primary); font-size: var(--text-xs); font-weight: 600; }
.exr-next > span:not(.exr-next-label):not(.exr-next-go) { color: var(--muted-foreground); font-size: var(--text-sm); }
.exr-next-go { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--info); font-size: var(--text-sm); font-weight: 600; }
.exr-more { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.exr-more > summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--info); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.exr-contacts { display: grid; gap: var(--space-3); max-width: 560px; }
.exr-contacts label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.content-screen .exr-contacts .secondary-button { justify-self: start; }
@media (max-width: 960px) {
  .exr[data-view="list"] .exr-detail, .exr[data-view="detail"] .exr-list { display: none; }
  .exr-detail { padding: var(--space-4); }
  .exr-actionbar { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--card); box-shadow: 0 -2px 8px rgb(21 44 58 / 6%); }
  .content-screen .exr-actionbar .exr-big { margin-top: 0; }
}
@media (min-width: 961px) {
  .exr { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
  .exr-back { display: none !important; }
  .exr-list { position: sticky; top: var(--space-4); }
  .exr-card { gap: 2px; padding: var(--space-3) var(--space-4); cursor: pointer; }
  .exr-card.is-primary { border-width: 1px; border-color: var(--border); }
  .exr-card.is-selected { border-color: var(--primary); background: var(--accent); box-shadow: inset 3px 0 0 var(--primary); }
  .exr-card .exr-progress, .exr-card .exr-big, .exr-card-address { display: none; }
  .content-screen .exr-card .exr-card-link { display: none; }
  .exr-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
  .content-screen .exr-actionbar .exr-big { margin-top: 0; }
  .content-screen .exr-actionbar .text-button { justify-self: auto; }
  .content-screen p.exr-caption { flex: 1 1 100%; }
  .exr-stepper { max-width: 360px; }
  .content-screen .exr-big { width: auto; min-width: 280px; }
  /* 桌機時間軸改水平。 */
  .exr-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .exr-step { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-1); text-align: center; }
  .exr-step::before { top: 13px; bottom: auto; left: calc(50% + 14px); right: calc(-50% + 14px); width: auto; height: 2px; }
  .exr-step-text { justify-items: center; }
  .content-screen .exr-step .exr-jump { margin-top: -12px; }
}

/* 場次結案後續（A6）：背景句＋唯讀迷你時間軸、施打單位與聯絡窗口。 */
.closeout-background { display: grid; gap: var(--space-2); }
.exec-mini { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.exec-mini li { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }
.exec-mini li.is-done { color: var(--foreground); }
.exec-mini-dot { display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 50%; color: var(--card); }
.exec-mini li.is-done .exec-mini-dot { border-color: var(--success); background: var(--success); }
.exec-mini-dot svg, .exec-mini-dot .fa-icon { width: 8px; height: 8px; }
.exec-mini-time { font-variant-numeric: tabular-nums; }
.content-screen .ws .ws-expand p.closeout-unit { margin: 0; font-size: var(--text-sm); }
.content-screen .closeout-unit .text-button { font-size: var(--text-sm); }
@media (max-width: 760px) {
  .ws-kbd { display: none; }
  /* 場次結案的階段數字鈕：一列可橫向捲動，不再疊成三列。 */
  #session-closeout-workspace .ws-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #session-closeout-workspace .ws-chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* 「複製代號」欄位（原本寫在 style 屬性；CSP style-src 不允許 inline 樣式）。 */
.copy-field-value { display: block; margin: 4px 0; }
.copy-field-row { display: flex; gap: 8px; align-items: center; }