/* R6: alignment, readable long records and constrained operational dialogs.
   Public layouts and program identities remain the approved R5 design. */
:root {scroll-padding-top:100px}
button,input,select,textarea {font:inherit}
:where(button,a,input,select,textarea):focus-visible {outline:3px solid #2e78ef;outline-offset:3px}
:where(.form-grid,.form-grid>*,.purchase-line>*,.cut-line>*,.page-heading,.store-label,.profile,.workspace-name) {min-width:0}
:where(.profile span,.store-label span,.workspace-name strong,.nc-profile span) {overflow-wrap:anywhere}
:where(.form-grid select,.purchase-line select,.branch-label select) {min-width:0;max-width:100%}
:where(.retail,.verde-shell) dialog {box-sizing:border-box;max-width:calc(100vw - 24px);max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain}
.retail dialog .form-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.retail dialog .form-actions button {min-height:44px}
.retail .cart-line strong,.retail .product-info strong {overflow-wrap:anywhere}
.retail table {font-variant-numeric:tabular-nums}
.retail form[aria-busy="true"] {cursor:progress}
.nc6-release {font-size:11px;letter-spacing:.06em;color:#70819a}
@media(max-width:600px){
 .retail dialog .purchase-line,.retail dialog .cut-line {grid-template-columns:minmax(0,1fr)!important}
 .retail dialog .form-actions {justify-content:stretch}
 .retail dialog .form-actions button {flex:1 1 140px}
 .retail .nc-profile {max-width:150px}
 .retail .nc-profile span {max-width:105px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Prevent implicit mobile grid columns from inherited R2 button placement. */
.retail dialog[open] {display:flex;flex-direction:column;overflow:hidden}
.retail dialog .modal-head {flex:0 0 auto}
.retail dialog #modalBody {min-height:0;overflow:auto;overscroll-behavior:contain}
.retail dialog #modalBody form>label {display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.retail dialog #modalBody .form-actions {position:sticky;bottom:-28px;background:#fff;padding:16px 0 14px;margin-top:16px;z-index:2;border-top:1px solid #e5eaf1}
@media(max-width:600px){
 .retail dialog .purchase-line>* {grid-column:auto!important;grid-row:auto!important}
 .retail dialog .purchase-line>label,.retail dialog .purchase-line input,.retail dialog .purchase-line select {width:100%;min-width:0}
 .retail dialog .purchase-line {row-gap:12px;padding:16px 0}
 .retail dialog .purchase-line label {font-size:12px}
 .retail dialog .purchase-line input,.retail dialog .purchase-line select {font-size:14px;min-height:44px}
 .retail dialog .purchase-line button {justify-self:end;min-width:44px;min-height:40px}
 .retail dialog #modalBody .form-actions {bottom:-20px}
}