/* Public paper variant: uses the same shared controls and spacing as the workspace. */
.client-status-body { font-size: var(--text-ui); line-height: var(--line-body); background: var(--client-background); color: var(--client-ink); color-scheme: light; -webkit-font-smoothing: antialiased; }
body.client-status-body { padding: var(--space-6) var(--space-8) var(--space-8); }
.client-status-body .privacy-footer { color: var(--client-muted); }
.client-status-body a { color: var(--client-ink); text-decoration: none; }
.client-status-body .section-description, .client-status-body .field-label, .client-status-body .field-hint, .client-status-body .breadcrumbs { color: var(--client-muted); }
.client-status { width: 100%; max-width: 1000px; margin: 0 auto; background: var(--client-background); color: var(--client-ink); font-size: var(--text-ui); line-height: var(--line-body); letter-spacing: var(--tracking-ui); container: client-page / inline-size; }
.client-status-body .client-status:not(.client-approval-page) { max-width: 960px; padding: 0 var(--space-8); border: 1px solid var(--client-line); border-radius: var(--radius-panel); }
.client-status__masthead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); height: var(--studio-card-height); }
.client-studio-brand { display: inline-flex; align-items: center; gap: var(--brand-icon-gap); text-decoration: none; min-width: 0; color: var(--client-ink); }
.client-studio-brand img { width: auto; height: auto; max-width: 160px; max-height: var(--row-height); object-fit: contain; object-position: left center; }
.client-studio-brand > span { min-width: 0; }
.client-studio-symbol { display: grid; place-items: center; flex: 0 0 var(--control-height); height: var(--control-height); border: 1px solid var(--client-line); border-radius: var(--radius-control); font-size: var(--text-tiny); font-weight: 600; line-height: var(--line-meta); }
.client-studio-brand strong { display: block; font-size: var(--text-ui); line-height: var(--space-4); font-weight: 600; }
.client-studio-brand small { display: block; color: var(--client-muted); font-size: var(--text-meta); line-height: var(--space-4); }
.client-studio-brand strong, .client-studio-brand small, .client-kicker, .client-recipient, .client-specs dd, .client-status__footer { overflow-wrap: anywhere; }
.client-status__context { flex-shrink: 0; color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); }
.client-order-number { font-family: ui-monospace, Menlo, monospace; font-size: inherit; line-height: 1; }
.client-status__hero { display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: center; gap: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--client-line); }
.client-status__masthead + .client-approval-section { border-top: 0; }
.client-approval-section + .client-status__hero { border-top: 1px solid var(--client-line); }
.client-piece-intro { min-width: 0; }
.client-kicker { color: var(--client-muted); font: var(--text-meta)/var(--line-body) var(--sans); margin-bottom: var(--space-2); }
.client-status__hero h1, .client-approval-page h1 { font: 600 var(--client-title-size)/var(--client-title-line) var(--sans); letter-spacing: var(--tracking-ui); overflow-wrap: anywhere; }
.client-status__hero h1 { letter-spacing: var(--client-title-tracking); }
.client-recipient { margin-top: var(--space-2); color: var(--client-muted); font-size: var(--text-ui); line-height: var(--line-body); }
.client-product-photo { margin: 0; min-width: 0; }
.client-product-photo__image { display: block; width: 100%; height: 220px; object-fit: cover; border: 1px solid var(--client-line); border-radius: var(--radius-panel); }
.client-product-photo figcaption { margin-top: var(--space-2); color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); }
.client-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--client-muted); }
.client-photo-placeholder strong { color: var(--client-ink); font-weight: 400; }
.client-status__hero--with-photo .client-photo-placeholder { display: none; }
.client-piece-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-4) 0; border-top: 1px solid var(--client-line); }
.client-piece-status:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.client-piece-status > div { min-width: 0; }
.client-current-status > span, .client-promise > span { display: block; color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); margin-bottom: var(--space-1); }
.client-current-status > strong, .client-promise strong { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-ui); line-height: var(--line-body); font-weight: 600; overflow-wrap: anywhere; }
.client-status .stage-marker { color: var(--client-ink); }
.client-stage-marker { display: inline-flex; align-items: center; gap: var(--space-2); }
.client-stage-marker svg { flex: none; }
.client-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--client-line); }
.client-content-grid--with-journey { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-8); }
.client-main-column { min-width: 0; }
.client-main-column > section { padding: var(--space-6) 0; }
.client-main-column > section + section { border-top: 1px solid var(--client-line); }
.client-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.client-status .client-section-heading h2 { font: 600 var(--text-ui)/var(--line-body) var(--sans); letter-spacing: var(--tracking-ui); color: var(--client-ink); }
.client-section-heading > span { color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); }
.client-update-copy { font-size: var(--client-copy-size); line-height: var(--client-copy-line); color: var(--client-copy); overflow-wrap: anywhere; }
.client-update-copy p + p { margin-top: var(--space-2); }
.client-update-copy .client-update-text { white-space: normal; font-size: inherit; line-height: inherit; }
.client-specs__more { margin-top: var(--space-2); }
.client-specs__more > summary { width: fit-content; margin-left: calc(-1 * var(--space-2)); cursor: pointer; list-style: none; }
.client-specs__more > summary::-webkit-details-marker { display: none; }
.client-specs .client-specs__more > dl { margin-top: var(--space-2); }
.client-specs dl { display: block; margin: 0; }
.client-specs dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; min-height: var(--field-row-height); }
.client-specs dt { color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); overflow-wrap: anywhere; }
.client-specs dd { margin: 0; font-size: var(--text-ui); line-height: var(--line-body); }
.client-specs dd p { margin: 0; }
.client-timeline-section { padding: var(--space-6) 0 var(--space-6) var(--space-6); border-left: 1px solid var(--client-line); }
.client-timeline { position: relative; display: block; list-style: none; margin: 0; padding: 0; }
.client-timeline::before { content: ""; position: absolute; top: var(--space-3); bottom: var(--space-3); left: calc(var(--stage-circle-size) / 2); width: 1px; background: var(--client-line); }
.client-timeline__step { position: relative; display: flex; align-items: center; gap: var(--brand-icon-gap); min-height: var(--field-row-height); }
.client-timeline__track { display: flex; position: relative; z-index: 1; flex-shrink: 0; }
.client-timeline__dot { display: grid; place-items: center; width: var(--stage-circle-size); height: var(--stage-circle-size); border: 1px solid var(--client-line); border-radius: 0; background: var(--client-background); color: var(--client-muted); font-size: var(--stage-numeral-size); line-height: 1; }
.client-timeline__label { color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); }
.client-timeline__step--complete .client-timeline__dot, .client-timeline__step--done .client-timeline__dot { background: var(--client-done); border-color: var(--client-done); color: var(--surface); }
.client-timeline__step--current .client-timeline__dot { background: var(--client-accent); border-color: var(--client-accent); color: var(--client-on-accent); }
.client-timeline__step--current .client-timeline__label { color: var(--client-ink); font-weight: 600; }
.client-timeline__current { margin-left: auto; color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.client-status .progress-steps__marker { font-variant-numeric: lining-nums tabular-nums; }
.client-status .progress-steps__marker:not(:has(svg)) { padding-top: 1px; }
.client-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.client-photo-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--client-line); border-radius: var(--radius-panel); }
.client-photo-grid figure { margin: 0; }
.client-photo-grid figcaption { margin-top: var(--space-2); color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-body); }
.client-catalog-specs summary { cursor: pointer; font-size: var(--text-ui); }
.client-catalog-specs summary span { display: block; margin-top: var(--space-2); color: var(--client-muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.client-catalog-specs details > p { margin-top: var(--space-4); line-height: var(--line-body); }
.client-status__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--client-line); color: var(--client-ink); font-size: var(--text-body); line-height: var(--line-body); }
.client-studio-contact strong { color: var(--client-ink); font-size: var(--text-body); font-weight: 600; }
.client-studio-contact p { margin: var(--compact-copy-gap) 0 0; color: var(--client-muted); font-size: var(--text-meta); }
.client-status .button, .client-status .text-link { color: var(--ink); background: transparent; }
.client-status .button { line-height: 1; letter-spacing: -.156px; }
.client-status .button--quiet { border: 1px solid transparent; }
.client-status .button--secondary { border-color: var(--client-track); }
.client-status .button:hover, .client-status .text-link:hover { background: var(--client-hover); }
.client-status__footer > .button { flex-shrink: 0; }
.publication-preview__page .client-status, .appearance-review__page .client-status { padding: var(--space-6); margin: 0; max-width: none; }
.client-status.client-approval-page { max-width: 780px; }
.client-approval-page .client-kicker { font-family: var(--sans); }
.client-approval-page .breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--control-height); border-radius: var(--radius-control); }
.client-approval-page .form-errors { background: transparent; border-radius: 0; }
@container client-page (max-width: 640px) {
  .client-status__hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .client-content-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .client-timeline-section { border-top: 1px solid var(--client-line); border-left: 0; padding-left: 0; }
  .client-section-heading { gap: var(--space-2); }
  .client-status__masthead { gap: var(--space-3); }
  .client-studio-brand img { max-width: 120px; }
  .client-photo-grid { grid-template-columns: 1fr; }
  .client-status__footer { flex-wrap: wrap; }
}
@media (max-width: 600px) { .client-status-body .client-status:not(.client-approval-page) { padding-inline: var(--space-4); } }