/* 流程表分頁的外框：工具列、狀態、版本紀錄、格式選單。內容（預覽與編輯）的樣式在 ../docs/docs.css。
   全部規則都在 .rundown 底下（對話框掛在 body，用 .rd-dropped 這類獨立名稱）；只用 /shared/paper.css 的 token。 */

.rundown {
  --person: #2E5B8A;
  --team: #6B3E7E;
  --venue: #3D6A4B;
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

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

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

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

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

.rundown .btn,
.rundown .rd-chip {
  min-height: var(--tap);
}

.rundown .btn-sm {
  min-height: var(--tap);
  padding-inline: var(--s-3);
}

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

/* 通知與狀態 */

.rundown .rd-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);
}

.rundown .rd-notice p {
  margin: 0;
}

.rundown .rd-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  min-height: 1.2em;
}

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

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

.rundown .rd-changed {
  margin-left: var(--s-2);
  color: var(--pending-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
}

.rundown .rd-pdf-note {
  margin: 0;
}

/* 工具列 */

.rundown .rd-toolbar {
  display: grid;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.rundown .rd-toolbar-main {
  display: grid;
  gap: var(--s-2);
}

.rundown .rd-version {
  margin: 0;
}

.rundown .rd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.rundown .rd-legend li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}

.rundown .rd-legend .ex {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* 顏色說明用的 RICH 標記（內容裡的標記樣式在 docs.css，與 design-paper-v2 一致） */

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

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

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

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

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

.rundown .rd-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.rundown .rd-chip[aria-pressed="true"],
.rundown .rd-chip[aria-current="true"] {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.rundown .rd-menu {
  position: relative;
  min-width: 0;
}

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

.rundown .rd-menu-list[hidden] {
  display: none;
}

/* 格式選單：名稱可能很長，按鈕只留一行 */

.rundown .rd-format-btn {
  max-width: min(16rem, 100%);
}

.rundown .rd-format-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rundown .rd-format-name {
  align-self: center;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* 分段導覽 */

.rundown .rd-segnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.rundown .rd-segnav[hidden] {
  display: none;
}

/* 版本紀錄 */

.rundown .rd-versions {
  display: grid;
  gap: var(--s-3);
}

.rundown .rd-versions[hidden] {
  display: none;
}

.rundown .rd-versions h2 {
  margin: 0;
  font-size: var(--fs-md, 1rem);
}

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

.rundown .rd-version-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 699px) {
  .rundown .rd-version-item {
    align-items: stretch;
  }
}

/* 換格式確認對話框（掛在 body）：會被移除的內容清單 */

.rd-dropped {
  display: grid;
  gap: var(--s-1);
  max-height: 40vh;
  margin: 0;
  padding: 0 0 0 var(--s-5);
  overflow-y: auto;
}

/* 版本紀錄面板在整份流程表的最下面；捲過去時別被手機上固定的頂列蓋住。 */
.rundown .rd-versions {
  scroll-margin-top: calc(var(--s-7) * 2);
}