/* File-first workflow additions; the existing book covers and tree stay in place. */
.card-file-action,
.family-file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 30px;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 16px;
  background: var(--blue, #0071e3);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
.card-file-action:hover,
.family-file-action:hover { background: var(--blue-hover, #0077ed); }
.card-file-action > svg,
.family-file-action > svg { flex: 0 0 14px; width: 14px; height: 14px; }
.card-file-action:focus-visible,
.family-file-action:focus-visible { outline: 3px solid #2997ff; outline-offset: 3px; }
.script-card .card-bottom { gap: 8px; }
.script-card .branch-count { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.family-file-actions { display: flex; align-items: center; flex: 1 1 auto; width: 100%; min-width: 0; gap: 8px; }
.family-file-action {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
.family-file-action:hover { background: #0063c8; }
.family-file-action[data-action="download-script"] { background: #1d1d1f; }
.family-file-action[data-action="download-script"]:hover { background: #363638; }
.family-file-action > svg { flex-basis: 16px; width: 16px; height: 16px; }
.family-file-actions .family-node-derive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  font-size: 0;
}
.family-file-actions .family-node-derive > svg { width: 14px; height: 14px; }

.workflow-banner {
  min-width: 0;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #d7e5f5;
  border-radius: 16px;
  background: #f5f7fa;
  overflow-wrap: anywhere;
}
.workflow-banner > strong { display: block; color: #1d1d1f; font-size: 14px; font-weight: 600; line-height: 1.5; }
.workflow-banner p { margin-top: 6px; color: #6e6e73; font-size: 12px; line-height: 1.8; }
.workflow-banner .btn { margin-top: 12px; }
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.workflow-steps > * {
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid #e2e6ec;
  border-radius: 9px;
  background: #fff;
  color: #85858b;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
.workflow-steps > [data-active="true"] { border-color: #bdd9f8; background: #edf5ff; color: #0071e3; }
.workflow-steps strong { font-size: inherit; font-weight: 500; }
.workflow-steps small { display: block; margin-top: 2px; color: inherit; font-size: 10px; }

.workflow-file-list { display: grid; min-width: 0; gap: 9px; margin-top: 12px; }
.workflow-file-list .selected-file {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  max-width: 100%;
  padding: 13px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  color: #424247;
  text-align: left;
}
.workflow-file-list .selected-file > svg { flex: 0 0 22px; width: 22px; height: 22px; color: #8c99a8; }
.workflow-file-list .selected-file > span { flex: 1 1 auto; min-width: 0; }
.workflow-file-list .selected-file strong { display: block; color: #424247; font-size: 13px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.workflow-file-list small { color: #86868b; font-size: 11px; font-weight: 400; line-height: 1.6; }
.workflow-file-list .selected-file > span small { display: block; margin-top: 3px; }
.workflow-file-list .selected-file > small,
.workflow-file-list .selected-file > em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 7px;
  background: #f2f4f7;
  color: #6e6e73;
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
  white-space: nowrap;
}

.current-script-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  margin: 16px 0;
  padding: 19px;
  border: 1px solid #c8dcf3;
  border-radius: 16px;
  background: #fff;
}
.current-script-file > * { min-width: 0; max-width: 100%; }
.current-script-file .current-file-label { color: #0071e3; font-size: 11px; font-weight: 500; line-height: 1.6; }
.current-script-file h3 { margin-top: 8px; color: #1d1d1f; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.current-script-file p { margin-top: 4px; color: #86868b; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.current-script-file .btn { min-height: 36px; margin-top: 14px; padding: 8px 15px; font-size: 12px; white-space: normal; }
.current-script-file .btn svg { flex: 0 0 16px; }
.historical-files { min-width: 0; margin-top: 20px; }
.historical-files > summary { padding: 7px 0; color: #6e6e73; font-size: 12px; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
.historical-files[open] > summary { margin-bottom: 9px; }
.historical-files .attachment-list { min-width: 0; margin-top: 0; }
.historical-files .attachment-item { min-width: 0; max-width: 100%; }
.historical-files .attachment-item > svg { flex-shrink: 0; }

.workflow-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 31px 20px;
  border: 1px solid #e7ebf0;
  border-radius: 16px;
  background: #f5f7fa;
  text-align: center;
}
.workflow-empty > svg { flex: 0 0 40px; width: 40px; height: 40px; margin-bottom: 14px; color: #8a9caf; }
.workflow-empty h3 { color: #1d1d1f; font-size: 18px; font-weight: 600; line-height: 1.5; }
.workflow-empty p { max-width: 360px; margin-top: 8px; color: #6e6e73; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.workflow-empty .btn { max-width: 100%; margin-top: 18px; white-space: normal; }
.workflow-empty .btn svg { flex: 0 0 16px; }
.form-stack .workflow-note { min-width: 0; padding: 13px 15px; border-radius: 12px; background: #f5f5f7; color: #6e6e73; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.requirements-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 14px 0 18px; }
.requirements-tools .btn { max-width: 100%; min-height: 34px; padding: 7px 13px; font-size: 12px; white-space: normal; }
.requirements-tools .btn svg { flex: 0 0 15px; width: 15px; height: 15px; }
.requirements-box { user-select: text; cursor: text; }
.workflow-queue-progress { margin-top: 11px; color: #86868b; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.form-stack .form-actions { flex-wrap: wrap; }
.form-stack .form-actions button { max-width: 100%; white-space: normal; }

@media (max-width: 480px) {
  .workflow-banner { padding: 14px; }
  .workflow-steps { gap: 5px; }
  .workflow-steps > * { padding: 8px 3px; font-size: 10px; }
  .workflow-file-list .selected-file { gap: 8px; padding: 11px; flex-wrap: wrap; }
  .workflow-file-list .selected-file > span { flex-basis: calc(100% - 30px); }
  .workflow-file-list .selected-file > small,
  .workflow-file-list .selected-file > em { margin-left: 30px; }
  .current-script-file { padding: 16px; }
  .workflow-empty { padding: 26px 15px; }
  .requirements-tools { gap: 7px; }
  .requirements-tools .btn { padding: 7px 11px; }
}