/* 醫師一個畫面看完診（看診流程第 3 批；spec docs/superpowers/specs/2026-10-24-doctor-screen-design.md，
   設計 chixu/design/code-picker-spec.md、patient-overview-spec.md §2.4–2.5）。只用 B3a token，不新增。
   動效：一律即時切換（高頻操作），不加動畫。 */

/* --- 選碼器 .po-picker：高度有下限、吃得掉首屏剩下的空間，清單在面板裡捲，
       頁首與健保卡列不會被推出畫面 ---

   原本每個斷點寫死一個 height（300／360／260／216／180），不管畫面實際剩多少。
   處置表短的時候（今天只開一兩筆）剩下的高度就空在那裡：量到 1536×864 空 147px、
   768×1024 空 311px，而清單同時只看得到 2 列。現在改成「下限 ＋ 吃掉剩下的」：
   min-height 是原本那個寫死的數字（所以絕不會比以前矮），flex-grow 把病歷卡裡
   沒人用的高度收進來。flex-basis 一定要是 0——寫 auto 的話清單內容會變成基準高度，
   反過來把上面的處置表擠掉。 */
.po-picker {
  position: relative;
  /* clip 而不是 hidden：hidden 的框還是能被程式（scrollIntoView）橫捲，整個面板會往左偏、右邊被切。 */
  overflow: clip;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* 欄寬釘在面板寬：不然一排放不下的標籤會把整個面板撐得比主欄還寬。 */
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 0;
  min-height: 300px;
  min-width: 0;
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* 收起來的時候不吃剩下的高度，也沒有下限：面板只剩標題那一條。 */
.po-picker.is-collapsed {
  flex: none;
  min-height: 0;
  height: auto;
}

.po-picker.is-collapsed .po-pk-body {
  display: none;
}

.po-pk-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  min-width: 0;
}

.po-pk-kind button {
  min-height: 36px;
}

.po-pk-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 6em;
  min-height: 36px;
}

.po-pk-tooth {
  flex: none;
}

.po-pk-target {
  flex: 0 1 auto;
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
}

.po-pk-target[hidden],
.po-pk-tooth[hidden],
.po-pk-faces[hidden],
.po-pk-index[hidden],
.po-pk-confirm[hidden] {
  display: none;
}

.po-pk-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0 var(--sp-2) var(--sp-2);
  gap: var(--sp-1);
}

.po-pk-faces {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}

.po-pk-faces-label {
  font-size: var(--fs-footnote);
  color: var(--ink-3);
  margin-right: var(--sp-1);
}

.po-pk-face {
  min-width: 36px;
  min-height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* 標籤一排，放不下左右捲（兩端淡出）。 */
.po-pk-tabs {
  display: flex;
  gap: var(--sp-1);
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  padding: 0 var(--sp-4);
}

.po-pk-tab {
  flex: none;
  min-height: 32px;
}

.po-pk-index {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: none;
}

.po-pk-key {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.po-pk-key.is-on {
  background: var(--fill-strong);
}

/* 清單：放得下幾列就看得到幾列，不夠高時在框內捲。
   這裡原本寫「D 3 欄 × 5 列＝15 項不捲就看得到」，那是從來沒成立過的前提：欄數是
   auto-fill 照清單實際寬度算的，1536×864 量到 733 寬＝2 欄、1280×720 是 477 寬＝1 欄，
   只有 900–1279 那條把下限降到 210 的規則才排得出 3 欄。「15 項」對的是伺服器的
   常用上限（models/catalog_browse.go usageListSize = 15），不是一次看得到的數量。 */
.po-pk-list {
  display: grid;
  /* 名稱要看得出差別（「銀粉充填—單面／雙面」）：桌機兩欄、每欄至少 340（design-review B3 r1 D4）。
     340 是有憑據的，別再調小：900–1279 那條降到 210（實際欄寬 229）之後，量到的畫面上
     89001C 與 89002C 都被截成「銀粉充填 －…」，正好就是這條規則要防的單面／雙面分不出來。 */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-rows: 40px;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.po-pk-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: 0 var(--sp-3);
  border-radius: 8px;
  background: var(--group);
  cursor: pointer;
  user-select: none;
}

.po-pk-item:hover,
.po-pk-item.is-active {
  background: var(--nav-hover);
}

.po-pk-item.is-active {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.po-pk-item.is-added {
  background: var(--fill);
  color: var(--ink-2);
}

.po-pk-item.is-whole .po-pk-name {
  color: var(--ink-2);
}

.po-pk-item.is-skeleton {
  cursor: default;
}

.po-pk-code {
  flex: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.po-pk-pin {
  display: inline-flex;
  vertical-align: -3px;
  color: var(--ink-2);
  margin-right: 2px;
}

/* 選碼器的線條小圖示（組合標籤、診所釘選；跟書籤同一套線寬）。 */
.po-pk-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.po-pk-tab-icon {
  display: inline-flex;
  margin-inline-end: var(--sp-1);
  vertical-align: -3px;
}

.po-pk-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-pk-whole {
  margin-right: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.po-pk-sum {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-footnote);
  color: var(--ink-3);
  font-feature-settings: var(--numerals);
}

.po-pk-preset .po-pk-name {
  flex: none;
  font-weight: var(--fw-semibold);
}

.po-pk-pts,
.po-pk-flag,
.po-pk-check {
  flex: none;
  font-size: var(--fs-footnote);
  color: var(--ink-3);
}

.po-pk-check {
  color: var(--ok-ink);
}

/* 洗牙間隔還沒到：「還差 70 天」，顏色跟規則等級（紅＝加入時就擋，smooth-ops A8；黃＝只提醒）。 */
.po-pk-wait {
  flex: none;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--danger);
  white-space: nowrap;
}

/* 醫師的常用（smooth-ops A16）：每一項最右邊一顆書籤（空心／實心），一下切換；看起來像圖示，不像一顆大按鈕。
   不用星號：名字前的星號是看診進度（A17）。 */
.po-pk-fav {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 32px;
  min-height: 32px;
  margin-right: calc(-1 * var(--sp-2));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}

.po-pk-fav-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.po-pk-fav.is-on {
  color: var(--warn);
}

.po-pk-fav:hover,
.po-pk-fav:focus-visible {
  color: var(--ink);
}

@media (pointer: coarse) {
  .po-pk-fav {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 處置組合沒加入的那幾個：紅色擋下框最上面一句。 */
.po-ask-lead {
  font-weight: var(--fw-semibold);
}

.po-pk-wait.is-yellow {
  color: var(--warn);
}

.po-pk-status {
  margin: 0;
  font-size: var(--fs-footnote);
  color: var(--ink-3);
  flex: none;
}

.po-pk-status:empty {
  display: none;
}

.po-pk-manage {
  margin-left: var(--sp-2);
}

.po-pk-menu {
  position: fixed;
  z-index: 50;
  /* 不要撐滿整列寬（design-review B3 r2 R2-1）。 */
  right: auto;
  width: max-content;
  margin-top: 4px;
  min-width: 200px;
}

.po-pk-menu .menu-item {
  min-height: 44px;
}

.po-pk-confirm {
  flex: none;
}

/* --- 加處置前的「回去修改／照樣存檔」與就地檢核 .po-check --- */
.po-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 2px var(--sp-3);
  border-radius: 8px;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

.po-check > span {
  flex: 1 1 auto;
  min-width: 0;
}

.po-check.is-yellow {
  background: var(--warn-wash);
  color: var(--warn);
}

.po-check.is-red {
  background: var(--danger-wash);
  color: var(--danger);
}

.po-check-fix {
  min-height: 28px;
  padding-block: 0;
}

.po-check-row > td {
  padding-top: 0;
  height: auto;
  display: table-cell;
}

.po-check-row .po-check + .po-check {
  margin-top: 2px;
}

.po-visit-checks {
  display: grid;
  gap: var(--sp-1);
}

.po-visit-checks:empty {
  display: none;
}

.po-ask {
  align-items: flex-start;
}

.po-ask-lines {
  flex: 1 1 100%;
}

.po-ask-lines p {
  margin: 0;
}

.po-ask-actions {
  display: flex;
  gap: var(--sp-2);
}

.po-record .items-table tr.is-selected > td {
  background: var(--nav-hover);
}

.po-record .items-table tr[data-item-id] {
  cursor: pointer;
}

/* 「自填項目」現在排在 .po-proc-actions（flex）裡，寬度照內容。原本這裡寫 justify-self: start，
   而它的父層是一般的 block div——那一行從來沒有生效過，按鈕是靠 btn-plain 自己的寬度才沒撐開。 */

/* --- 標題列的處置組合 chip、複製上次 --- */
.po-presets {
  display: flex;
  gap: var(--sp-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.po-preset {
  flex: none;
  min-height: 32px;
}

.po-copy-last:disabled {
  color: var(--disabled-ink);
}

/* --- 頁尾：即時金額、結束按鈕、約下次 --- */
.po-amounts {
  flex: none;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
  font-feature-settings: var(--numerals);
  white-space: nowrap;
}

.po-rec-foot[hidden] {
  display: none;
}

/* 看完／定稿之後兩行（design-review B3 r1 D6）：金額＋「已送櫃台 ✓」；約下次建議，「約」靠右。 */
.po-rec-foot.is-done {
  flex-wrap: wrap;
  min-height: 96px;
  row-gap: var(--sp-1);
  padding-block: var(--sp-2);
}

.po-rec-foot.is-done .po-saved:empty {
  display: none;
}

.po-rec-foot .po-finish-slot.is-next {
  flex: 1 1 100%;
  margin-left: 0;
}

.po-finish-slot.is-next .po-next-suggest {
  flex: 1 1 auto;
}

.po-finish-slot.is-next .po-next-text.is-course {
  flex: 1 1 auto;
}

.po-finish-slot [aria-disabled='true'] {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  cursor: not-allowed;
  /* 看起來要明顯是停用，不像一般次要按鈕（design-review B3 r2 R2-2）。 */
  opacity: 0.45;
  box-shadow: none;
}

.po-amount-due {
  font-family: var(--font-display);
  font-size: var(--fs-title3);
  color: var(--ink);
}

.po-rec-foot .po-finish-slot {
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.po-done {
  color: var(--ok-ink);
  font-weight: var(--fw-semibold);
}

.po-next-suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* 看完／定稿後頁尾最右：列印、叫下一位（smooth-ops A7），不跟約下次的建議擠在同一個伸縮框。 */
.po-finish-slot.is-next .po-print,
.po-finish-slot.is-next .po-foot-next {
  flex: none;
}

.po-next-text {
  font-feature-settings: var(--numerals);
}

/* 定稿後的 PIN 欄靠右：就在剛按的「確定定稿」下面、「列印」「叫下一位」旁邊（smooth-ops A7），不掉到左下角。 */
.po-rec-foot .po-pin-slot {
  margin-left: auto;
}

.po-pin-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.po-pin {
  width: 120px;
  min-height: 44px;
}

.po-pin-error {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

/* 一鍵約那幾天都沒有空檔（A27 批次修正）：在原地說一聲，旁邊就是「選時間」。不是錯誤，所以不用紅色。 */
.po-next-noslot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-2);
}

/* 定稿前檢核（健保線共用的 finalize-dialog.js，樣式名照它；這裡只限在看診畫面裡）。 */
.po-finalize-dialog:empty {
  display: none;
}

.po-finalize-dialog {
  display: grid;
  gap: var(--sp-2);
  /* 捲進畫面時底下留出黏在下面的頁尾（設計審查 D1）：按鈕不會被頁尾蓋住。 */
  scroll-margin-bottom: 112px;
}

/* 窄畫面還有底部分頁列。 */
@media (max-width: 899px) {
  .po-finalize-dialog {
    scroll-margin-bottom: calc(112px + 64px + env(safe-area-inset-bottom));
  }
}

.po-finalize-dialog .charge-finalize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.po-finalize-dialog .charge-nhi-item {
  display: flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 10px;
  font-weight: var(--fw-semibold);
}

.po-finalize-dialog .charge-nhi-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-finalize-dialog .charge-nhi-item.is-yellow {
  background: var(--warn-wash);
  color: var(--warn);
}

.po-finalize-dialog .charge-nhi-item.is-red {
  background: var(--danger-wash);
  color: var(--danger);
}

/* 按鈕靠右：落在剛按的「定稿」正上方，滑鼠不必拉回左邊（smooth-ops A7）。回去修改仍是主按鈕、預設焦點。 */
.po-finalize-dialog .charge-finalize-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  /* 共用的 .charge-finalize 是 justify-items: start（收費頁按鈕不拉長）：這裡要撐滿一整行才靠得到右邊。 */
  justify-self: stretch;
  gap: var(--sp-3);
}

.po-finalize-dialog .charge-finalize-error {
  margin: 0;
  color: var(--danger);
}

/* 每一條是一顆按鈕（按了回去修改那一條，A56）：看起來還是一行字，觸控 44px。 */
.po-finalize-dialog .charge-nhi-item {
  gap: var(--sp-2);
}

.po-finalize-dialog .charge-finalize-go {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.po-finalize-dialog .charge-finalize-go:hover,
.po-finalize-dialog .charge-finalize-go:focus-visible {
  text-decoration: underline;
}

.po-finalize-dialog .charge-finalize-fix {
  flex: none;
  min-height: 44px;
}

/* 沒有讀健保卡那一條（A58）：問句、會改成不申報的處置、三個動作，各一行。 */
.po-finalize-dialog .charge-nhi-item.is-selfpay {
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}

.po-finalize-dialog .charge-nhi-item.is-selfpay > span {
  flex: 1 1 100%;
  white-space: normal;
}

.po-finalize-dialog .charge-finalize-affected {
  font-weight: var(--fw-regular);
}

.po-finalize-dialog .charge-finalize-cardacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.po-finalize-dialog .charge-finalize-cardacts button {
  min-height: 44px;
}

.po-finalize-dialog .charge-finalize-cardacts [aria-pressed="true"] {
  background: var(--warn);
  /* 深色模式下 --on-accent 在 --warn 上對比不夠（設計審查 D2）：用 --warn-wash（淺／深色都跟 --warn 成對）。 */
  color: var(--warn-wash);
}

/* --- 處置組合設定（病歷設定頁） --- */
.preset-list {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.preset-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.preset-form {
  display: grid;
  gap: var(--sp-3);
}

.preset-items {
  display: grid;
  gap: var(--sp-2);
}

.preset-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 9em 5em auto;
  gap: var(--sp-2);
  align-items: start;
}

/* --- 平板、觸控：每一項至少 44（選項 48），面板至少 360 高（spec §8） --- */
@media (pointer: coarse) {
  .po-picker {
    min-height: 360px;
  }

  .po-pk-kind button,
  .po-pk-search,
  .po-pk-tab,
  .po-pk-key,
  .po-pk-face,
  .po-preset,
  .po-check-fix,
  .po-chart-open,
  .po-free-item {
    min-height: 44px;
  }

  .po-pk-key,
  .po-pk-face {
    min-width: 44px;
  }

  .po-pk-list {
    grid-auto-rows: 48px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .po-pin-cancel {
    min-width: 44px;
    min-height: 44px;
  }

  .po-check {
    min-height: 44px;
  }
}

@media (max-width: 1023px) {
  .preset-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  /* 點牙後把選碼器捲進畫面時，避開底部分頁列（64＋8，design-review B3 r2 R2-3）。 */
  .po-picker {
    /* 窄畫面清單只有一欄：面板跟觸控一樣至少 360 高，診斷「常用」首屏至少 5 項（smooth-ops A16）；這個寬度本來就是整頁捲。 */
    min-height: 360px;
    scroll-margin-bottom: calc(64px + env(safe-area-inset-bottom) + 8px);
  }

  .po-rec-foot {
    flex-wrap: wrap;
    padding-block: var(--sp-1);
  }
}

@media (max-width: 480px) {
  .po-pk-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 1536×730（D′）：主欄高度不夠時面板的下限放低一點，頁尾仍黏在底部。 */
@media (min-width: 1280px) and (max-height: 760px) {
  .po-picker {
    min-height: 260px;
  }
}

/* 醫師畫面：新增走選碼器，治療項目表單平常收著（修改、自填項目時才出現）。 */
.items-panel .item-form[hidden] {
  display: none;
}

/* 醫師畫面點牙的明細：一兩行歷史，多的在框內捲，不把選碼器推出畫面。 */
.po-record:not(.is-readonly) .po-teeth .odonto-history {
  max-height: 4.5em;
  overflow-y: auto;
}

.odonto-mark-open {
  margin-left: auto;
}

/* 組合不到 5 組時，下面接一條細線再列常用（design-review B3 r1 D2）。 */
.po-pk-divider {
  grid-column: 1 / -1;
  height: 1px;
  align-self: center;
  background: var(--hairline);
}

.po-pk-list:has(.po-pk-divider) {
  grid-auto-rows: auto;
}

.po-pk-list:has(.po-pk-divider) > .po-pk-item {
  min-height: 40px;
}

/* 醫師畫面的點牙明細：一行 44＋最多一行 24，最多 76（design-review B3 r1 D3）。 */
.odonto-detail-head.is-compact {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
}

.odonto-compact-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-feature-settings: var(--numerals);
}

.odonto-compact-more {
  margin: 0;
  line-height: 24px;
  font-size: var(--fs-footnote);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-record:not(.is-readonly) .po-teeth .odonto-detail:has(.is-compact) {
  max-height: 76px;
  padding-block: var(--sp-1);
}

/* 處置表寬度跟著主欄（design-review B3 r1 D5）：固定欄寬，名稱太長用省略號，修改／刪除不被切。 */
.po-record .items-panel.is-compact .items-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.po-record .items-panel.is-compact .items-table td:first-child {
  min-width: 0;
}

/* 這幾條是照舊的欄位順序寫死的（第 2 欄＝牙位 64、第 4 欄＝診斷 160…）：A28 的可打字表格
   欄位順序不同、欄寬自己定（.items-panel.is-grid 那一段），所以排除掉它。 */
/* 牙位 72（原本 64）：唯讀的十字要放得下兩格各三個字（456）＋中間那一筆；從診斷欄拿 8。
   64 的時候十字頂出格子 10.8px、畫在牙面欄上（版面閘門，十字與新頁首合併後抓到）。 */
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(2) { width: 72px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table td.item-teeth { padding-inline: 2px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(3) { width: 48px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(4) { width: 152px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(5) { width: 48px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(6) { width: 64px; }
.po-record .items-panel.is-compact:not(.is-grid) .items-table :is(th, td):nth-child(7) { width: 136px; white-space: nowrap; }

.po-record .items-panel.is-compact:not(.is-grid) .items-table td:first-child > span {
  display: inline;
}

.po-record .items-panel.is-compact:not(.is-grid) .items-table tr[data-item-id] > td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-record .items-panel.is-compact .item-dx-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 就地檢核那一列（colspan）跟表格一樣寬，不吃上面的欄寬規則。 */
.po-record .items-table tr.po-check-row > td {
  width: auto;
  white-space: normal;
}

/* 修改／刪除兩顆在 136 寬的欄裡排得下（design-review B3 r1 D5）。 */
.po-record .items-panel.is-compact:not(.is-grid) .items-table td:nth-child(7) :is(button, .btn-secondary, .btn-danger) {
  min-width: 0;
  padding-inline: var(--sp-3);
}

.po-record .items-panel.is-compact:not(.is-grid) .items-table td:nth-child(7) > * {
  gap: var(--sp-1);
}

/* 搜尋結果裡「其他分類」那條分隔（QA B3 r1）。 */
.po-pk-divider.is-labelled {
  height: auto;
  background: none;
  font-size: var(--fs-footnote);
  color: var(--ink-3);
  border-top: 1px solid var(--hairline);
  padding-top: 2px;
}

.po-pk-list:has(.po-pk-divider.is-labelled) {
  grid-auto-rows: auto;
}

.po-pk-list:has(.po-pk-divider.is-labelled) > .po-pk-item {
  min-height: 40px;
}

/* 處置表的列捲進畫面時留出黏在底下的頁尾（最高 96）：新加的那一列不會躲在頁尾下面（QA B3 r1）。 */
.po-record .items-table tr[data-item-id] {
  scroll-margin-bottom: 112px;
}

@media (pointer: coarse) {
  .po-pk-list:has(.po-pk-divider) > .po-pk-item {
    min-height: 48px;
  }
}

@media (max-width: 899px) {
  /* 平板直放：頁尾黏在底部分頁列（64）上面，列要再多留這一段。 */
  .po-record .items-table tr[data-item-id] {
    scroll-margin-bottom: calc(112px + 64px + env(safe-area-inset-bottom));
  }
}

/* --- B3b：身心障礙標記（A71）與資料表單（A70） --- */
.po-flag-care.is-warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.po-flag-care.is-danger {
  background: var(--danger-wash);
  color: var(--danger);
}

.patient-care-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  align-items: end;
}

/* 初診／複診與診察費（A64）：標題列一小塊，下拉可以改。 */
.po-consult {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.po-consult-code {
  width: auto;
  max-width: 16em;
  min-height: var(--h-control-sm);
}

@media (pointer: coarse) {
  .po-consult-code {
    min-height: 44px;
  }
}

/* 雲端藥歷（A49）：要注意的藥整列警示色，頁首另一顆標記。 */
.po-flag-med,
.po-med-line {
  background: var(--danger-wash);
  color: var(--danger);
}

.po-med-line {
  border-radius: 8px;
  padding-inline: var(--sp-2);
  font-weight: var(--fw-semibold);
}

/* 同意書、術後衛教（A50） */
.po-docs {
  display: inline-flex;
  gap: var(--sp-3);
}

.doc-menu-row .doc-menu-soon[aria-disabled="true"] {
  color: var(--disabled-ink);
  cursor: not-allowed;
}

.doc-menu-row .doc-menu-soon[aria-disabled="true"]:hover {
  background: none;
}

/* 觸控螢幕上文件選單的每一項也要 44px 好按（看診畫面的同意書、術後衛教選單；看診紀錄頁的「文件」同一個選單）。 */
@media (pointer: coarse) {
  .doc-menu button[role="menuitem"],
  .doc-menu .doc-menu-link {
    min-height: var(--h-control);
  }
}

/* 病歷設定「X 光軟體」的網址欄佔滿一列（設計審查 D6）。 */
#xray-form .xray-url {
  grid-column: 1 / -1;
  max-width: 720px;
}

/* 病患資料表單裡的「身心障礙」小標（設計審查 D7）。 */
.patient-care-title {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: 17px;
  font-weight: var(--fw-semibold);
}

/* 診察費「加強感控未確認」：畫面上直接看得到（平板沒有滑鼠提示）。 */
.po-consult-warn {
  white-space: nowrap;
}

/* 身障表單：沒有讀回的日期時提示那一行不佔位，證明有效期限跟障別、等級的輸入框上緣對齊（設計審查 D7'）。 */
#patient-care .form-hint:empty {
  display: none;
}

/* 健保卡動作列放不下時整組換行（設計審查 D9）：結果小標（就醫序號、模擬）不准被壓得比內容窄，
   否則它溢出去、被右邊的「X 光／約診」蓋住；寬度不夠時右邊那組自己換到下一行。 */
#po-cardrow .po-nhi {
  min-width: max-content;
}

/* 定稿檢核每一條（看診畫面，QA r1）：長句換行不截掉；怎麼改的那一行只在觸控螢幕顯示（滑鼠的看提示）。 */
.po-finalize-dialog .charge-nhi-item:has(.charge-finalize-go) {
  flex-wrap: wrap;
}

.po-finalize-dialog .charge-finalize-go {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.po-finalize-dialog .charge-nhi-item > .charge-finalize-fixtext {
  display: none;
  flex: 1 1 100%;
  font-weight: var(--fw-regular);
  white-space: normal;
}

@media (pointer: coarse) {
  .po-finalize-dialog .charge-nhi-item > .charge-finalize-fixtext {
    display: block;
  }
}

/* === A28：處置表變成畫面主體，而且每一格都能直接打字 ==========================
   使用者 10-25：「處置表 這才是最重要的」。版面是他從三張草圖裡挑的那一張：
   主訴／所見收成一行在上面，處置表佔掉中間最大的一塊，牙位圖縮成旁邊的小圖，
   選碼器移到表格下面。首屏（1536×864、768×1024、1024×768）都要看得到 5 列。
   高度預算：病歷區可用高 ＝ 視窗高 − 頁首 − 黏底的完成列。表格的捲動框用「列數」
   限高（--grid-rows），項目再多也只在表格裡捲，不會把選碼器推出首屏。 */

.po-record {
  /* 列高＝牙位十字的兩格（2 × --cross-box-h 28）＋中間的縫 4＋上下各 1。改 --cross-box-h 要一起改。
     以前單行格子是 36；十字的每一格要看得出是輸入框、好按（至少 28），量過的列數見交付報告。 */
  --grid-row-h: 62px;
  --grid-head-h: 32px;
  /* 首屏至少看得到幾列（硬下限）。 */
  --grid-rows: 5;
  /* 首屏裡「不是處置表」的那些高度：標題列、主訴帶、選碼器、黏底的完成列、間距與內距。
     表格吃掉剩下的全部，所以它一定是畫面上最大的區塊（--po-top 是頁首底部，
     patient-work.js 量好寫進來的）。改了下面任何一塊的高度，這個數字要一起改。
     2026-10-26：合計到選碼器之間量到從 152 降到 104（「自填項目」併進動作列、處方區從
     標題一行＋空搜尋框一行收成一行），少掉的 48 就從這裡還給表格。 */
  --grid-reserve: 371px;
  /* 首屏底下被佔掉的高度：平常只有主欄自己的下緣留白，窄畫面還要讓開底部分頁列。 */
  --rec-bottom: var(--sp-4);
}

/* 病歷卡至少撐滿首屏，剩下的高度才有地方可去——選碼器（flex: 1 1 0）會把它吃掉，
   而不是空在卡片下面（fix/picker-fills-space）。min-height 只是下限：項目多的時候
   卡片照樣長高、主欄照樣捲，處置表的 max-height 完全沒有動，所以不會被壓縮。
   兩個排除條件：
   - .is-readonly（已定稿、櫃台唯讀）沒有選碼器，撐滿只會變成一大塊空白卡片。
   - 櫃台版主欄有約診／收費兩張卡時 .po-main 會變成 display: contents（views.css），
     病歷卡是外層 grid 的一格，撐滿首屏會把那兩張卡推出畫面。 */
.po-work:not(:has(> .po-main > .po-main-cards:not(:empty))) .po-record:not(.is-readonly) {
  min-height: calc(100dvh - var(--po-top, 164px) - var(--rec-bottom));
  /* flex-shrink 一定要關掉。病歷卡是 .po-main（flex 直欄）的項目，本來靠 min-height: auto
     擋著不被壓到比內容矮；上面這行一寫，auto 就被取代掉，主欄一旦限高（≥1280）病歷卡
     就會被壓縮——量到 1280×720 的頁首從 128 被壓成 48（醫師下拉、草稿、複診那一排被切掉），
     頁尾 89 壓成 52。關掉之後：內容比首屏高就照內容長、主欄自己捲（跟改之前一樣），
     內容比首屏矮才由 min-height 撐開，多出來的高度歸選碼器。 */
  flex-shrink: 0;
}

/* 處置表拿整欄的寬度。2026-10-26 以前這裡是「表格 ＋ 旁邊一欄小牙位圖」（1536／1280 給 136、
   1024 給 112、768 給 104），使用者否決了那張縮圖之後整欄還給表格：七欄不再被橫向切掉
   （1280 寬牙位欄看不到、欄位與值錯開一格，backlog 5165682b）。
   外層留著不收掉：.po-grid-row > .po-proc 的 min-width: 0 還要靠它，表格裡的長名稱才會切尾巴
   而不是把整欄撐寬。 */
.po-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
  min-width: 0;
}

/* 處置表、動作列（牙圖／自填項目）、處方之間固定一個間距，不靠各自的 margin 疊出來：
   以前合計與「自填項目」之間 0、「自填項目」與處方之間 12，中間還有一顆 44 高的按鈕只放四個字，
   使用者看到的就是一大塊空白（2026-10-26：「空那麼大是怎樣」）。 */
.po-proc {
  display: grid;
  gap: var(--sp-2);
}

.po-grid-row > .po-proc {
  min-width: 0;
}

/* 可打字的表格本體。 */
.items-panel.is-grid .items-scroll {
  overflow: auto;
  /* 表格吃掉首屏剩下的高度，至少 5 列（剩下的空間不到 5 列時以 5 列為準，
     寧可把選碼器的下緣推出首屏，也要守住凍結的「5 列免捲動」）。 */
  max-height: max(
    /* 每一列量起來是列高＋1（格線），5 列就多 5px：不加的話第 5 列會被切掉一截。
       表頭與底下黏住的「合計」各一個 --grid-head-h。 */
    calc(2 * var(--grid-head-h) + (var(--grid-row-h) + 1px) * var(--grid-rows) + 2px),
    calc(100dvh - var(--po-top, 164px) - var(--grid-reserve))
  );
}

.items-panel.is-grid .items-table {
  /* width 要寫明：表格寬度是 auto 時，欄寬的百分比不是對著看得到的那個寬度算的
     （量到代碼欄的 33% 只給 111px，不是 200px）。 */
  width: 100%;
  table-layout: fixed;
}

/* 原本的 .items-table 規則是照舊的欄位順序寫的（第 2 欄＝牙位用 24px 襯線數字、
   第 4 欄＝診斷 min-width 9em、第 1 欄 min-width 10em）。A28 把牙位搬到第一欄之後，
   那些 nth-child 全部指到別欄去了——代碼欄被當成牙號排成 24px 襯線字、診斷欄被撐到 9em，
   代碼欄只剩 65px（量過）。可打字的表格每一欄都自己定義，先把那幾條關掉。 */
.items-panel.is-grid .items-table td:nth-child(n) {
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-variant-numeric: normal;
  white-space: nowrap;
}

/* 表頭黏在捲動框上緣：列多了在表格裡捲，欄名不會捲掉。 */
.po-record .items-panel.is-grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--grid-head-h);
  padding: 0 var(--sp-1);
  background: var(--group);
}

.po-record .items-panel.is-grid td {
  height: var(--grid-row-h);
  padding: 0 var(--sp-1);
  vertical-align: middle;
}

/* 欄寬（使用者 10-25：「牙位標是一樣放在最前面試試」——順序在 item-grid.js 的
   GRID_COLUMNS，這裡只給寬度）。代碼欄吃掉剩下的寬，名稱接在代碼下面、放不下切尾巴。 */
/* 欄寬用百分比，七欄加起來剛好 100：留一欄不寫寬度讓它「吃剩下的」時，
   瀏覽器在 table-layout: fixed 下是把多出來的空間攤給所有欄（量到代碼欄只剩 65px，
   名稱整個看不到），所以每一欄都寫明。代碼欄最寬——那一格裡是「代碼　名稱」。 */
/* 牙位欄 19%：十字是兩個 2.3em（內文字級，放得下三個字）的輸入框＋縫，約 82px＋內距 8，1280 寬時處置表
   只有約 490px（11% 只剩 54px，「456」與 FM 都被切掉，量過）。代碼 29%、診斷 17% 守住版面閘門的基準
   （scripts/layoutgate/known.json：21/27/15 那一版在 1024、768、1536 讓代碼與診斷比基準多切 3～7px，
   而 1280 的十字又多出格 3～6px）；數量、點數各讓 1%（合計那一格跨點數與列尾兩欄，不靠點數欄的寬）。
   牙面留 6%：5% 時 768 寬的欄名「牙面」就畫出格 2px。 */
.items-panel.is-grid .grid-col-teeth {
  width: 19%;
}

.items-panel.is-grid .grid-col-code {
  width: 29%;
}

.items-panel.is-grid .grid-col-surfaces {
  width: 6%;
}

.items-panel.is-grid .grid-col-diagnosis {
  width: 17%;
}

.items-panel.is-grid .grid-col-quantity {
  width: 5%;
}

.items-panel.is-grid .grid-col-points {
  width: 7%;
}

.items-panel.is-grid .grid-col-actions {
  width: 17%;
  white-space: nowrap;
}

/* 格子：看起來就是一格（不是一顆大輸入框），高度配合列高。 */
.po-record .items-panel.is-grid .grid-cell {
  /* block：行內元素會在格子裡留一行基線的空隙，列高從 36 變成 49（量過）。 */
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 0 var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--r-tag);
  font-size: var(--fs-footnote);
  /* 代碼、牙位、數量都是數字：用表格用的等寬數字，不要內文的舊體數字（會上下亂跳）。 */
  font-feature-settings: var(--numerals);
  background: transparent;
}

.po-record .items-panel.is-grid .grid-cell:hover {
  border-color: var(--hairline);
}

.po-record .items-panel.is-grid .grid-cell:focus {
  border-color: var(--ink-2);
  background: var(--canvas);
}

.po-record .items-panel.is-grid .grid-cell.is-locked {
  color: var(--ink-2);
}

/* 打錯的那一格當場標紅＋底下寫為什麼（不讓它存進去）。 */
.po-record .items-panel.is-grid .grid-cell.is-bad {
  border-color: var(--danger);
  background: var(--danger-wash);
}

.grid-cell-error {
  font-size: var(--fs-footnote);
  line-height: 1.25;
  color: var(--danger);
  white-space: normal;
}

.grid-cell-error[hidden] {
  display: none;
}

/* 伺服器指出的問題（診斷碼已停用…）：寫在診斷欄下面（警示類，照舊常駐）。 */
.grid-cell-issues {
  font-size: var(--fs-footnote);
  line-height: 1.2;
  color: var(--warn);
  white-space: normal;
}

.grid-cell-issues[hidden] {
  display: none;
}

/* 存檔中那一列的列尾寫「存檔中」（按鈕這時候也停用）：鍵被擋掉時要讓人知道為什麼，
   不然快手打下一顆牙會覺得字憑空不見（QA 第 2 點）。這是狀態不是操作說明。 */
.items-panel.is-grid tr.is-saving .grid-col-actions::after {
  content: '存檔中';
  font-size: var(--fs-footnote);
  color: var(--ink-2);
  white-space: nowrap;
}

.items-panel.is-grid tr.is-saving .grid-col-actions .inline-confirm,
.items-panel.is-grid tr.is-saving .grid-col-actions > button {
  display: none;
}

/* 正在存的那一列：看得出來在忙，而且這段時間格子是鎖住的（readOnly）——不鎖的話
   送出去到重讀回來中間打的字會落在上一筆的欄位裡（審查 r1 嚴重 1）。 */
.items-panel.is-grid tr.is-saving > td {
  background: var(--fill);
}

.items-panel.is-grid tr.is-saving .grid-cell {
  color: var(--ink-2);
  cursor: progress;
}

/* 改過還沒存的那一列：左邊一條線（不是紅色，只是「還沒存」）。 */
.items-panel.is-grid tr.is-dirty > td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

.items-panel.is-grid tr.is-blank-row[hidden] {
  display: none;
}

/* 列尾的修改／刪除配合列高：40 高的按鈕會把列撐到 41，5 列就放不進首屏（量過）。
   左右內距收到最小，省下來的寬度給代碼欄的名稱。 */
.po-record .items-panel.is-grid .grid-col-actions button {
  min-height: 30px;
  padding: 0 var(--sp-1);
}

/* 候選清單：貼在正在打字的那一格下面（position: fixed，不會被表格的捲動框切掉）。
   至少看得到 5 個免捲動，第 6 個露出半截讓人知道還有。 */
.grid-candidates {
  position: fixed;
  z-index: 40;
  max-width: min(32em, 92vw);
  max-height: calc(5 * 40px + 20px);
  overflow-y: auto;
  padding: var(--sp-1);
  border-radius: var(--r-input);
  background: var(--canvas);
  box-shadow: 0 1px 0 0 var(--hairline-strong), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.grid-candidates[hidden] {
  display: none;
}

.grid-candidate {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-tag);
  font-size: var(--fs-footnote);
  text-align: left;
  background: transparent;
  color: var(--ink);
}

.grid-candidate.is-active,
.grid-candidate:hover {
  background: var(--fill);
}

/* --- 牙位欄＝十字（web/js/tooth-cross.js；使用者 2026-10-26「十字要能填數字」「不是點開
   是直接能夠在十字上打數字」） -----------------------------------------------------------
   十字本體的樣式在 components.css（.tooth-cross，唯讀與可打字共用）；這裡只管它在處置表那一格裡的大小。
   四格每一格都要一眼看得出是「可以打字的框」：有框線、有輸入框的底色、字是內文大小。第一版做成
   19px 高、沒有框的格子，看起來是一張細線畫，不像四個框（主控 2026-10-26 看截圖退回；§10.1 好按／大氣）。
   格子高：滑鼠 28、觸控 40；列高跟著變（--grid-row-h ＝ 兩格＋縫 4＋上下各 1）。
   十字只有四格＋中間那一筆的大小（不拉滿整欄），線不會跑出格子外。 */
.po-record {
  --cross-box-h: 28px;
  --cross-box-w: 2.3em;
}

.items-panel.is-grid td.grid-col-teeth {
  /* 左右只留 2px：1280 寬時牙位欄約 94px，十字（兩格 2.3em＋縫）要放得進去，量過 4px 內距會頂出 2.2px。 */
  padding: 1px 2px;
}

.po-record .items-panel.is-grid .tooth-cross {
  --cross-cell-w: var(--cross-box-w);
  --cross-cell-h: var(--cross-box-h);
  gap: 4px;
  font-size: var(--fs-body);
}

/* .grid-cell 是單行格子用的（透明、30px 高、footnote 字）；十字裡的格子是四個看得見的輸入框。 */
.po-record .items-panel.is-grid .tooth-cross input.grid-cell {
  height: 100%;
  min-height: 0;
  padding: 0 2px;
  border: 1px solid var(--hairline-strong);
  background: var(--canvas);
  font-size: var(--fs-body);
  text-align: center;
}

.po-record .items-panel.is-grid .tooth-cross input.grid-cell:hover {
  border-color: var(--ink-3);
}

.po-record .items-panel.is-grid .tooth-cross input.grid-cell:focus {
  border-color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--ink-2);
}

.po-record .items-panel.is-grid .tooth-cross input.grid-cell.is-ambiguous {
  border-color: var(--warn);
  background: var(--warn-wash);
}

.po-record .items-panel.is-grid .tooth-cross input.grid-cell.is-bad {
  border-color: var(--danger);
  background: var(--danger-wash);
}

/* 已定稿、存檔中：框照畫（十字的樣子不變），底色退成卡片色、字照樣清楚。 */
.po-record .items-panel.is-grid .tooth-cross input.grid-cell:disabled {
  border-color: var(--hairline);
  background: transparent;
  color: var(--ink);
}

/* 打字簡寫那一行（Alt+↓ 才出來）：和十字一樣高，換過來時列高不跳。 */
.po-record .items-panel.is-grid .grid-cell.tooth-cross-text {
  height: calc(2 * var(--cross-box-h) + 4px);
  border-color: var(--hairline-strong);
  background: var(--canvas);
  font-size: var(--fs-body);
}

.po-record .items-panel.is-grid .grid-cell.tooth-cross-text[hidden] {
  display: none;
}

@media (pointer: coarse) {
  /* 觸控：每一格 40 高（戴手套的手指按得到；列高跟著變 86）。 */
  .po-record {
    --cross-box-h: 40px;
  }
}

/* 處置表最底下那一列：「合計」寫在點數欄正下面（使用者 2026-10-26：「總共幾點不計算 你是要我們
   自己按計算機嗎」）。數字和頁尾的「健保 N 點」同一個來源（GET /visits/{id}/amounts）。 */
.items-table tfoot td {
  height: var(--grid-head-h, auto);
  border-bottom: 0;
  white-space: nowrap;
}

.items-table tfoot .items-sum-label {
  text-align: right;
  font-size: var(--fs-footnote);
  color: var(--ink-3);
}

.items-table tfoot .items-sum {
  /* 跨點數與列尾兩欄（treatment-items.js drawSum）：四位數的合計在 1280 寬的點數欄（約 37px）放不下，
     版面閘門量到畫出格 5px。靠左對齊，起點就是點數欄。 */
  text-align: left;
  font-weight: var(--fw-semibold);
  font-feature-settings: var(--numerals);
}

/* 看診畫面的處置表會在自己的框裡捲：合計黏在框的底下（和表頭黏在上緣同一招），列再多也不用捲到底才看得到。 */
.po-record .items-panel.is-grid tfoot td {
  /* 高度寫明：這張表的 td 一律是列高（62），合計那一列只要表頭那麼高，捲動框的高度預算也是照這個算的。 */
  height: var(--grid-head-h);
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--group);
  box-shadow: inset 0 1px 0 var(--hairline-strong);
}

/* --- 主訴／所見收成一行 ---
   這一條帶子的目標排法（使用者 2026-10-26 指定）：

       [主訴／所見 ▾]  主訴 [________]  臨床所見 [________]  [語音] [片語 ▾]

   原本是「主訴 [語音][片語▾] [___] 臨床所見 [語音][片語▾] [___]」——兩顆一模一樣的語音
   （「兩個語音是怎樣 幹你的 有夠難看」），而且片語卡在兩個輸入框中間（「片語是什麼 你不覺得
   加在正中間很怪嗎 放最右邊」）。現在語音與片語各只有一份、擺在整條帶子最右邊，寫進有游標
   （或上一次有游標）的那一欄；誰在哪一欄的邏輯在 patient-record.js textBand。 */
.po-text-band {
  display: grid;
  /* 第 4 軌（auto）是最右邊那一組工具：語音＋片語。 */
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2);
}

.po-text-toggle {
  min-height: 30px;
  white-space: nowrap;
}

/* 最右邊那一組：語音與片語並排，不隨輸入框長高而移動（align-self: start）。
   兩顆都是「對這條帶子做一件事」，排在一起才在同一條滑鼠路線上（§10.2）。 */
.po-band-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
  min-height: 30px;
}

/* 收起來時一格 30 高（整條帶子只有一列）。長高的規則**不在這裡**——在 views.css
   的 .clinical-text，這裡只覆寫「收起來多高」那一個變數。
   `pointer: fine` 包起來：觸控要留 44 的觸控目標（spec §0），壓成 30 只給滑鼠。
   不包的話這條選擇器的權重比 views.css 裡任何 `@media (pointer: coarse) .clinical-text`
   都高，權重贏過順序，平板上永遠是 30。 */
@media (pointer: fine) {
  .po-record .po-text-band .clinical-text {
    --ct-collapsed: 30px;
    --ct-pad: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
  }
}

/* 欄名跟輸入框排同一行（原本在上面一行，整條帶子就要 71 高）：收起來的時候整條帶子只有
   一列高。語音與片語已經搬到最右邊那一組，不在這裡面了。 */
.po-text-band .phrase-field {
  display: flex;
  /* 基底的 .phrase-field 是 column，這裡一定要寫回 row（不寫就只有 display 被蓋掉）。 */
  flex-direction: row;
  /* **start 不是 center**：這一欄聚焦時會長到 4–6 行，用 center 的話欄名會滑到那個高框的
     正中間，隔壁沒聚焦的那一欄還停在頂端，兩個欄名一高一低，看起來像壞掉。
     截圖才看得到這件事（A7 一進畫面游標就在主訴，所以這是預設畫面，不是邊角狀況）；
     自動測試全綠（§10.6 第 4 條）。 */
  align-items: start;
  gap: var(--sp-1);
  min-width: 0;
}

/* 欄名要跟輸入框的**第一行**對齊：框有 --ct-pad 的上內距與 1px 外框，欄名沒有，
   不補的話欄名會比第一行文字高幾 px。 */
.po-text-band .phrase-label {
  flex: none;
  min-height: 30px;
  margin: 0;
  display: flex;
  align-items: center;
}

.po-text-band .phrase-field > textarea {
  flex: 1 1 auto;
  min-width: 0;
}

/* 展開時欄名與輸入框各自一行（好幾行高的框旁邊再擺欄名會擠）。 */
.po-text-band.is-open .phrase-field {
  display: block;
}

/* 按了「主訴／所見 ▾」展開：兩格都長到 4 行（排在 views.css 聚焦那條規則後面、權重也更高，
   所以蓋得過它）。展開會把處置表往下推約 109（量到的），但表格的高度是算出來的、不是被內容
   撐的，所以三個視窗展開後首屏照樣看得到 6／7／5 列，表格不會被擠出首屏
   （使用者 10-25：「展開不把表格擠出首屏」）。被往下推的是選碼器——展開是在寫字，
   不是在挑代碼，收起來就回來。 */
.po-record .po-text-band.is-open .clinical-text {
  field-sizing: fixed;
  height: calc(4lh + 2 * var(--ct-pad));
  min-height: calc(4lh + 2 * var(--ct-pad));
  max-height: none;
}


/* --- 牙位圖：唯讀畫面的縮排版（is-compact） --- */
/* 已定稿的病歷是「讀」的畫面，牙位圖在這裡是要看的摘要，不是挑牙的工具：所以不縮成只剩輪廓的
   小圖（把 .odonto-marks 藏起來的那種在這裡等於一張空圖），而是整張縮排——
   牙寬 22–28、牙高 32，每顆牙的補過牙面、根管點、牙冠底色、已拔刪除線照樣畫得出來。
   高度從 104 降到 68，寬度不再佔滿整張卡片（使用者 2026-10-26：「牙圖沒縮小」）。
   點一顆牙看它的歷史照舊（唯讀畫面上這是唯一的細節入口，不能連這個也收掉）。
   使用者沒有抱怨過這一條路，2026-10-26 改草稿畫面時刻意沒有動它。 */
.po-teeth.is-compact .tooth-grid {
  --tooth-w: clamp(22px, (100cqi - 40px - 2 * var(--sp-2) - 6px - 14 * 2px - 2px) / 16, 28px);
}

.po-teeth.is-compact .odonto-tooth {
  height: 32px;
  min-height: 32px;
}

.po-teeth.is-compact .odonto-marks {
  min-height: 10px;
}

/* 牙面（MO）縮一級仍然讀得出來；根管點跟著縮，不然 32 高的牙裡只看得到點。 */
.po-teeth.is-compact .odonto-surfaces {
  font-size: var(--fs-caption2);
}

.po-teeth.is-compact .odonto-dot {
  width: calc(var(--indicator-dot) * 0.75);
  height: calc(var(--indicator-dot) * 0.75);
}

/* 列標籤（恆牙 上／下）兩字疊起來佔 40 寬，牙縮了它不用跟著縮，但行高要收。 */
.po-teeth.is-compact .tooth-row-label {
  font-size: var(--fs-caption2);
  line-height: 1.1;
}

/* 主訴／所見與牙位圖併成一條帶子：文字在左、牙圖在右（A28 在草稿畫面做的也是
   「圖放在內容旁邊」）。以前牙圖是滿卡片寬的一條，把下面的處置表整個往下推。
   窄到放不下就自己換行（文字在上、牙圖在下），不硬擠成兩欄。 */
.po-rec-band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-2) var(--sp-4);
}

.po-rec-band > .record-text {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
}

.po-rec-band > .po-teeth.is-compact {
  flex: 0 1 auto;
  width: min(480px, 100%);
}

/* --- 牙圖：版面裡只有一顆按鈕，點了才畫整張圖（使用者 2026-10-26） --- */
/* 處置表底下的動作列：「牙圖」與「自填項目」同一行。兩顆都是 btn-plain，照流程順序由左到右
   （先看牙、再補自費項目），滑鼠不必在表格上下來回跑。 */
.po-proc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
}

/* 這一行的三顆（牙圖、自填項目、處方）高度要一樣，不然看起來是歪的；而且「牙圖」與「處方」
   是看診中會一直點的，點擊範圍要是完整的一格（規約：按鈕要夠大），不能只有文字那幾個像素高。 */
.po-pick-open,
.po-chart-open,
.po-free-item,
.po-rx-open {
  min-height: var(--h-control-sm);
}

/* 「處方 2」：數字是**這次看診**的藥品種數（處方一次看診一份，migration 0130），
   所以從處置表哪一列按進去都是同一個數字。等寬數字，從 2 變成 10 時按鈕不會跳。 */
.po-rx-open {
  font-feature-settings: var(--numerals);
}

/* 打開的牙圖：浮在上面，放在「正在編輯的那一列」的反方向——不遮住那一列（使用者 10-25）。
   寬畫面落在表格右邊的空白帶裡，窄畫面才真的蓋在表格上。
   寬度 620 不是 560：牙圖一排 16 顆最窄也要 30px（views.css --tooth-w 的下限），加上列標籤 40、
   列間距與中線共 22，一整排是 570，再加浮層自己的內距與捲軸——560 的時候右半邊（21–28、31–38）
   還是要左右捲才看得到，那正是使用者嫌的那件事。620 讓 16 顆一次排得下。 */
.po-teeth.is-full {
  position: fixed;
  z-index: 30;
  right: var(--sp-3);
  /* .po-teeth 預設是橫向 flex（病患頁是「圖在左、工具在右」）。浮層裡要改直的：
     「顯示乳牙」與圖例排在圖的右邊會從圖身上吃掉 100 多 px，一排 16 顆就被擠到要左右捲——
     放大之後 27、28、37、38 看不到（改版前的截圖就是這樣）。工具改排在圖下面。 */
  flex-direction: column;
  align-items: stretch;
  width: min(620px, 94vw);
  height: auto;
  max-height: 70vh;
  overflow: auto;
  padding: var(--sp-2);
  border-radius: var(--r-group);
  background: var(--canvas);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

/* hidden 的那一刻整塊要真的不在版面上：.po-teeth 是 display: flex，會蓋掉 [hidden] 的 display: none。 */
.po-teeth.is-full[hidden] {
  display: none;
}

.po-teeth.is-full.is-below {
  top: auto;
  bottom: var(--sp-3);
}

.po-teeth.is-full.is-above {
  top: calc(var(--po-top, 164px) + var(--sp-2));
  bottom: auto;
}

/* 「收起」靠右上角。浮層是直向 flex，float 對 flex 項目無效，要用 align-self。 */
.po-teeth-close {
  align-self: flex-end;
}

/* 圖例與「顯示乳牙」跟著圖走（不佔病歷標題列那一行的寬度）。 */
.po-teeth-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* --- 病歷標題列收成一行 --- */
/* 少用的（看診文件、刪除草稿）收進「⋯」；圖例與顯示乳牙跟著牙位圖。這樣 1536×864 與
   1024×768 的標題列都是一行 40，省下的兩行高度給處置表。 */
.po-rec-head {
  min-height: var(--h-control-sm);
  gap: var(--sp-1) var(--sp-2);
}

.po-rec-more > summary {
  min-height: var(--h-control-sm);
}

/* 「⋯」緊貼標題列左邊，共用的 .menu-body 是靠右對齊（right: 0），往左長就掉出視窗：
   1024×768 量到「同意書」「刪除草稿」左緣在畫面外 6px（版面閘門 below_fold）。改成往右長。 */
.po-rec-more .menu-body {
  left: 0;
  right: auto;
}

/* 滑鼠：「⋯」跟旁邊的「洗牙組」膠囊（32）同高，標題列第二行不被它撐到 40。
   1024×768 的處置表下面那排（牙圖／自填項目／處方）就差這幾 px 落在摺線下。觸控照舊 44。 */
@media (pointer: fine) {
  .po-rec-more > summary {
    min-height: 32px;
  }
}

/* 診察費那一格的選項名稱很長，整組會把標題列撐到 466 寬、逼它換行（量過）：
   限寬＋切尾巴（完整的在提示裡），標題列才收得成一行。 */
.po-consult {
  min-width: 0;
}

.po-consult-code {
  max-width: 11em;
  padding-inline: var(--sp-2);
}

/* --- 三個必測視窗的高度預算 --- */
/* 矮畫面（1536×864、1024×768）：選碼器矮一點，處置表的 5 列才進得了首屏。 */
/* 2026-10-26 牙位十字之後各加 48（清單多一列 40＋間隙）：處置表每列從 36 變 62 之後，今天只開一筆處置的
   病歷卡就比首屏高、選碼器只剩下限那麼高，清單在捲、底下卻空著（版面閘門 wasted_space，known 57／82／87）。
   櫃台版的病歷卡刻意不撐滿（後面還有約診、收費兩張卡），選碼器只有下限可長，所以下限本身要夠。 */
@media (max-height: 900px) {
  .po-picker {
    min-height: 264px;
  }

  .po-record {
    gap: var(--sp-1);
  }
}

/* 1024×768：高度最緊的一個視窗。選碼器再矮一點，處置表的 5 列才全部進首屏；
   清單改三欄，首屏照樣看得到 6 項（A16 的「至少 5 項免捲動」）。 */
@media (max-height: 800px) {
  .po-picker {
    min-height: 228px;
  }

  .po-record {
    /* 383 − 44：這一段同時涵蓋 1280×720 與 1024×768，兩邊量到的節省是 48 與 44，取少的那個。 */
    --grid-reserve: 339px;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .po-pk-list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/* 觸控：格子與列高 44（和站上其他可點元素一致）。 */
@media (pointer: coarse) {
  .po-record {
    /* 2 × 40 ＋ 4 ＋ 2（牙位十字，見上面 --cross-box-h）。 */
    --grid-row-h: 86px;
    --grid-head-h: 36px;
  }

  .po-record .items-panel.is-grid .grid-cell {
    min-height: 38px;
    height: 38px;
  }

  .po-record .items-panel.is-grid .grid-col-actions button {
    min-height: 38px;
  }

  .grid-candidate {
    min-height: 48px;
  }

  .grid-candidates {
    max-height: calc(5 * 48px + 24px);
  }
}

/* 窄畫面（768 直放）：牙位圖改成表格上面一條短帶子，表格拿到整欄寬度，
   七欄不必左右捲。 */
@media (max-width: 899px) {
  /* 768 直放：整頁捲動。選碼器下限 216，剩下的高度全給處置表——牙位圖改回放在旁邊之後
     表格少了 112 寬，選碼器不跟著矮一點的話面積會比處置表大（量到 166k vs 184k），
     凍結的「處置表是畫面上最大的區塊」就不成立。
     原本這裡寫「頭 44 ＋ 分頁 32 ＋ 清單三列，兩欄共 6 項免捲動」，兩個數字都不成立，量過：
     頭實際是 48 不是 44（清單只剩 124，第三列差 4px 放不下），而 681 寬的清單放不下兩欄
     （兩欄要 340×2＋間隙 4＝684），所以實際是一欄兩列＝2 項。216 現在是下限不是定值，
     首屏剩多少就長多少。 */
  .po-picker {
    /* 216＋48：同上面「矮畫面」那一條的理由（十字列變高之後選碼器只剩下限）。 */
    min-height: 264px;
  }

  .po-record {
    /* 422 − 44：768 直放量到合計到選碼器從 156 降到 112。 */
    --grid-reserve: 378px;
    /* 這個寬度底下有分頁列（.tabbar，高 --tabbar-h），病歷卡要停在它上面。 */
    --rec-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + var(--sp-2));
  }
}

/* 每個寬度的「表格 ＋ 旁邊一欄牙位圖」都收掉了（104／112／136），處置表在每個寬度都拿整欄：
   牙圖是表格下面的一顆按鈕，和寬度無關，所以這裡不再需要任何分段規則。 */

/* === 選碼器：標籤全部看得到、清單至少 5 項（2026-10-27 使用者截圖：「X光」被切在右緣、
   兒童以後全部看不到；清單只看得到洗牙組＋三列，「管理組合」被切掉）===================
   1. 標籤換行，不再一排橫捲：橫捲的那幾顆不捲就不知道有（§10.4），淡出遮罩也一起拿掉。
   2. 清單下限＝5 項的高度（單欄時 5 列；多欄時列數更少但項數更多），不管畫面多矮。
   3. 面板高度：選碼器現在是整頁（見本檔最後「整頁選代碼」），清單吃掉標題與分類以外的全部高度。 */
/* 清單的寬度決定一列排幾項：用容器查詢量清單自己的寬，而不是猜視窗寬。 */
.po-pk-body {
  container-type: inline-size;
}

.po-pk-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  mask-image: none;
  padding: 0;
}

.po-pk-list {
  --pk-row-h: 40px;
  --pk-rows: 5;
  min-height: calc(var(--pk-rows) * var(--pk-row-h) + (var(--pk-rows) - 1) * 4px);
}

/* 一列排得下兩項以上（每項至少 340＋間隙 4＝684）：3 列就有 5 項以上，不必撐到 5 列。
   900–1279 那條把每項降到 210，一列 3 項，3 列一樣夠。 */
@container (min-width: 684px) {
  .po-pk-list {
    --pk-rows: 3;
  }
}

@media (pointer: coarse) {
  .po-pk-list {
    --pk-row-h: 48px;
  }
}

/* 1024×768 這種一列塞不下的寬度：處置表與「牙圖／自填項目／處方」那排之間收成 4，
   那排才進得了首屏（版面閘門量到差 9px）。 */
@media (max-height: 800px) {
  .po-proc {
    gap: var(--sp-1);
  }
}

/* 病歷標題列：主欄窄（1280 寬時只有 478）時，洗牙組與「⋯」排到診察費前面。
   診察費那一組（初診＋代碼＋感控提示）約 405 寬，窄的時候它自己就要換行，原本的順序後面的洗牙組再換一次，
   標題列折成三排（120 高）；先排兩顆小的，第一行收得下，整條兩排（84），省下的給處置表下面那排。
   寬的主欄（1024 單欄 713、1536 733）照原本順序：診察費在第一行，第二行只有 32 高的洗牙組＋⋯（76）。
   只改視覺順序，Tab 照 DOM（診察費在洗牙組前面）。600 落在兩者之間。 */
.po-rec-head {
  container-type: inline-size;
}

@container (max-width: 600px) {
  .po-rec-head > .po-presets,
  .po-rec-head > .po-chart-open,
  .po-rec-head > .po-rec-more {
    order: -1;
  }

  .po-rec-head > .po-rec-when,
  .po-rec-head > .po-rec-doctor,
  .po-rec-head > .pill {
    order: -2;
  }
}

/* 滑鼠：標題列的兩個下拉（醫師、診察費）跟同一列的洗牙組膠囊、「⋯」同高 32。
   1280×720 的處置表下面那排（牙圖／自填項目／處方）差 5px 進首屏，標題列兩排各省 8。觸控照舊 44。 */
@media (pointer: fine) {
  .po-rec-head select {
    min-height: 32px;
    height: 32px;
    padding-block: 0;
  }
}

/* === 整頁選代碼（規格 2026-10-26-visit-screen-layout-spec.md §8；使用者原話「選代碼我不是說要整頁跳出來嗎」）===
   平常收著、版面上 0px；打開時蓋住整個視窗（含側欄），清單吃掉標題與分類以外的全部高度、在自己框裡捲。
   這一段排在最後，蓋掉上面「選碼器在表格下面」那一代的高度規則（min-height 228／264／300、flex 吃剩餘高度）。 */
.po-picker.is-collapsed {
  display: none;
}

.po-picker:not(.is-collapsed) {
  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-3) var(--sp-6);
}

.po-picker .po-pk-head {
  min-height: 56px;
}

.po-picker .po-pk-search {
  min-height: 44px;
}

.po-pk-close {
  flex: none;
  margin-inline-start: auto;
}

.po-picker .po-pk-tabs {
  padding-block: var(--sp-1);
}

/* 整頁夠寬：一律每項至少 340（名稱看得出「單面／雙面」），蓋掉 900–1279 那條 210。 */
.po-picker .po-pk-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-rows: 48px;
  --pk-row-h: 48px;
}

@media (max-width: 899px) {
  .po-picker:not(.is-collapsed) {
    padding: var(--sp-2) var(--sp-3);
  }
}

@media (pointer: coarse) {
  .po-picker .po-pk-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 52px;
    --pk-row-h: 52px;
  }
}

/* 處置表的高度預算：選碼器離開版面之後，病歷卡裡「不是處置表」的只剩標題列、主訴帶、動作列、
   就地檢核、完成列與間距（規格 §4.1 的 --rec-reserve）。主訴聚焦展開成 4 行時多出來的 64 是臨時加項，
   直接從表格扣（規格 §5.2），表格照舊守住 5 列下限（max() 的第一項）。
   **改了上面任何一塊的高度，這裡要一起改**——上一版就是加了處方、自填項目、預檢紅字沒改這個數字而失準。 */
.po-record {
  --rec-reserve: 300px;
  --band-open: 0px;
  --grid-reserve: calc(var(--rec-reserve) + var(--band-open));
}

.po-record:has(.po-text-band .clinical-text:focus, .po-text-band .clinical-text.is-held, .po-text-band .clinical-text.is-dictating) {
  --band-open: 64px;
}

@media (max-width: 899px) {
  .po-record {
    /* 底部分頁列 64（--rec-bottom 另外讓開）以外，窄畫面完成列會折兩行。 */
    --rec-reserve: 340px;
  }
}

/* 「牙圖」：標題列右端一顆看得到的次要按鈕。滑鼠時跟同列的下拉、⋯ 同高 32，觸控照舊 44。 */
.po-rec-head > .po-chart-open {
  flex: none;
  min-width: 48px;
  justify-content: center;
}

@media (pointer: fine) {
  .po-rec-head > .po-chart-open {
    min-height: 32px;
    padding-block: 0;
  }
}

/* === 主訴／臨床所見聚焦展開：浮在上面，不推動版面（2026-10-27）===
   聚焦長成 4 行原本會把整張處置表、動作列往下推 64–78px：一進畫面游標就在主訴（A7），所以這是預設畫面——
   1024×768 的「選代碼／自填項目／處方」因此被黏底的完成列蓋住，1280 的處置表少一列。
   現在框照樣長到 4 行（使用者 2026-10-26：「點下輸入框後 要會自動放大一個範圍的輸入框」），但用負的下邊距
   抵掉多出來的高度：帶子在版面上始終一行，展開的框浮在表格上面（z-index），離開就收回，下面一格都不動。
   主動按「主訴／所見 ▾」展開（.is-open）照舊推版面——那是醫師選擇要寫長文。
   處置表的高度預算因此不必再為聚焦加項（--band-open 固定 0）。 */
@media (pointer: fine) {
  /* 程式放進來的游標（A7 一進畫面在主訴）不展開，醫師自己點或開始打字（.is-engaged，dom.js）才浮出來。 */
  .po-record .po-text-band:not(.is-open) .clinical-text:focus:not(.is-engaged):not(.is-held):not(.is-dictating) {
    height: var(--ct-collapsed);
    min-height: var(--ct-collapsed);
    field-sizing: fixed;
  }

  .po-record .po-text-band:not(.is-open) .clinical-text:is(.is-engaged:focus, .is-held, .is-dictating) {
    position: relative;
    z-index: 6;
    field-sizing: fixed;
    height: calc(4lh + 2 * var(--ct-pad));
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-block-end: calc(var(--ct-collapsed) - (4lh + 2 * var(--ct-pad)));
    box-shadow: 0 8px 24px rgb(59 52 46 / 0.18);
  }

  .po-record:has(.po-text-band .clinical-text:focus, .po-text-band .clinical-text.is-held, .po-text-band .clinical-text.is-dictating) {
    --band-open: 0px;
  }
}

/* 完成列金額：窄於 1440 只留「健保 N 點 · 應收 N」，明細在提示（規格 2026-10-26 §5.6）。 */
@media (max-width: 1439px) {
  .po-amounts-detail {
    display: none;
  }
}

/* === 牙面浮層（surface-popover.js；使用者 10-27「牙面要跳出一個視窗 出現所有牙面選項 按順序 讓醫師能夠挑選」）===
   貼著牙面格開，八顆大鈕照健保順序四欄兩排：字母大、名稱在下。選到的用 --ink-2 底（規格 §3「選到的」）。
   觸控目標至少 44（滑鼠也給 48 高，戴手套的平板一樣按得到）。只淡入，不位移（規格 §12）。 */
.surface-pop {
  position: fixed;
  z-index: 45;
  width: min(23rem, calc(100vw - 16px));
  padding: var(--sp-2);
  border-radius: var(--r-group);
  background: var(--group);
  box-shadow: 0 8px 32px rgb(59 52 46 / 0.22);
  animation: surface-pop-in var(--dur-micro, 160ms) var(--ease-out, ease-out);
}

@keyframes surface-pop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-pop {
    animation: none;
  }
}

.surface-pop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
}

.surface-pop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--sp-1);
  border-radius: var(--r-tag);
  background: var(--fill);
  color: var(--ink);
}

.surface-pop-btn:hover {
  background: var(--fill-strong);
}

.surface-pop-btn[aria-pressed="true"] {
  background: var(--ink-2);
  color: var(--group);
}

.surface-pop-letter {
  font: var(--fw-semibold) var(--fs-body) / 1.2 var(--font-ui);
}

.surface-pop-name {
  font-size: var(--fs-caption);
}

.surface-pop-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-2);
}

.surface-pop-done {
  min-height: 44px;
}

/* 主欄 720 以下（768 直放 713）：櫃台的「待定稿」比醫師的「草稿」多一個字，標題列就差那幾 px、「⋯」單獨掉到第二行。
   診察費下拉再收一點（完整名稱在選單裡與提示裡），標題列維持一行。 */
@container (max-width: 720px) {
  .po-rec-head .po-consult-code {
    max-width: 9em;
  }
}

/* === 處置與診斷疊在同一格（2026-10-27；使用者 10-26「代碼名稱 改成 處置」「診斷放在第二排」）===
   上面一行處置、下面一行診斷，各 30 高、中間 2，合起來 62＝十字牙位撐出來的列高，所以列不會變高、首屏列數不變。
   原本代碼 29%＋診斷 17% 兩欄，合成一欄 46%。 */
.items-panel.is-grid .grid-col-code {
  width: 46%;
}

.po-record .items-panel.is-grid td.grid-col-code {
  vertical-align: middle;
}

/* 疊在處置格裡的診斷：寬度是整格（上面「診斷 17%」那條是它還自成一欄時的欄寬，對 div 要蓋掉）。 */
.items-panel.is-grid .grid-sub {
  width: auto;
  margin-top: 2px;
}

/* 唯讀（已定稿、櫃台摘要）：同一個樣子，診斷那一欄收起來、寫在處置格的第二行。 */
.items-panel.is-dx-under .items-table :is(th, td):nth-child(4) {
  display: none;
}

/* 唯讀的診斷那一行照字折行、不收成「…」：診斷名稱很長（K02.52 齲齒在凹陷及裂縫表面穿入牙本質），
   唯讀畫面是要讀的，切掉等於看不到（版面閘門 truncation）。處置那一格的「不折行」只管第一行的代碼與名稱。 */
.po-record .items-panel.is-dx-under .items-table tr[data-item-id] > td:first-child,
.po-record .items-panel.is-compact.is-dx-under:not(.is-grid) .items-table tr[data-item-id] > td:first-child {
  white-space: normal;
}

.items-panel.is-dx-under .item-dx-under {
  display: block;
  white-space: normal;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
}