/* 案件「確認單」分頁（web/app/confirm/confirm.js）。顏色與間距只用 paper.css 的 token；文件本身的版面在 docs/docs.css。 */

.cf {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.cf [hidden] {
  display: none !important;
}

.cf button:focus-visible,
.cf input:focus-visible,
.cf select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cf .btn,
.cf .btn-sm {
  min-height: var(--tap);
}

/* ---------- 空狀態 ---------- */

.cf-empty {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  text-align: left;
  max-width: 40rem;
}

.cf-empty-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
}

.cf-empty p {
  margin: 0;
  color: var(--ink-2);
}

.cf-create-format {
  min-width: min(18rem, 100%);
}

.cf-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ---------- 工具列 ---------- */

.cf-head {
  display: grid;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.cf-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.cf-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.cf-status[data-tone="wait"] {
  background: var(--remind-tint);
  border-color: var(--remind);
  color: var(--pending-ink);
}

.cf-status[data-tone="ok"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.cf-status[data-tone="change"] {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.cf-round,
.cf-counts {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.cf-counts {
  font-variant-numeric: tabular-nums;
}

.cf-stale {
  font-size: var(--fs-sm);
  color: var(--pending-ink);
}

.cf-format {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}

.cf-tag-warn {
  background: var(--remind-tint);
  border-color: var(--remind);
  color: var(--pending-ink);
}

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.cf-menu {
  position: relative;
}

.cf-menu-list {
  position: absolute;
  z-index: 6;
  top: calc(100% + var(--s-1));
  left: 0;
  display: grid;
  gap: var(--s-1);
  min-width: 11rem;
  max-width: calc(100vw - var(--s-5));
  padding: var(--s-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-raised);
}

/* 格式選單在工具列最右邊：往左展開，手機上才不會超出畫面 */
.cf-menu-wide {
  left: auto;
  right: 0;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
}

.cf-menu-item {
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.cf-menu-head,
.cf-menu-foot {
  margin: 0;
  padding: var(--s-1) var(--s-2);
}

.cf-pdf-note {
  margin: 0;
}

/* 連結 */

/* 連結開啟中是平常狀態，用中性的紙色；只有「已關閉」才用強調色提醒。 */
.cf-link {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  border-radius: var(--r);
  min-width: 0;
}

.cf-link.is-closed {
  border-color: var(--accent-line);
  background: var(--accent-tint);
}

.cf-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.cf-url {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--fs-sm);
  background: var(--paper);
}

.cf-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.cf-link-state {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.cf-link-state.is-closed {
  color: var(--accent-text);
}

/* ---------- 狀態列與提示 ---------- */

.cf-save {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  min-height: 1.2em;
}

.cf-autosave {
  color: var(--accent-text);
}

.cf-save[data-state="error"],
.cf-save[data-state="conflict"] {
  color: var(--accent-text);
}

.cf-msg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.cf-msg:empty {
  display: none;
}

.cf-msg.is-error {
  color: var(--accent-text);
}

.cf-notice {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--pending-line);
  background: var(--remind-tint);
  border-radius: var(--r);
}

.cf-notice p {
  margin: 0;
}

/* AI 建議列 */

.cf-ai-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--accent-line);
  background: var(--accent-tint);
  border-radius: var(--r);
  font-size: var(--fs-sm);
}

.cf-ai-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* 新人要修改的項目 */

.cf-changes {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-line);
  background: var(--paper);
  border-radius: var(--r);
}

.cf-changes-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 500;
}

.cf-changes-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-changes-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.cf-change-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 14rem;
  font-size: var(--fs-sm);
}

.cf-change-text .cf-comment {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 項目標記 ---------- */

/* docs.css 在這份之後載入，.docs .rd-decor 同樣是兩層；多加一層才贏得過。 */
.cf .docs .rd-decor {
  display: flex;
  flex-wrap: wrap;
  margin: var(--s-1) 0 0;
  max-width: 100%;
}

.cf-decor {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  max-width: 100%;
  min-width: 0;
}

/* 同一列裡有 AI 建議的欄位會比較高；其他欄位不要跟著被拉長 */
.cf .docs [data-kind="fields"] .rd-field {
  align-self: start;
}

/* 表格段落的 footer 建議放在段落標題旁的格子裡；整列寬度給它，標題不會被擠 */
.cf .docs .rd-sec-meta:has(.cf-sugg) {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: stretch;
  justify-content: flex-start;
  text-align: left;
}

.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 24px;
  padding: 0 var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}

.cf-badge.is-ok {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

.cf-badge.is-change {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.cf-badge.is-pending {
  background: var(--paper);
  border: 3px double var(--pending-line);
  color: var(--pending-ink);
}

/* 空白、不需新人回答的項目：淡色虛線，不跟要處理的項目搶視線。 */
.cf-badge.is-skip {
  background: transparent;
  border-style: dashed;
  color: var(--ink-2);
}

.cf-comment {
  min-width: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--accent-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cf-sugg {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
  padding: var(--s-2);
  border: 1px dashed var(--accent-line);
  background: var(--accent-tint);
  border-radius: var(--r);
  font-weight: 400;
  letter-spacing: 0;
}

.cf-sugg-tag {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent-text);
}

.cf-sugg-text {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cf-sugg-btn {
  min-width: var(--tap);
}

@media (max-width: 600px) {
  .cf-actions > .btn,
  .cf-actions > .cf-menu > .btn {
    flex: 0 0 auto;
  }

  .cf-menu-list {
    max-width: calc(100vw - var(--s-6));
  }
}