/* Composition additions using the approved Studio tokens and components. */

.client-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin:16px 0; }
.client-toolbar > label { flex:1; min-width:160px; }
.client-toolbar .input { width:100%; margin-top:6px; }
.client-toolbar form { flex:1; min-width:0; }
.client-toolbar form .btn { margin-top:12px; }
.doc__head ~ .client-toolbar { padding:0 24px; }
.client-media-label { margin:auto; color:var(--text-primary); font-size:16px; font-weight:700; }
.project-card__media:has(.client-media-label) { min-height:190px; justify-content:center; align-items:center; padding:16px; }
.client-chart-row { display:grid; grid-template-columns:minmax(100px,1fr) 2fr auto; gap:12px; align-items:center; margin:24px 0; font-size:12px; }
.client-chart-row progress { width:100%; accent-color:var(--primary); }
.file-row .btn-link { border:0; background:transparent; color:var(--primary); cursor:pointer; text-align:left; overflow-wrap:anywhere; }
.file-row__body { min-width:0; }
.preview__head { flex-wrap:wrap; gap:12px; }
.preview__title,.project-card__name,.workspace-row__name,.workspace-row__sub { overflow-wrap:anywhere; }
[data-asset-group] .file-row { flex-wrap:wrap; }
#client-settings-note { margin-top:12px; font-size:13px; }
#client-settings-form .form-row { margin-top:16px; }
#client-deliveries .file-row { flex-wrap:wrap; gap:12px; }
#client-script-actions form textarea { width:100%; }
#client-script-actions .btn { max-width:100%; white-space:normal; }
.project-card[hidden],#preview[hidden],.storyboard[hidden] { display:none; }
.client-no-workspace .screen > :not(.page-head):not(.client-workspace-empty) { display:none !important; }
.client-no-workspace .screen .page-head > :not(h1):not(div) { display:none; }
.client-workspace-empty[hidden] { display:none; }
@media(max-width:600px) { .client-toolbar { align-items:stretch; } .client-toolbar > label { min-width:100%; } .client-chart-row { grid-template-columns:minmax(70px,1fr) 1fr auto; } .doc__head ~ .client-toolbar { padding:0 16px; } }
@media(max-width:600px) { #client-script-actions > .btn { width:100%; } #client-script-actions form { flex-basis:100%; } }

/* Overview: the preview frame is a clear placeholder, not a player. It fills
   the card, which the grid stretches to the storyboard height. */
#preview:not([hidden]) { display: flex; flex-direction: column; }
.preview-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 9; padding: 28px; background: var(--surface-gray); text-align: center; }
.preview-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); }
.preview-placeholder__icon svg { margin-left: 3px; }
.preview-placeholder__message { max-width: 440px; color: var(--text-primary); font-size: 16px; font-weight: 700; line-height: 1.45; }
.preview-placeholder__video { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.preview-placeholder .btn { margin-top: 4px; }
@media (max-width: 600px) { .preview-placeholder { aspect-ratio: auto; min-height: 240px; } }

/* Projects empty states, centred across the table. */
.projects-table td.table-empty-cell { padding: 0; text-align: center; }
.table-empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

/* ==========================================================================
   Typography and hierarchy — client additions (scale in variables.css)
   ========================================================================== */
.studio-body .client-media-label { font-size: var(--text-card-title); font-weight: var(--weight-semibold); }
.studio-body .client-chart-row { font-size: var(--text-meta); color: var(--text-muted); }
.studio-body .client-chart-row strong { font-weight: var(--weight-semibold); color: var(--text-primary); }
.studio-body .preview-placeholder__message { font-size: var(--text-card-title); font-weight: var(--weight-semibold); line-height: var(--leading-normal); }
.studio-body .preview-placeholder__video { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-muted); }
.studio-body .table-empty-state { font-size: var(--text-body); font-weight: var(--weight-normal); }
.studio-body #client-settings-note { font-size: var(--text-meta); }
/* Script review: hint, approve, then the feedback form on its own full row
   (it was squeezed into a narrow column beside the hint). */
.studio-body #client-script-actions > .field-hint,
.studio-body #client-script-actions form { flex-basis: 100%; }

/* ===== Milestone payments (Part A) ===================================== */
/* Overview: one banner per project that owes a milestone right now. */
.payment-banners { display: grid; gap: var(--space-sm); }
.payment-banners:empty { display: none; }

.payment-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  padding: 14px 16px;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--amber-soft);
  color: var(--text-primary);
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
}

.payment-banner__title { font-weight: var(--weight-semibold); }
.payment-banner__note { color: var(--text-muted); }

/* Requests screen: the panel that sends clients to the order wizard. */
.request-start__list { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; font-size: var(--text-meta); color: var(--text-muted); }
.request-start__list li { padding-left: 18px; background: none; text-indent: -18px; }
.request-start__list li::before { content: "\2713"; margin-right: 8px; color: var(--success-dark); font-weight: var(--weight-semibold); }

/* The payments card and price breakdown inside a project's detail dialog. */
.payment-rows { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }

.payment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-meta);
}

.payment-row:last-child { padding-bottom: 0; border-bottom: 0; }
.payment-row__name { font-weight: var(--weight-semibold); }
.payment-row__amount { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); text-align: right; }
.payment-row__meta { grid-column: 1 / -1; color: var(--text-muted); }
.payment-row--required .payment-row__name::after { content: " · due now"; color: var(--warning-dark); font-weight: var(--weight-semibold); }

.price-lines { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); font-size: var(--text-meta); }
.price-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.price-lines dt { color: var(--text-muted); }
.price-lines dd { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.price-lines__total { padding-top: var(--space-sm); border-top: 1px solid var(--border-default); }

@media (max-width: 559px) {
  .payment-row { grid-template-columns: minmax(0, 1fr); }
  .payment-row__amount { text-align: left; }
}