.workflow-toolbar { display:grid; grid-template-columns:2fr repeat(4,1fr); gap:12px; padding:20px; }
.workflow-toolbar label { min-width:0; font-size:11px; color:var(--text-muted); }
.workflow-toolbar .input { width:100%; margin-top:6px; }
.workflow-table { min-width:880px; }
.workflow-table button { white-space:normal; }
.workflow-detail { width:min(860px,calc(100% - 32px)); }
.workflow-body { padding:24px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.workflow-body h3 { margin:24px 0 10px; }
.workflow-entry { padding:14px 0; border-bottom:1px solid var(--border-light); }
.workflow-entry p { white-space:pre-wrap; }
.workflow-feedback { padding:16px; background:var(--surface-hover); border-left:3px solid var(--primary); border-radius:8px; white-space:pre-wrap; }
.workflow-version { padding:18px; border:1px solid var(--border-default); border-radius:12px; background:var(--surface-hover); margin:10px 0; }
.workflow-version summary { cursor:pointer; font-weight:600; }
.workflow-error { color:#b42318; margin:12px 0; font-size:13px; }
.workflow-file { padding:10px; height:auto; }
.workflow-table-wrap { overflow-x:auto; position:relative; }
.workflow-detail .admin-dialog-foot { flex-wrap:wrap; }
.workflow-body .btn-link { border:0; background:none; color:var(--primary); cursor:pointer; }
.workflow-detail .admin-dialog-head h2 { overflow-wrap:anywhere; }
.workflow-request-card { padding:18px; }
.workflow-request-card .badge { margin:10px 0; }
.studio-noscript { padding:2rem; text-align:center; font-family:sans-serif; }
.admin-dialog h2,.admin-dialog p,.admin-dialog dd,.admin-project-list strong,.list-card__title,.doc__title,.file-row__title,.table button,.table td { overflow-wrap:anywhere; }
.admin-dialog .input { max-width:100%; min-width:0; }
@media(max-width:1100px) { .workflow-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); } .workflow-toolbar label:first-child { grid-column:1/-1; } }
@media(max-width:600px) { .workflow-toolbar,.workflow-body { padding:16px; } .workflow-toolbar .input { font-size:16px; } .workflow-detail .admin-dialog-foot .btn { flex:1 1 auto; } .review-bar__actions .btn { flex:1 1 auto; } }
/* Review experience: media slot first, then the version and the client's decision. */
.media-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; aspect-ratio:16/9; padding:24px; border:1px dashed var(--border-dashed); border-radius:var(--radius-card); background:var(--surface-gray); color:var(--text-muted); text-align:center; }
.media-placeholder__icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--surface-white); color:var(--primary); box-shadow:var(--shadow-sm); }
.media-placeholder__icon svg { margin-left:3px; }
.media-placeholder__text { max-width:420px; font-size:13.5px; line-height:1.6; }
.workflow-version-line { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 4px; font-weight:600; }
.review-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; margin:18px 0 6px; padding:18px 20px; border:1px solid var(--primary-border); border-radius:var(--radius-card); background:var(--primary-tint); }
.workflow-body .review-bar__label { margin:0; font-size:16px; }
.review-bar__actions { display:flex; flex-wrap:wrap; gap:10px; }
.workflow-notice { margin:0 0 16px; padding:12px 14px; border-radius:10px; background:var(--success-tint); color:var(--success-dark); font-size:13px; font-weight:600; line-height:1.5; }
.field-hint { margin-top:6px; color:var(--text-muted); font-size:12px; line-height:1.5; }
.workflow-body .admin-detail-facts { margin-top:18px; }
@media(max-width:600px) { .media-placeholder { aspect-ratio:auto; min-height:190px; } .review-bar { padding:16px; } }

/* Round B: compact cards use the existing table rows, with no duplicate data. */
.btn-danger { background:#b42318; border-color:#b42318; color:#fff; }
.btn-danger:hover { background:#912018; border-color:#912018; color:#fff; }
.admin-action-panel { margin:0 0 20px; }
.admin-action-queue { list-style:none; padding:0; margin:0; max-height:360px; overflow-y:auto; }
.admin-action-queue li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-light); }
.admin-action-queue li:last-child { border-bottom:0; }
.admin-action-queue .btn-link { white-space:normal; text-align:left; }
.admin-action-label { color:var(--text-muted); font-size:12px; flex-shrink:0; }
.sidebar-count { margin-left:auto; min-width:22px; padding:2px 6px; border-radius:12px; background:var(--primary-tint); color:var(--primary); text-align:center; font-size:11px; }
.input[aria-invalid="true"] { border-color:#b42318; }
@media(max-width:600px) {
  .mobile-records-wrap { overflow:visible; }
  .table.mobile-records { display:block; min-width:0; width:100%; table-layout:auto; }
  .mobile-records thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mobile-records tbody { display:block; width:100%; }
  .mobile-records tbody tr { display:block; margin:12px; padding:14px; border:1px solid var(--border-default); border-radius:12px; background:var(--surface-white); }
  .table.mobile-records tbody td { display:block; width:auto; min-width:0; max-width:none; padding:7px 0; border:0; white-space:normal; text-align:left; }
  .mobile-records td::before { content:attr(data-label); display:block; margin-bottom:4px; font-size:10px; font-weight:600; color:var(--text-muted); }
  .mobile-records td:first-child::before, .mobile-records .table-empty-cell::before { display:none; }
  .mobile-records td:first-child .btn { padding-left:0; text-align:left; }
  .mobile-records button { min-height:32px; }
  #screen-projects .table-hint, [data-workflow-list] .table-hint,
  #screen-assets .table-hint, #screen-scripts .table-hint,
  #screen-dashboard .table-hint { display:none; }
  .admin-action-queue li { align-items:flex-start; flex-direction:column; gap:6px; }
  .admin-action-label { flex-shrink:1; }
}

/* ==========================================================================
   Typography and hierarchy — shared workflow UI (scale in variables.css)
   ========================================================================== */
.studio-body .workflow-toolbar { padding: var(--space-lg); }
.studio-body .workflow-table th:first-child { width: 24%; }
.studio-body .workflow-table th:nth-child(3) { width: 20%; }
.studio-body .workflow-toolbar label { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.studio-body .workflow-body { font-size: var(--text-body); line-height: var(--leading-relaxed); }
.studio-body .workflow-body .review-bar__label { font-size: var(--text-card-title); font-weight: var(--weight-bold); }
.studio-body .review-bar .admin-muted { color: var(--text-muted); }
.studio-body .field-hint { font-size: var(--text-small); }
.studio-body :is(.workflow-notice, .workflow-error) { font-size: var(--text-meta); }
.studio-body .media-placeholder__text { font-size: var(--text-body); line-height: var(--leading-relaxed); }
.studio-body .workflow-version summary { font-size: var(--text-body); }
.studio-body .sidebar-count { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
@media(max-width:600px) {
  .studio-body .workflow-toolbar { padding: var(--space-md); }
  .studio-body .mobile-records tbody tr { margin: var(--space-md); padding: var(--space-md); }
  .studio-body .mobile-records td::before { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
}

/* ===== Milestone workflow: stepper, storyboards, preview and delivery ==== */

/* Progress tracker: where a project stands, left to right. */
.progress-tracker { margin: var(--space-md) 0 var(--space-lg); }

.progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-step {
  position: relative;
  flex: 1 1 0;
  min-width: 92px;
  padding-top: 20px;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  text-align: center;
  color: var(--text-light);
}

/* The connector runs between dots, not past the ends of the row. */
.progress-step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--border-default);
}

.progress-step::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 50%;
  height: 2px;
  background: var(--border-default);
}

.progress-step:first-child::before,
.progress-step:last-child::after { display: none; }

.progress-step__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-white);
}

.progress-step__label { display: block; overflow-wrap: anywhere; }

.progress-step.is-done { color: var(--text-muted); }
.progress-step.is-done .progress-step__dot { border-color: var(--success); background: var(--success); }
.progress-step.is-done::before,
.progress-step.is-done::after { background: var(--success); }

.progress-step.is-current { color: var(--text-primary); font-weight: var(--weight-semibold); }
.progress-step.is-current .progress-step__dot { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }
.progress-step.is-current::before { background: var(--success); }

.progress-tracker__now { margin-top: var(--space-md); font-size: var(--text-meta); color: var(--text-muted); }

.progress-tracker--cancelled .progress-step__dot { border-color: var(--border-dark); background: var(--surface-chip); }
.progress-tracker--cancelled .progress-tracker__now { color: var(--danger); font-weight: var(--weight-semibold); }

/* Inline review actions, with their own error line. */
.review-actions { margin-top: var(--space-md); }
.review-actions__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.review-actions .workflow-error:empty { display: none; }
.review-feedback { margin-top: var(--space-md); }
.review-feedback[hidden] { display: none; }
.review-feedback .input { width: 100%; margin-top: 6px; }

/* Storyboard rounds. */
.sb-current { padding: var(--space-md); border: 1px solid var(--primary-border); border-radius: var(--radius-panel); background: var(--primary-tint); }
.sb-round { margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-panel); background: var(--surface-white); }
.sb-current .sb-round { margin-top: var(--space-md); background: var(--surface-white); }
.sb-round__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.sb-round h4 { margin-top: var(--space-md); }
.sb-round .btn { margin-top: var(--space-md); }

.sb-preview { margin-top: var(--space-md); }
.sb-preview__image { display: block; width: 100%; height: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.sb-preview__video { display: block; width: 100%; border-radius: var(--radius-md); background: #000; }

/* Preview player. Never offered as a download. */
.video-preview { margin-top: var(--space-md); }
.video-preview__player { display: block; width: 100%; border-radius: var(--radius-md); background: #000; }
.video-preview__caption { margin-top: var(--space-sm); font-size: var(--text-small); color: var(--text-muted); }

/* Final delivery: locked until the 40% milestone is settled. */
.delivery-card { margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-panel); background: var(--surface-light); }
.delivery-card__locked { font-size: var(--text-meta); line-height: var(--leading-relaxed); color: var(--text-muted); }
.delivery-card .btn { margin-top: var(--space-md); }

/* Project attachments, each with its own download. */
.attachment-list { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.attachment-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-default); }
.attachment-row:last-child { padding-bottom: 0; border-bottom: 0; }
.attachment-row__name { font-size: var(--text-meta); overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .progress-steps { gap: var(--space-md) 0; }
  .progress-step { flex-basis: 33%; min-width: 0; }
  .review-actions__row .btn { width: 100%; }
}