/* 1106 资产拆解：纯文本要素卡。颜色、字号、圆角只用 r12-system 的语义变量。
   本阶段不生成图片：卡片没有图片栏、缩略图或图片占位。 */

/* 页面内容区自己纵向滚动：滚轮、触控板与拖动真实滚动条都能到最后一张卡。
   工作区和面板都保持 overflow: visible，不靠裁切或隐藏溢出来“解决”滚动。
   底部按项目页实测的 --r12-dock-clear 让出悬浮主控，最后一张卡和确认按钮不会压在它下面。 */
.r12f-content:has(.ft-break-panel) {
  overscroll-behavior: contain;
}
.r12f-content:has(.ft-break-panel) .r12-ws {
  height: auto;
  overflow: visible;
  grid-auto-rows: auto;
}
.r12f-content:has(.ft-break-panel) .r12-ws > .ft-break-panel {
  height: auto;
  min-height: 0;
  padding: 12px 14px calc(var(--r12-dock-clear, 88px) + 16px);
  overflow: visible;
}
.ft-break-panel > * { flex: none; }

/* ── 卡片墙前：标题、计数与操作同一行，提示只留一行 ─────────────── */
.ft-break-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ft-break-head-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.ft-break-head h1 { margin: 0; color: var(--r12-ink); font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-weight: 600; }
.ft-break-counts { color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); font-variant-numeric: tabular-nums; }
.ft-break-head-actions { display: flex; flex: none; gap: 8px; }
.ft-break-head-actions .r12-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ft-break-hint { margin: 6px 0 10px; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); overflow-wrap: anywhere; }

/* ── 要素卡：名称＋类型、描述、使用集数/版本/状态、操作 ─────────── */
.ft-break-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.ft-break-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-2);
  color: var(--r12-ink);
}
.ft-break-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.ft-break-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ft-break-kind {
  flex: none;
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
}
/* 多行描述按原样换行，不裁字、不省略；卡片随内容增高。 */
.ft-break-desc {
  margin: 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ft-break-desc.is-empty { color: var(--r12-faint); }
.ft-break-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
}
.ft-break-episodes { min-width: 0; overflow-wrap: anywhere; }
.ft-break-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ft-break-status > i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--r12-faint); }
.ft-break-status.is-succeeded > i { background: var(--r12-ok); }
.ft-break-status.is-queued > i,
.ft-break-status.is-running > i { background: var(--r12-running); animation: ft-break-pulse 1.1s ease-in-out infinite alternate; }
.ft-break-status.is-failed > i { background: var(--r12-error); }
.ft-break-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--r12-line);
}
.ft-break-actions .r12-btn { display: inline-flex; align-items: center; gap: 4px; }
.ft-break-actions .r12-btn:last-child { margin-left: auto; }
.ft-break-grid > .r12av2-empty { grid-column: 1 / -1; }

/* 底部确认：提示已并入顶部一行，这里只留操作，避免重复说明。 */
.ft-break-foot { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--r12-line); }

/* ── 添加卡片模态：沿用 1106 共用 r12-dialog 外观 ────────────────── */
.ft-break-form { display: grid; gap: 12px; padding-bottom: 4px; }
.ft-break-form .r12-field { gap: 4px; }
.ft-break-form .r12-input { width: 100%; box-sizing: border-box; }
.ft-break-form-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ft-break-form-label { flex: none; width: 48px; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.ft-break-types.r12-seg { height: 30px; }
.ft-break-types .r12-seg-item { height: 26px; padding: 0 10px; gap: 4px; font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.ft-break-types .r12-seg-item svg { width: 14px; height: 14px; }
/* 多行描述：不受通用 .r12-input 的 32px 单行高限制，默认显示 4 行，可纵向拉高。 */
.ft-break-form textarea.r12-input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 88px;
  padding: 8px 10px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-y: auto;
  resize: vertical !important;
}
/* 删除确认的正文 */
.ft-break-delete-copy { margin: 0; color: var(--r12-muted); font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); text-wrap: pretty; }
.ft-break-delete-copy b { color: var(--r12-ink); font-weight: 600; }

@keyframes ft-break-pulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ft-break-status.is-queued > i,
  .ft-break-status.is-running > i { animation: none; }
}
html[data-motion='reduced'] .ft-break-status > i { animation: none !important; }

@media (max-width: 600px) {
  .ft-break-head { align-items: flex-start; }
  .ft-break-head-actions { width: 100%; }
  .ft-break-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-break-form-row { align-items: flex-start; flex-direction: column; gap: 4px; }
}