/* Product composition only. Shared controls and surfaces live in components.css. */
.product-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.product-stack > form, form.product-stack { margin: 0; }
.product-auth { width: min(var(--auth-max), calc(100% - var(--space-8))); margin: var(--space-12) auto; display: grid; gap: var(--space-6); }
.product-auth > .ui-brand { margin-bottom: var(--space-6); }
.product-auth__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-block: var(--space-5); }
.product-form-row, .product-filter { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.product-form-row > .ui-field { flex: 1 1 9rem; }
.product-filter { margin-bottom: var(--space-8); }
.product-filter > .ui-field:first-child { flex: 1 1 16rem; }
.product-filter > .ui-field { flex: 0 1 12rem; }
.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.product-member { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.product-member > p { flex: 1; }
.product-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }
.product-facts dt { color: var(--color-muted); }
.product-facts dd { margin: var(--space-2) 0 0; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.product-activity { padding-left: var(--space-5); display: grid; gap: var(--space-4); }
.product-activity time { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.product-signing { max-width: var(--signing-max); padding: var(--space-6); margin: 0 auto; }
.product-signing__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-10); padding-block: var(--space-4); }
.product-signing__header > span { color: var(--color-muted); }
@media (max-width: 640px) {
 .product-auth { margin-top: var(--space-6); }
 .product-form-row > .ui-field, .product-filter > .ui-field { flex-basis: 100%; }
 .product-facts { grid-template-columns: 1fr; }
 .product-signing { padding: var(--space-4); }
 .product-signing__header { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-6); }
}

.product-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, var(--editor-sidebar)); gap: var(--space-6); align-items: start; }
@media (max-width: 1000px) { .product-editor { grid-template-columns: 1fr; } }

/* Framed-sheet refinements: real agreements stay central; setup recedes. */
.product-auth-header { max-width: var(--auth-layout-max); padding: var(--space-8) var(--space-6); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.product-auth-layout { max-width: var(--auth-layout-max); margin: var(--space-8) auto var(--space-12); padding-inline: var(--space-6); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); align-items: center; }
.product-auth-intro h2 { font-size: var(--auth-intro-size); line-height: 1.2; letter-spacing: -.04em; margin-bottom: var(--space-6); }
.product-auth-intro > p { max-width: 36ch; color: var(--color-muted); }
.product-auth-steps { margin-block: var(--space-8); padding-left: var(--space-6); display: grid; gap: var(--space-6); }
.product-auth-steps li { padding-left: var(--space-2); }
.product-auth-steps span { display: block; color: var(--color-muted); margin-top: var(--space-1); }
.product-auth-form { min-width: 0; }
.product-auth__links { margin-top: var(--space-6); margin-bottom: var(--space-4); }
.product-auth-help { color: var(--color-muted); }
.product-auth-help > summary { cursor: pointer; font-weight: 500; padding-block: var(--space-3); }
.product-auth-help > .product-stack { margin-top: var(--space-4); gap: var(--space-3); }
.product-auth-recovery { margin-top: calc(-1 * var(--space-3)); text-align: right; }
.product-auth-providers { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.product-context { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--text-xs); }
.product-account { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.product-account p { font-size: var(--text-xs); }
.product-filter { margin-top: var(--space-6); margin-bottom: var(--space-5); }
.product-filter > .ui-field:first-child { max-width: 30rem; }
.product-document-link { color: var(--color-ink); font-weight: 550; text-decoration: none; }
.product-document-link:hover { color: var(--color-primary); text-decoration: underline; }
.product-list-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.product-review { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(18rem,1fr); gap: var(--space-6); align-items: start; }
.product-recipient-summary { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.product-recipient-summary li { display: flex; gap: var(--space-3); align-items: center; overflow-wrap: anywhere; }
@media (max-width: 900px) {
 .product-auth-layout { grid-template-columns: 1fr; max-width: var(--auth-max); margin-top: var(--space-4); }
 .product-auth-header { max-width: var(--auth-max); }
 .product-auth-intro { display: none; }
 .product-review { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
 .product-context { align-items: flex-start; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); padding-bottom: var(--space-4); }
 .product-auth-header { padding: var(--space-5) var(--space-4); }
 .product-auth-layout { padding-inline: var(--space-4); margin-top: var(--space-3); }
 .product-filter > .ui-field { flex-basis: calc(100% - 7rem); }
 .product-filter { flex-wrap: nowrap; }
}

.product-filter > .ui-field { flex: 1 1 16rem; max-width: 30rem; }
@media (max-width: 640px) { .product-filter { display: grid; grid-template-columns: minmax(0,1fr) auto; } .product-filter > .ui-field { max-width: none; } }

/* Legal pages retain the brand and a comfortable reading measure. */
.product-legal { width: min(var(--legal-max), calc(100% - var(--space-8))); margin: 0 auto; }
.product-legal__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-8); }
.product-legal-copy { display: grid; gap: var(--space-8); line-height: var(--legal-line-height); overflow-wrap: anywhere; }
.product-legal-copy section { display: grid; gap: var(--space-4); }
.product-legal-copy h2 { font-size: var(--text-xl); line-height: 1.4; }
.product-legal-copy ul { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-4); }
.product-legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-block: var(--space-8); padding-inline: var(--space-4); font-size: var(--text-sm); }
@media (max-width: 640px) { .product-legal__header { padding-block: var(--space-5); } }
.product-error { width: min(36rem, calc(100% - var(--space-8))); min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); padding-block: var(--space-8); }
.product-error .ui-page-header { margin-bottom: 0; flex-direction: column; align-items: flex-start; }
@media (max-width: 640px) { .product-error { padding-block: var(--space-5); } }

.product-authenticator-qr { max-width: 100%; height: auto; }
.product-recovery-codes { display: grid; gap: var(--space-4); padding-left: var(--space-5); font-family: var(--font-mono); overflow-wrap: anywhere; }
.product-export-list { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.product-export-list li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }

.product-settings-body { display: grid; gap: var(--space-6); max-width: var(--settings-max); min-width: 0; }
.product-settings-row { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.product-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6); }
.product-person { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.product-person__identity { display: flex; align-items: center; gap: var(--space-3); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) { .product-person { align-items: flex-start; } }
.product-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 640px) { .product-settings-fields { grid-template-columns: 1fr; } }
.product-role-fields { display: grid; gap: var(--space-4); border: 0; padding: 0; margin: 0; min-width: 0; }
.product-role-fields legend { padding: 0; margin-bottom: var(--space-3); font-weight: 600; }

.product-legal-links--compact { margin: 0; padding: 0; font-size: var(--text-xs); }
.product-legal-links--compact a { color: var(--color-muted); text-decoration: none; }
.product-legal-links--compact a:hover { color: var(--color-ink); text-decoration: underline; }

/* 1440px: 240px navigation + 2×32px gutters + 1126px content + 8px frame + 2px border. */
.product-document-toolbar { display: grid; grid-template-columns: minmax(var(--toolbar-navigation-width), 1fr) minmax(0, 21rem) auto; grid-template-areas: "scope search filters"; align-items: end; gap: var(--space-4); margin-block: var(--space-4); }
.product-document-toolbar > .ui-tabs { grid-area: scope; align-self: end; }
.product-document-toolbar:has(> .ui-tabs) { margin-top: 0; }
.ui-page-header:has(+ [data-controller="list-position"] > .product-document-toolbar > .ui-tabs) { margin-bottom: var(--space-3); }
.product-document-toolbar > .ui-popover { grid-area: filters; justify-self: end; }
.product-document-search { grid-area: search; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); margin: 0; }
.product-document-toolbar__summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 760px) {
  .product-document-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search search" "scope filters"; gap: var(--space-3); }
  .product-document-toolbar:has(> .ui-tabs) { grid-template-areas: "scope filters" "search search"; }
}

.product-client-content { min-width: 0; }
.product-client-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: end; gap: var(--space-4); padding-block: var(--space-4); }
@media (max-width: 640px) { .product-client-detail { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.product-field-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.product-signing-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, var(--editor-sidebar)); gap: var(--space-6); align-items: start; }
.product-signing-workspace > * { min-width: 0; }
@media (min-width: 1001px) { .product-editor > .document-viewer, .product-signing-workspace > .document-viewer { position: sticky; top: var(--space-4); } }
@media (max-width: 1000px) { .product-signing-workspace { grid-template-columns: 1fr; } }

/* Stack spacing owns the header gap; avoid adding its standalone margin twice. */
.product-stack > .ui-page-header { margin-bottom: 0; }

.product-document-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.product-document-identity > .ui-icon { margin-top: var(--space-1); color: var(--color-muted); }
.product-document-location { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }

.product-work-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }

.product-document-toolbar--context { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search filters"; }
.product-document-toolbar--context .product-document-search { max-width: var(--settings-max); }

.product-upload-form { max-width: var(--settings-max); }

.product-work-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); margin: 0; width: 100%; max-width: var(--popover-width); }

/* Filter panels group related native fields; the shared popover owns scrolling. */
.product-filter-panel { display: grid; gap: var(--space-5); margin: 0; }
.product-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.product-filter-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.product-filter-group legend { font-weight: 600; padding: 0; margin-bottom: var(--space-3); }
@media (max-width: 480px) { .product-filter-fields { grid-template-columns: minmax(0, 1fr); } }

.product-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-6); padding-bottom: var(--space-4); }
.product-collection-files { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.product-collection-files li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-sm); }
.product-collection-files .ui-icon { color: var(--color-muted); }
.product-collection-files span { overflow-wrap: anywhere; }

/* Stack layouts stretch fields, while actions keep their shared control size. */
.product-stack > .ui-button { justify-self: start; }
.product-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.product-collection-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-work-filter { max-width: none; width: auto; }
.product-signature-options { max-width: var(--settings-max); }
.product-signature-order { display: grid; grid-template-columns: minmax(0, 1fr) var(--signature-order-width); align-items: center; gap: var(--space-4); }
.product-signature-order[hidden] { display: none; }
@media (max-width: 640px) { .product-work-filter { width: 100%; } }

.product-support-banner { position: sticky; top: 0; z-index: 24; padding: var(--space-3) var(--space-4); background: var(--color-warning-soft); border-bottom: 1px solid var(--color-border); }
.product-support-banner .ui-alert { padding: 0; background: transparent; }
.product-support-banner form { margin-top: var(--space-3); }

.signing-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.signing-workspace:has(> .signing-panel) { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); }
.signing-workspace > * { min-width: 0; }
.signing-workspace > .document-viewer { position: sticky; top: var(--space-4); }
.signing-workspace .document-viewer__pages { height: min(72vh, 44rem); max-height: none; }
.signing-panel { display: grid; align-content: start; gap: var(--space-5); }
.signing-panel > .signing-form { gap: var(--space-4); }
.signing-panel .product-actions { flex-direction: column; align-items: stretch; }
.signing-progress-bar { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.signing-progress-bar > [role="status"] { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.signing-panel .product-actions > .ui-button,
.signing-progress-bar > .ui-button,
.signing-panel .ui-card__footer .ui-button { align-self: stretch; width: 100%; }
.signing-panel .ui-card__footer .product-stack { gap: var(--space-4); }
.signing-panel > .signing-form > .ui-button { justify-self: stretch; }
.signing-panel > [data-controller="dialog"] > .ui-button { width: 100%; }
.signing-form [data-signing-form-target="field"] > [data-controller="dialog"] > .ui-button { width: 100%; justify-content: flex-start; }
.signing-form .ui-card .product-stack { gap: var(--space-2); }
@media (max-width: 1000px) {
  .signing-workspace, .signing-workspace:has(> .signing-panel) { grid-template-columns: minmax(0, 1fr); }
  .signing-workspace > .document-viewer { position: static; }
  .signing-workspace .document-viewer__pages { height: var(--viewer-mobile-height); }
  .signing-progress-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-popover); }
  .signing-progress-bar > [role="status"] { flex: 1 1 12rem; min-width: 0; }
  .signing-progress-bar > .ui-button { width: auto; flex: 0 0 auto; }
  .signing-panel { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
.ui-table time { white-space: nowrap; }
.invitation-preview { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); }
.invitation-preview p { margin: 0; }
.signing-progress { list-style: none; margin: 0; padding: 0; display: grid; }
.signing-progress__person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: start; padding-block: var(--space-3); border-bottom: 1px solid var(--color-row-border); }
.signing-progress__person:first-child { padding-top: 0; }
.signing-progress__person:last-child { padding-bottom: 0; border-bottom: 0; }
.signing-progress__name { margin: 0; font-weight: 600; color: var(--color-heading); }
.signing-progress__email, .signing-progress__status { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.signing-progress__email { grid-column: 1; }
.signing-progress__status { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 14rem; text-align: end; }
.signing-progress__person > [data-controller="dialog"], .signing-progress .ui-alert { grid-column: 1 / -1; justify-self: start; }
.signing-progress__person > [data-controller="dialog"] > .ui-button { justify-content: flex-start; }
.signing-progress .ui-alert form { margin: var(--space-3) 0 0; }
dialog#signing-progress .ui-dialog__footer { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.signing-progress-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.signing-progress-toolbar form, .signing-progress-toolbar > [data-controller="dialog"] { display: inline-flex; margin: 0; }
@media (max-width: 640px) {
  .signing-progress__person { grid-template-columns: minmax(0, 1fr); }
  .signing-progress__status { grid-column: 1; grid-row: auto; max-width: none; text-align: start; }
  .signing-progress-toolbar, .signing-progress-toolbar .ui-actions, .signing-progress-toolbar form, .signing-progress-toolbar > [data-controller="dialog"] { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; }
  .signing-progress-toolbar .ui-button { width: 100%; }
}
.document-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.document-version { display: grid; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-row-border); }
.document-version:last-child { border-bottom: 0; padding-bottom: 0; }
.document-version__title { font-weight: 600; }