.approvals-list { display: grid; gap: var(--space-4); min-width: 0; }
.approval-record .maker-approval__kind { color: var(--muted); font-size: var(--text-meta); margin-bottom: var(--space-2); }
.maker-approval__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.maker-approval > .text-link + .text-link { margin-left: var(--space-4); }
.maker-approval__inquiry { margin-top: var(--space-4); }
.maker-approval__inquiry summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.maker-approval__message { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-4); background: var(--paper-deep); max-height: 400px; overflow: auto; }
.approval-record { min-width: 0; padding: var(--space-4) 0; border: 0; border-radius: 0; background: var(--surface); }
.approval-record__heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-4); }
.approval-record h3, .client-approval-summary h3 { margin: 0; font-size: var(--title-section); }
.approval-record__heading p { margin: var(--space-1) 0 0; font-size: var(--text-dense); }
.approval-record__identity { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.approval-record__request { margin: var(--space-4) 0; overflow-wrap: anywhere; }
.approval-record__request p { margin: 0 0 var(--space-2); }
.approval-record__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--text-meta); color: var(--muted); }
.approval-record__meta strong { font-weight: 400; color: var(--ink); }
.approval-state--pending { color: var(--amber); }
.approval-state--approved { color: var(--ink); }
.approval-state--changes_requested { color: var(--red-ink); }
.approval-state--draft { color: var(--muted); }
.approval-client-response { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); overflow-wrap: anywhere; }
.approval-client-response p { margin: 0 0 var(--space-1); }
.approval-record__actions { margin-top: var(--space-4); }
.approval-share { width: 100%; }
.approval-compose { padding: var(--space-4) 0; background: var(--surface); border-top: 1px solid var(--line); border-radius: 0; }
.approval-compose h2 { margin: 0 0 var(--space-2); font-size: var(--title-section); }
.approval-compose summary { min-height: var(--control-height); margin: 0; padding: 0; cursor: pointer; font-size: var(--title-section); font-weight: 400; }
.approval-compose summary:hover { color: var(--ink); }
.approval-compose summary:active { color: var(--ink); }
.approval-compose[open] summary { margin-bottom: var(--space-4); }
.approval-compose--queue { margin-bottom: var(--space-6); }
.approval-compose--queue .approval-order-picker, .approval-compose--queue .approval-request-form { max-width: 780px; }
.approval-compose--queue .approval-selected-order h2 { margin-bottom: var(--space-2); }
.approval-compose--queue .approval-selected-order p { margin: 0; }
.approval-request-form, .approval-order-picker { display: grid; gap: var(--space-4); }
.approval-order-picker .button, .approval-request-form > .button { justify-self: start; }
.approval-request-form .section-description { margin-bottom: 0; }
.approval-selected-order { border-top: 1px solid var(--line); padding-top: var(--space-4); margin: var(--space-6) 0 var(--space-4); }
.approval-publication-help { font-size: var(--text-dense); line-height: var(--line-body); margin: 0; }
.approval-count { color: var(--muted); font-size: var(--text-meta); }
.approval-blocked-note { padding: var(--space-3) 0; color: var(--amber); font-size: var(--text-ui); }
.approvals-empty { padding: var(--space-4) 0; border: 0; color: var(--muted); }
.approvals-empty h2 { margin-top: 0; color: var(--ink); font-size: var(--title-panel); line-height: var(--line-panel); }
.order-approvals > .approval-compose { margin-top: var(--space-6); }
.approval-error-page { max-width: 800px; }
.client-approval-section { margin: 0; padding: var(--space-6) 0; border-top: 1px solid var(--client-line); }
.client-approval-section > p { margin: var(--space-2) 0 var(--space-4); }
.client-approval-summary { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; padding-block: var(--space-4); }
.client-approval-summary + .client-approval-summary { border-top: 1px solid var(--client-line); }
.client-approval-summary > div { min-width: 0; overflow-wrap: anywhere; }
.client-approval-summary p { margin: var(--space-2) 0; }
.client-approval-summary .button { flex-shrink: 0; }
.client-approval-summary small { color: var(--client-muted); }
.client-approval-page { max-width: 780px; }
.client-approval-page h1 { margin-bottom: var(--space-2); }
.client-approval-product { color: var(--client-muted); margin-top: 0; }
.client-approval-request, .client-approval-confirmation { padding: var(--space-6) 0; margin: 0; border-top: 1px solid var(--client-line); overflow-wrap: anywhere; }
.client-approval-request h2 { font-size: var(--title-section); line-height: var(--line-body); }
.client-approval-form { display: grid; gap: var(--space-3); }
.client-approval-form .button { justify-self: start; }
.client-approval-form .form-field { align-items: start; }
.approval-decision { padding: 0; margin: 0 0 var(--space-4); border: 0; display: grid; gap: var(--space-2); }
.approval-decision legend { font-size: var(--title-section); font-weight: 400; margin-bottom: var(--space-3); }
.approval-decision label { display: flex; align-items: start; gap: var(--space-3); border: 0; padding: var(--space-2) 0; cursor: pointer; }
.approval-decision strong { font-weight: 400; }
.approval-decision label:has(input:not(:disabled)):hover { border-color: var(--accent-line); background: var(--accent-wash); }
.approval-decision label:has(input:not(:disabled)):active { border-color: var(--accent); background: var(--accent-wash-hover); }
.approval-decision label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.approval-decision label:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.approval-decision input:focus-visible { outline: none; }
.approval-decision label:has(input:disabled) { color: var(--muted); cursor: not-allowed; opacity: var(--disabled-opacity); }
.approval-decision input { margin-top: var(--space-1); accent-color: var(--accent); }
.client-status-body .approval-state--approved { color: var(--client-ink); }
.client-status-body .approval-decision label:has(input:not(:disabled)):hover { border-color: var(--client-accent-ink); color: var(--client-badge-ink); background: var(--client-accent-wash); }
.client-status-body .approval-decision label:has(input:not(:disabled)):active { border-color: var(--client-accent-ink); color: var(--client-badge-ink); background: var(--client-accent-wash); }
.client-status-body .approval-decision label:has(input:checked) { border-color: var(--client-accent-ink); color: var(--client-badge-ink); background: var(--client-accent-wash); }
.client-status-body .approval-decision label:has(input:focus-visible) { outline-color: var(--client-accent-ink); }
.client-status-body .approval-decision input { accent-color: var(--client-accent-ink); }
.approval-decision small { display: block; margin-top: var(--space-1); color: var(--muted); }
.client-status-body .approval-decision small { color: var(--client-muted); }
.client-status-body .approval-decision label:has(input:not(:disabled)):is(:hover, :active) small,
.client-status-body .approval-decision label:has(input:checked) small { color: inherit; }
.client-status-body .approval-decision label:has(input:not(:disabled)):is(:hover, :active) input,
.client-status-body .approval-decision label:has(input:checked) input { accent-color: var(--client-badge-ink); }
@media (max-width: 600px) { .approval-record__heading { flex-direction: column; } .client-approval-section { padding: var(--space-6) 0; } .client-approval-summary { align-items: start; flex-direction: column; gap: var(--space-4); } }

/* Status badges sharing an action row align with its buttons. */
:where(:has(> .button, > .button_to > .button)) > .approval-state {
  height: var(--button-height);
  min-height: var(--button-height);
  padding-block: 0;
  justify-content: center;
}

/* Approvals use the contained register variant shared with Inventory. */
.approval-queue-grid { width: var(--column-resize-width, 100%); min-width: var(--column-resize-width, 616px); }
.approval-queue-header, .approval-queue-row { display: grid; grid-template-columns: var(--column-resize-tracks, 72px minmax(200px, 2fr) minmax(160px, 1.4fr) 160px); align-items: center; min-width: var(--column-resize-width, 616px); padding-left: var(--space-6); }
.approval-queue-header > span, .approval-queue-row > span { min-width: 0; padding-inline: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approvals-queue .approvals-list { gap: 0; }
.approvals-queue .approvals-empty { padding: var(--space-6); }
.approval-queue-row { height: var(--row-height); }
.approvals-list > [role="row"]:not(:last-child) > .approval-queue-row { border-bottom: 1px solid var(--line-soft); }
.approval-queue-id { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.approval-queue-product { display: flex; align-items: center; gap: var(--space-2); }
.approval-queue-product > .approval-queue-thumbnail-slot { flex: 0 0 var(--thumbnail-size); width: var(--thumbnail-size); height: var(--thumbnail-size); }
.approval-queue-product > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-queue-thumbnail { flex: 0 0 var(--thumbnail-size); width: var(--thumbnail-size); height: var(--thumbnail-size); object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-thumb); }
.approval-queue-client, .approval-queue-status { color: var(--muted); font-size: var(--text-meta); }
.approvals-queue-note { display: none; }
@media (max-width: 760px) {
  .approvals-page .page-header { overflow-x: auto; }
}

.approval-queue-header, .approval-queue-row { letter-spacing: -.1px; }
.approval-queue-row > span { height: 100%; align-content: center; }
.approval-queue-row :is(.approval-queue-client, .approval-queue-status) { line-height: 18px; }