/* 流程表（M8）。全部規則都在 .rundown 底下；只用 /shared/paper.css 的 token。 */

.rundown {
  container: rd / inline-size;
  --person: #2E5B8A;
  --team: #6B3E7E;
  --venue: #3D6A4B;
  --rd-label: 6.5rem; /* 項目欄（時間軸列） */
  --rd-media: 9rem; /* 影片音樂／備註欄 */
  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 .rd-empty {
  padding: var(--s-4) 0;
}

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

.rundown .check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  cursor: pointer;
}

.rundown button:focus-visible,
.rundown input:focus-visible,
.rundown select:focus-visible,
.rundown textarea: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);
}

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

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

/* 通知與狀態 */

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

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

/* 預覽／編輯：單一分段控制 */
.rundown .rd-modes {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.rundown .rd-seg {
  min-height: var(--tap);
  min-width: 5.5rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.rundown .rd-seg[aria-pressed="true"] {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
}

.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;
}

.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;
  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-segnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* 區段 */

.rundown .rd-body {
  display: grid;
  gap: var(--s-7);
}

.rundown .rd-sec {
  display: grid;
  gap: var(--s-4);
  scroll-margin-top: var(--s-5);
  min-width: 0;
}

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

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

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

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

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

.rundown .rd-grid-one {
  max-width: 22rem;
}

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

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

.rundown .rd-add {
  display: flex;
  justify-content: flex-start;
}

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

/* RICH 標記（與 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 .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);
}

/* 時間軸表格（預覽） */

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

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

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

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

/* Fixed layout: give the 內容 column the room; time/item stay narrow, media/note share the rest. */
.rundown .flow .c-t { width: 7.5rem; }
.rundown .flow .c-item { width: 6.5rem; }
.rundown .flow .c-media { width: 20%; }
.rundown .flow .c-note { width: 18%; }

.rundown .flow td.t {
  white-space: nowrap;
}

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

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

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

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

/* 表格（廠商預覽） */

.rundown .ledger {
  width: 100%;
  border-collapse: collapse;
}

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

.rundown .ledger .amt {
  text-align: right;
  white-space: nowrap;
}

/* 物品清單 */

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

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

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

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

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

/* 佈置 */

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

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

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

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

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

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

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

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

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

/* 編輯 */

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

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

/* 欄位小標題（窄螢幕顯示；桌機由欄頭代替） */
.rundown .rd-cap {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* 欄頭：桌機才顯示，與列共用同一組欄寬 */
.rundown .rd-colhead {
  display: none;
}

/* 共用標記工具列：時段區頂端，黏在捲動時的頂端；一行，標記鈕與目標並排 */
.rundown .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);
}

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

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

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

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

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

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

/* 即時預覽：只在含標記時出現，小而淡 */
.rundown .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;
}

/* 時間軸列：一列一行。時間留空 = 與上一列同一時段；段首列有粗線。窄螢幕為卡片，每格自帶小標題。 */

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

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

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

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

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

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

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

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

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

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

/* 影片音樂＋備註：單欄直排 */
.rundown .rd-side {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

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

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

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

/* 廠商：窄螢幕為卡片，寬螢幕（≥900）為表格列 */
.rundown .rd-vrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.rundown .rd-vrow .rd-act {
  grid-column: 1 / -1;
}

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

.rundown .rd-grid-one {
  margin-top: var(--s-3);
}

/* 物品清單（編輯）：每個分類一列 */
.rundown .items-edit {
  display: grid;
  gap: var(--s-4);
}

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

.rundown .rd-cat-row .rd-act {
  display: flex;
  gap: var(--s-1);
}

/* 版本紀錄 */

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

/* 時間軸依 .rundown 的可用寬度切換（右側 AI 面板展開時，時間軸只有約 750px）。
   窄（<560）：卡片，每格自帶小標題。
   中（560–1079）：兩行（見下方 @container 中段）。
   寬（≥1080）：單行表格列。 */
@container rd (min-width: 560px) {
  .rundown .rd-row,
  .rundown .rd-tl-colhead {
    --rd-when: 8.5rem;
    --rd-media: 10rem;
  }

  /* 列內隱藏小標題（欄頭代替）；整列說明例外，因為它的欄頭不存在 */
  .rundown .rd-row .rd-cap {
    display: none;
  }

  .rundown .rd-row.is-banner .c-text .rd-cap {
    display: block;
  }

  .rundown .rd-tl-colhead {
    display: grid;
    padding: 0 var(--s-3) var(--s-1);
    font-family: var(--f-sans);
    font-size: var(--fs-xs);
    color: var(--ink-2);
  }

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

  .rundown .rd-cat-row {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-2) 0;
  }

  .rundown .rd-cat-row .rd-cap {
    display: none;
  }

  .rundown .rd-cat-row .rd-act {
    display: flex;
    gap: var(--s-1);
  }

  /* 廠商卡片（560–899）：三欄，↑ ↓ 刪 在卡片右上角 */
  .rundown .rd-vrow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas:
      "role team contact act"
      "phone count arrival .";
  }

  .rundown .rd-vrow .c-role { grid-area: role; }
  .rundown .rd-vrow .c-team { grid-area: team; }
  .rundown .rd-vrow .c-contact { grid-area: contact; }
  .rundown .rd-vrow .c-phone { grid-area: phone; }
  .rundown .rd-vrow .c-count { grid-area: count; }
  .rundown .rd-vrow .c-arrival { grid-area: arrival; }

  .rundown .rd-vrow .rd-act {
    grid-column: auto;
    grid-area: act;
    align-self: start;
  }
}

/* 中（560–1079）：兩行。第一行：時間｜項目｜種類＋操作（操作放不下時換到種類下方）；第二行：內容（跨前三欄）｜影片音樂・備註。 */
@container rd (min-width: 560px) and (max-width: 1079px) {
  .rundown .rd-row,
  .rundown .rd-tl-colhead {
    --rd-label: 9rem;
    --rd-side: 11rem;
  }

  .rundown .rd-row {
    grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-side);
    grid-template-areas:
      "time label bar bar"
      "content content content side";
    column-gap: var(--s-2);
  }

  .rundown .rd-row .c-time { grid-area: time; }
  .rundown .rd-row .c-label { grid-area: label; }
  .rundown .rd-row .rd-bar { grid-area: bar; }
  .rundown .rd-row .c-content,
  .rundown .rd-row .c-text { grid-area: content; }
  .rundown .rd-row .rd-side { grid-area: side; }

  .rundown .rd-row .rd-f-kind {
    margin-right: auto;
  }

  .rundown .rd-row .rd-act {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-1);
    flex: 0 0 auto;
  }

  .rundown .rd-tl-colhead {
    grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-side);
    grid-template-areas:
      "time label bar bar"
      "content content content side";
    column-gap: var(--s-2);
  }

  .rundown .rd-tl-colhead .c-time { grid-area: time; }
  .rundown .rd-tl-colhead .c-label { grid-area: label; }
  .rundown .rd-tl-colhead .c-act { grid-area: bar; }
  .rundown .rd-tl-colhead .c-content { grid-area: content; }
  .rundown .rd-tl-colhead .c-media { grid-area: side; }
  .rundown .rd-tl-colhead .c-note {
    display: none;
  }
}

/* ≥1080：單行表格列（時間、項目、內容、影片音樂、備註、操作）。 */
@container rd (min-width: 1080px) {
  .rundown .rd-row,
  .rundown .rd-tl-colhead {
    --rd-when: 8rem;
    --rd-label: 8rem;
    --rd-media: 10rem;
    --rd-act: calc(var(--tap) * 3 + var(--s-1) * 2);
  }

  .rundown .rd-row {
    grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-media) var(--rd-media) var(--rd-act);
    grid-template-areas: "when label content media note act";
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .rundown .rd-row.is-banner {
    grid-template-columns: var(--rd-when) minmax(0, 1fr) var(--rd-media) var(--rd-media) var(--rd-act);
    grid-template-areas: "when text media note act";
  }

  .rundown .rd-row.is-highlight {
    padding-inline: var(--s-2);
  }

  .rundown .rd-row .c-time { grid-area: when; }
  .rundown .rd-row .c-label { grid-area: label; }
  .rundown .rd-row .c-content { grid-area: content; }
  .rundown .rd-row .c-text { grid-area: text; }
  .rundown .rd-row .c-media { grid-area: media; }
  .rundown .rd-row .c-note { grid-area: note; }

  .rundown .rd-row .rd-bar {
    grid-area: act;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
  }

  .rundown .rd-row .rd-act {
    display: grid;
    grid-template-columns: repeat(3, var(--tap));
    justify-content: start;
    gap: var(--s-1);
  }

  .rundown .rd-row .rd-side {
    display: contents;
  }

  .rundown .rd-tl-colhead {
    grid-template-columns: var(--rd-when) var(--rd-label) minmax(0, 1fr) var(--rd-media) var(--rd-media) var(--rd-act);
    grid-template-areas: "when label content media note act";
    gap: var(--s-2);
    padding: 0 0 var(--s-1);
  }

  .rundown .rd-tl-colhead .c-time { grid-area: when; }
  .rundown .rd-tl-colhead .c-label { grid-area: label; }
  .rundown .rd-tl-colhead .c-content { grid-area: content; }
  .rundown .rd-tl-colhead .c-media { grid-area: media; }
  .rundown .rd-tl-colhead .c-note {
    display: block;
    grid-area: note;
  }
  .rundown .rd-tl-colhead .c-act { grid-area: act; }

  .rundown .rd-tl-colhead .c-sep {
    display: none;
  }
}

/* 廠商：≥900 為表格列（欄頭顯示）；560–899 為三欄卡片；窄螢幕為兩欄卡片 */
.rundown .rd-vhead {
  display: none;
}

@container rd (min-width: 900px) {
  .rundown .rd-vhead,
  .rundown .rd-vrow {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) 4.5rem minmax(0, 1fr) auto;
    grid-template-areas: none;
    gap: var(--s-2);
    align-items: start;
  }

  .rundown .rd-vrow {
    padding: var(--s-2) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .rundown .rd-vrow .rd-act {
    grid-column: auto;
    grid-area: auto;
  }

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

  .rundown .rd-vrow .rd-cap {
    display: none;
  }
}

/* 寬螢幕（≥560）：佈置參考圖放在說明欄右側 */
@media (max-width: 559px) {
  .rundown .rd-decor-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 手機：時間軸表格改為卡片（預覽） */

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

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

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

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

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

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

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

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

  .rundown .ledger thead {
    display: none;
  }

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

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

  .rundown .ledger .amt {
    text-align: left;
  }

  .rundown .rd-version-item {
    align-items: stretch;
  }
}