/* 格式驅動的文件編輯器與預覽（web/app/docs/）。全部規則都在 .docs 底下；只用 /shared/paper.css 的 token。
   版面由 editor.js 依容器寬度設定：.docs[data-size="narrow|mid"]（<560／≥560），時間軸與表格各自有
   [data-layout="narrow|mid|wide"]（寬版的門檻依欄數，見 layout.js）。
   流程表分頁（rundown/rundown.css）只留工具列、狀態與版本紀錄的外框，內容的樣式都在這裡。 */

.docs {
  --person: #2E5B8A;
  --team: #6B3E7E;
  --venue: #3D6A4B;
  --rd-when: 8.5rem; /* 時間欄 */
  --rd-label: 9rem; /* 中版第一個單行格 */
  --rd-side-w: 11rem; /* 中版右側欄 */
  --rd-act: calc(var(--tap) * 3 + var(--s-1) * 2); /* 寬版的操作欄：3 顆 44px 按鈕 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  min-width: 0;
}

.docs .label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.docs .num {
  font-variant-numeric: tabular-nums;
  font-family: var(--f-sans);
}

.docs .lead {
  margin: 0;
  color: var(--ink-2);
}

.docs .rd-empty {
  padding: var(--s-4) 0;
}

.docs .rd-sub {
  margin-top: var(--s-3);
}

.docs .rd-hint {
  margin-top: calc(var(--s-2) * -1);
}

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

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

.docs .btn-sm {
  padding-inline: var(--s-3);
}

/* 圖示按鈕（↑ ↓ 刪）：觸控區至少 44px */
.docs .btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: 0;
}

/* 文字區：高度由 editor.js 的 fitArea 依內容調整，不顯示拉把 */
.docs textarea.field {
  min-height: var(--tap);
  resize: none;
  line-height: 1.6;
}

/* ---------- 區段 ---------- */

.docs .rd-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  scroll-margin-top: var(--s-5);
  min-width: 0;
}

.docs .rd-sec-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* 確認單的項目標記（徽章由 itemDecor 提供） */
.docs .rd-decor {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-2);
  vertical-align: middle;
}

.docs .rd-decor:empty {
  display: none;
}

/* ---------- 預覽：欄位 ---------- */

.docs .rd-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s-4) var(--s-5);
  margin: 0;
}

.docs .rd-kv > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.docs .rd-kv > .rd-kv-wide {
  grid-column: 1 / -1;
}

.docs .rd-kv dt {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.docs .rd-kv dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.docs .rd-text {
  overflow-wrap: anywhere;
}

/* ---------- RICH 標記（與 design-paper-v2 一致） ---------- */

.docs .mk-remind {
  background: linear-gradient(transparent 52%, var(--remind) 52%, var(--remind) 90%, transparent 90%);
  padding: 0 0.1em;
}

.docs .mk-person {
  color: var(--person);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.docs .mk-team {
  color: var(--team);
  text-decoration: underline double;
  text-underline-offset: 0.2em;
}

.docs .mk-venue {
  color: var(--venue);
  text-decoration: underline dashed;
  text-underline-offset: 0.2em;
}

.docs .note-box {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: var(--r);
}

/* ---------- 預覽：時間軸表格 ---------- */

.docs .table-wrap {
  width: 100%;
  overflow-x: auto;
}

.docs .flow {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.docs .flow th,
.docs .flow td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.docs .flow thead th {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
}

/* 時間欄固定 7.5rem（layout.js columnWidths），放得下「14:30–17:30」；更長的時間在破折號換行，不要蓋到旁邊的欄 */
.docs .flow td.t {
  overflow-wrap: normal;
}

.docs .flow .range {
  font-family: var(--f-sans);
  font-variant-numeric: tabular-nums;
}

.docs .flow tr.is-highlight td {
  background: var(--remind-tint);
}

.docs .flow tr.is-banner td {
  background: var(--accent-tint);
  font-weight: 600;
}

.docs .flow .rd-banner-cell {
  font-size: var(--fs-md, 1rem);
}

/* under 欄：放在 host 欄同一格、值的下方 */
.docs .rd-under {
  margin-top: var(--s-1);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- 預覽：表格 ---------- */

.docs .ledger {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.docs .ledger th,
.docs .ledger td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* ---------- 預覽與編輯：groups ---------- */

.docs .items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--s-4);
}

.docs .items-grid h3,
.docs .decor-card h3,
.docs .rd-edit-card h3 {
  margin: 0 0 var(--s-3);
}

.docs .rd-cat {
  margin-top: var(--s-3);
}

.docs .rd-cat h4 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-sm);
}

.docs .rd-cat p {
  margin: 0;
  white-space: normal;
}

/* ---------- 預覽與編輯：images ---------- */

.docs .decor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-4);
}

.docs .decor-grid.is-edit {
  grid-template-columns: minmax(0, 1fr);
}

.docs .decor-card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.docs .decor-card p {
  margin: 0;
}

.docs .rd-img {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--paper-2, transparent);
}

.docs .rd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.docs .rd-img.is-empty {
  color: var(--ink-2);
}

/* 編輯：說明欄在左，參考圖在右；窄螢幕時圖片在下 */
.docs .rd-decor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: var(--s-3) var(--s-4);
  align-items: start;
}

.docs[data-size="narrow"] .rd-decor-body {
  grid-template-columns: minmax(0, 1fr);
}

.docs .rd-decor-fields {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

/* ---------- 編輯：共用 ---------- */

.docs .rd-edit-card {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.docs .rd-fgroups {
  display: grid;
  gap: var(--s-5);
}

.docs .rd-fgroup {
  display: grid;
  gap: var(--s-2);
}

.docs .rd-subhead {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.docs .rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s-3) var(--s-4);
}

.docs .rd-grid > .rd-field-wide {
  grid-column: 1 / -1;
}

.docs .rd-footer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s-3) var(--s-4);
  max-width: 44rem;
}

.docs .rd-field {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.docs .rd-field input,
.docs .rd-field select,
.docs .rd-field textarea {
  width: 100%;
  min-width: 0;
}

.docs .rd-add {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s-2);
}

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

.docs .rd-cell {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  align-content: start;
}

/* 欄位小標題（窄與中版顯示；寬版的列由欄頭代替） */
.docs .rd-cap {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.docs .rd-colhead {
  display: none;
}

/* 共用標記工具列：段落頂端，黏在捲動時的頂端；一行，標記鈕與目標並排 */
.docs .rd-markbar {
  position: sticky;
  top: var(--mark-top, 0px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.docs .rd-markbar-label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.docs .rd-markbar-target {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* 捲到或聚焦的欄位／按鈕不被黏住的工具列蓋住（--mark-h 由 syncLayout 設定） */
.docs .rd-rows-card .field,
.docs .rd-rows-card .btn,
.docs .rd-trow .field {
  scroll-margin-top: calc(var(--mark-top, 0px) + var(--mark-h, 0px) + var(--s-4));
}

.docs .rd-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.docs .rd-mark {
  min-width: var(--tap);
}

.docs .rd-mark:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 即時預覽：只在含標記時出現，小而淡 */
.docs .rd-rich-preview {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.docs .rd-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}

/* ---------- 編輯：時間軸列 ---------- */
/* 窄：卡片，每格自帶小標題。中：兩行（時間｜第一個單行格｜種類＋操作 / 主欄｜其餘欄）。寬：單行表格列。
   格子的位置由 layout.js 產生的 --i-*（項目列）、--b-*（說明列）與每格的 --am（中）、--aw（寬）決定。 */

.docs .rd-rows-card {
  gap: var(--s-2);
  padding: var(--s-4);
}

.docs .rd-rows {
  display: grid;
  gap: var(--s-1);
}

.docs .rd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.docs .rd-row.is-start {
  border-top: 2px solid var(--ink-2);
}

.docs .rd-row.is-banner {
  border-style: dashed;
}

.docs .rd-row.is-highlight {
  background: var(--remind-tint);
}

/* 列內的格子靠上對齊：單行欄位不跟著列高拉長 */
.docs .rd-row > *,
.docs .rd-side > * {
  align-self: start;
  min-width: 0;
}

.docs .rd-when {
  display: grid;
  gap: var(--s-1);
}

/* 種類＋操作：同一行；操作放不下時換到種類下方 */
.docs .rd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-1) var(--s-3);
  min-width: 0;
}

/* 其餘欄：單欄直排 */
.docs .rd-side {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

/* 整列標示：與預覽的底色一致，按下時是實心按鈕 */
.docs .rd-hl {
  padding-inline: 0;
  min-width: var(--tap);
  font-size: var(--fs-xs);
}

.docs .rd-hl[aria-pressed="true"] {
  background: var(--remind-tint);
  border-color: var(--pending-line);
  font-weight: 600;
}

.docs .rd-add-row {
  margin-top: var(--s-1);
}

/* 中版 */
.docs [data-layout="mid"] .rd-row {
  grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-side-w);
  column-gap: var(--s-2);
}

.docs [data-layout="mid"] .rd-row.is-item { grid-template-areas: var(--i-mid); }
.docs [data-layout="mid"] .rd-row.is-banner { grid-template-areas: var(--b-mid); }
.docs [data-layout="mid"] .rd-row > .rd-slot { grid-area: var(--am); }

.docs [data-layout="mid"] .rd-row .rd-f-kind {
  margin-right: auto;
}

.docs [data-layout="mid"] .rd-row .rd-act {
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

/* 沒有主欄時，其餘欄自己排成多欄 */
.docs [data-layout="mid"] .rd-side.is-grid {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-2);
}

/* 寬版：單行表格列 */
.docs [data-layout="wide"] .rd-row {
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.docs [data-layout="wide"] .rd-row.is-item {
  grid-template-columns: var(--i-cols);
  grid-template-areas: var(--i-areas);
}

.docs [data-layout="wide"] .rd-row.is-banner {
  grid-template-columns: var(--b-cols);
  grid-template-areas: var(--b-areas);
}

.docs [data-layout="wide"] .rd-row.is-highlight {
  padding-inline: var(--s-2);
}

.docs [data-layout="wide"] .rd-row .rd-slot {
  grid-area: var(--aw);
}

.docs [data-layout="wide"] .rd-side {
  display: contents;
}

.docs [data-layout="wide"] .rd-row .rd-cap,
.docs [data-layout="mid"] .rd-row .rd-cap {
  display: none;
}

/* 整列說明沒有欄頭，小標題保留 */
.docs [data-layout] .rd-row.is-banner .rd-text-cell .rd-cap,
.docs .rd-row.is-banner .rd-text-cell .rd-cap {
  display: block;
}

.docs [data-layout="wide"] .rd-row .rd-bar {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
}

.docs [data-layout="wide"] .rd-row .rd-act {
  display: grid;
  grid-template-columns: repeat(3, var(--tap));
  justify-content: start;
  gap: var(--s-1);
}

.docs [data-layout="wide"] .rd-hd-wide {
  display: grid;
  grid-template-columns: var(--i-cols);
  grid-template-areas: var(--i-areas);
  gap: var(--s-2);
  padding: 0 0 var(--s-1);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.docs [data-layout="mid"] .rd-hd-mid {
  display: grid;
  grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-side-w);
  grid-template-areas: var(--i-mid);
  column-gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-1);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* ---------- 編輯：表格列 ---------- */
/* 窄：卡片（欄位兩欄排，操作在下方）。中：欄位在左、操作在右。寬：單行表格列，欄頭顯示。 */

.docs .rd-ttable {
  display: grid;
  gap: var(--s-2);
}

.docs .rd-trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.docs .rd-tcells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s-2) var(--s-3);
  align-items: start;
  min-width: 0;
}

.docs .rd-trow > .rd-act {
  align-self: start;
}

.docs [data-layout="mid"].rd-ttable .rd-trow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.docs [data-layout="wide"].rd-ttable .rd-trow,
.docs [data-layout="wide"].rd-ttable .rd-thead {
  display: grid;
  grid-template-columns: var(--t-cols);
  gap: var(--s-2);
  align-items: start;
}

.docs [data-layout="wide"].rd-ttable .rd-trow {
  padding: var(--s-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.docs [data-layout="wide"].rd-ttable .rd-tcells {
  display: contents;
}

.docs [data-layout="wide"].rd-ttable .rd-trow .rd-cap {
  display: none;
}

.docs [data-layout="wide"].rd-ttable .rd-thead {
  padding: 0 0 var(--s-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* ---------- 編輯：groups ---------- */

.docs .items-edit {
  display: grid;
  gap: var(--s-4);
}

.docs .rd-cat-row {
  display: grid;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px dashed var(--line);
}

.docs[data-size="mid"] .rd-cat-head {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
  padding: 0 0 var(--s-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.docs[data-size="mid"] .rd-cat-row {
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--s-2) 0;
}

.docs[data-size="mid"] .rd-cat-row .rd-cap {
  display: none;
}

/* ---------- 手機：預覽表格改為卡片 ---------- */

@media (max-width: 699px) {
  .docs .flow,
  .docs .flow tbody,
  .docs .flow tr,
  .docs .flow td {
    display: block;
    width: 100%;
  }

  .docs .flow colgroup {
    display: none;
  }

  .docs .flow thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .docs .flow tbody {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }

  .docs .flow tr {
    padding: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }

  .docs .flow td {
    padding: var(--s-1) 0;
    border: 0;
  }

  .docs .flow td.t {
    width: auto;
  }

  .docs .flow td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ink-2);
  }

  .docs .flow tr.is-highlight {
    border-style: dashed;
  }

  .docs .ledger colgroup {
    display: none;
  }

  .docs .ledger thead {
    display: none;
  }

  .docs .ledger,
  .docs .ledger tbody,
  .docs .ledger tr,
  .docs .ledger th,
  .docs .ledger td {
    display: block;
    width: 100%;
  }

  .docs .ledger td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-sans);
    font-size: var(--fs-xs);
    color: var(--ink-2);
  }
}

/* 時段或列數到上限時，新增鍵停用，原因寫在按鈕下面。 */
.rd-limit-note {
  margin: var(--s-3) 0 0;
}